-

富文本编辑器vue-quill-editor

WEB前端

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

1、安装vue-quill-editor

1
npm install vue-quill-editor --save

2、使用vue-quill-editor
a、全局使用

1
2
import VueQuillEditor from 'vue-quill-editor'
Vue.use(VueQuillEditor,{})
1
 <quill-editor v-model="content" :options="editorOption"></quill-editor>

b、单页面组件使用

1
2
3
4
5
6
import { quillEditor } from 'vue-quill-editor'
export default {
components: {
quillEditor
}
}
1
 <quill-editor v-model="content" :options="editorOption"></quill-editor>

3、添加quill-html-edit-button源代码编辑

1
2
3
import { htmlEditButton } from 'quill-html-edit-button'
Quill.register('modules/htmlEditButton', htmlEditButton)
window.Quill = Quill //如果不加这行,可能会提示Quill未定义
1
2
3
4
5
6
7
data(){
return {
editorOption:{
modules: {htmlEditButton: {}}
}
}
}

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

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

3 评论 “富文本编辑器vue-quill-editor

    助听器 评论:
    2020年7月18日 上午9:20

    个人感觉还是UEditor比较好用

    ad6122 评论:
    2020年7月20日 上午10:00

    天津荣康包装制品有限公司欢迎大家访问www.tjrkbz.com

    招标问答 评论:
    2020年7月31日 下午2:36

    很多富文本编辑器都很好用的

发表评论

电子邮件地址不会被公开。 必填项已用*标注