vue ts 富文本编辑器 整理
2021-06-16 本文已影响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>