引言

因公司項目，需要找到一個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>