引言
因公司项目，需要找到一个VUE+Ts+Nuxt 的富文本编辑器，需要可改图标，可配置国际化，可配置工具栏，不能出现中文
vue2-editor
支持ts 支持VUE 支持配置工具栏 暂不支持换图标
安装语句
npm install vue2-editor
npm i --save-dev @types/vue2-editor
使用
import { VueEditor } from "vue2-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';
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
使用
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
使用