美文网首页
vue ts 富文本编辑器 整理

vue ts 富文本编辑器 整理

作者: 刘佳季 | 来源:发表于2021-06-16 15:31 被阅读0次

    引言

    因公司项目,需要找到一个VUE+Ts+Nuxt 的富文本编辑器,需要可改图标,可配置国际化,可配置工具栏,不能出现中文

    vue2-editor

    支持ts 支持VUE 支持配置工具栏 暂不支持换图标

    安装语句

    npm install vue2-editor
    npm i --save-dev @types/vue2-editor
    

    使用

    import { VueEditor } from "vue2-editor";
    <vue-editor v-model="content" :editorToolbar="customToolbar"></vue-editor>
    

    配置工具栏

    其中没有官方文档讲有哪些配置名字,最后通过翻node_moudles中找到默认全部配置如下

    defaultToolbar = 
    [
      [{header: [false, 1, 2, 3, 4, 5, 6]}],
      ["bold", "italic", "underline", "strike"], // toggled buttons
      [{align: ""}, { align: "center"}, {align: "right"}, {align: "justify"}],
      ["blockquote", "code-block"],
      [{list: "ordered"}, {list: "bullet"}, {list: "check"}], 
      [{indent: "-1"}, {indent: "+1"}], // outdent/indent
      [{color: []}, {background: []}], // dropdown with defaults from theme
      ["link", "image", "video"], ["clean"] // remove formatting button
    ];
    

    wangeditor

    支持Ts 支持 Vue 支持 nuxt 支持配置工具栏 支持换图标 !!!这货国际化竟然是中文为key

    安装

    npm i wangeditor
    npm i --save-dev @types/wangeditor
    

    使用

    import E from 'wangeditor';
    
    <div id="editor"></div>
    
    const editor = new E('#editor');
    editor.config.uploadImgServer = '/upload-img';
            editor.config.onchange = (html: any) => {
                this.getFullText(html);
            };
            editor.config.showLinkImg = true;
            editor.config.height = 119;
            editor.config.uploadImgServer = editor1.config.uploadFileName = 'file';
            editor.config.zIndex = 8;
            editor.config.uploadImgParams = {
                from: 'editor'
            };
            editor.create();
            if (this.content) {
                editor1.txt.html(this.content);
            }
    

    配置相关

    请自己百度或bing一下wangeditor,有文档的

    vue-froala-wysiwyg

    不支持Ts

    安装

    npm install vue-froala-wysiwyg --save
    

    详情

    https://github.com/froala/vue-froala-wysiwyg

    vue-wysiwyg

    不支持Ts

    安装

    npm install vue-wysiwyg --save
    

    详情

    https://github.com/chmln/vue-wysiwyg

    vue-html5-editor

    不支持Ts 但是这个其他方面感觉挺齐全的

    安装

    npm install vue-html5-editor --save
    

    详情

    https://github.com/PeakTai/vue-html5-editor

    Vue-Quill-Editor

    不支持Ts 但是这个富文本要是不用ts的话还是可以的 文档齐全

    安装

    npm install vue-quill-editor --save
    

    详情

    https://github.com/surmon-china/vue-quill-editor

    SunEditor

    支持 vue 支持 ts 可配置图标 就是和UI出入太大

    安装

    npm install suneditor --save
    

    使用

    <textarea id="sample">Hi</textarea>
    
    import 'suneditor/dist/css/suneditor.min.css'
    import suneditor from 'suneditor'
    import plugins from 'suneditor/src/plugins'
    
    suneditor.create('sample', {
        plugins: plugins,
        buttonList: [
            ['undo', 'redo'],
            ['font', 'fontSize', 'formatBlock'],
            ['paragraphStyle', 'blockquote'],
            ['bold', 'underline', 'italic', 'strike', 'subscript', 'superscript'],
            ['fontColor', 'hiliteColor', 'textStyle'],
            ['removeFormat'],
            '/', // Line break
            ['outdent', 'indent'],
            ['align', 'horizontalRule', 'list', 'lineHeight'],
            ['table', 'link', 'image', 'video', 'audio' /** ,'math' */], // You must add the 'katex' library at options to use the 'math' plugin.
            /** ['imageGallery'] */ // You must add the "imageGalleryUrl".
            ['fullScreen', 'showBlocks', 'codeView'],
            ['preview', 'print'],
            ['save', 'template']
        ]
    })
    

    评价

    UI出入太大了,但是实现极快,所见即所得,花里胡哨的图片功能

    Quill

    目前基本全方位满足

    安装

    npm install quill
    npm i --save-dev @types/quill
    

    使用

    <template>
        <div>
            <div class="editor"></div>
        </div>
    </template>
    
    <script lang="ts">
    /* eslint-disable camelcase */
    /* eslint-disable no-unused-expressions */
    /* eslint-disable @typescript-eslint/no-empty-function */
    import { Component, Vue, Prop, Emit } from 'vue-property-decorator';
    import Quill from 'quill';
    import 'quill/dist/quill.snow.css';
    
    @Component({ name: 'TinymceEditer', components: {} })
    export default class extends Vue {
        @Prop({ type: String, default: '', required: false })
        private value: any;
        @Emit('getParams')
        emitTodo(params: any): number {
            return params;
        }
        quill = null;
        options = {
            theme: 'snow',
            modules: {
                toolbar: [
                    ['bold', 'italic', 'underline', 'strike'],
                    ['blockquote', 'code-block'],
                    [{ header: 1 }, { header: 2 }],
                    [{ list: 'ordered' }, { list: 'bullet' }],
                    [{ script: 'sub' }, { script: 'super' }],
                    [{ indent: '-1' }, { indent: '+1' }],
                    [{ direction: 'rtl' }],
                    [{ size: ['small', false, 'large', 'huge'] }],
                    [{ header: [1, 2, 3, 4, 5, 6, false] }],
                    [{ color: [] }, { background: [] }],
                    [{ font: [] }],
                    [{ align: [] }],
                    ['clean'],
                    ['link', 'image', 'video']
                ]
            },
            placeholder: 'Insert text here ...'
        };
        mounted() {
            let dom = this.$el.querySelector('.editor');
    
            (this.quill as any) = new Quill(dom as Element, this.options);
    
            (this.quill as any).setContents(this.value);
    
            (this.quill as any).on('text-change', () => {
                this.emitTodo((this.quill as any).getContents());
            });
        }
    }
    </script>
    
    <style lang="scss">
    </style>
    
    

    相关文章

      网友评论

          本文标题:vue ts 富文本编辑器 整理

          本文链接:https://www.haomeiwen.com/subject/bclcyltx.html