雷雪松的个人blog

雷雪松的博客，一个优秀的个人技术博客。
-

富文本编辑器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

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

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

    个人感觉还是UEditor比较好用

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

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

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

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

    nvosi 评论:
    2020年9月10日 下午4:13

    5a单号网快递购买 5a空包代发网www.5adanhw.com

    mbef 评论:
    2020年9月23日 上午10:53

    快递代发，礼品代发，快递单号www.dydanhw.com

    招投标 评论:
    2021年1月14日 下午2:53

    感觉这个编辑器确实还蛮好用的

    hrtn 评论:
    2021年3月17日 下午1:52

    礼品购买网：一家全国专业代发礼品的网站，注册免费试发！http://www.lpgm.cn

    亚马逊listing文案 评论:
    2021年7月24日 下午8:22

    不错不错哦~~~

发表回复

您的电子邮箱地址不会被公开。