富文本编辑器vue-quill-editor

WEB前端 Vue.js 2020年7月10日

vue-quill-editor 基于 Vue 和 Quill的富文本编辑器，支持服务端渲染和单页应用，只支持IE10+浏览器。vue-quill-editor非常小巧易用，支持Quill的扩展。下面雷雪松给大家分享一下富文本编辑器vue-quill-editor。

1、安装vue-quill-editor
[cc lang=”bash”]npm install vue-quill-editor –save[/cc]

2、使用vue-quill-editor
a、全局使用
[cc lang=”javascript”]import VueQuillEditor from ‘vue-quill-editor’
Vue.use(VueQuillEditor,{})[/cc]
[cc lang=”html” escaped=”true”] <quill-editor v-model=”content” :options=”editorOption”></quill-editor>[/cc]

b、单页面组件使用
[cc lang=”javascript”]import { quillEditor } from ‘vue-quill-editor’
export default {
components: {
quillEditor
}
}[/cc]
[cc lang=”html” escaped=”true”] <quill-editor v-model=”content” :options=”editorOption”></quill-editor>[/cc]

3、添加quill-html-edit-button源代码编辑
[cc lang=”javascript”]import { htmlEditButton } from ‘quill-html-edit-button’
Quill.register(‘modules/htmlEditButton’, htmlEditButton)
window.Quill = Quill //如果不加这行，可能会提示Quill未定义[/cc]
[cc lang=”javascript”]
data(){
return {
editorOption:{
modules: {htmlEditButton: {}}
}
}
}[/cc]

如果要在一个div中显示vue-quill-editor的内容，一定要加上class=”ql-editor”。

来源：富文本编辑器vue-quill-editor