9
富文本编辑器vue-quill-editor
source link: https://www.leixuesong.com/3860
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
富文本编辑器vue-quill-editor
vue-quill-editor 基于 Vue 和 Quill的富文本编辑器，支持服务端渲染和单页应用，只支持IE10+浏览器。vue-quill-editor非常小巧易用，支持Quill的扩展。下面雷雪松给大家分享一下富文本编辑器vue-quill-editor。
1、安装vue-quill-editor
npm install vue-quill-editor --save
2、使用vue-quill-editor
a、全局使用
import VueQuillEditor from 'vue-quill-editor'
Vue.use(VueQuillEditor,{})
Vue.use(VueQuillEditor,{})
<quill-editor v-model="content" :options="editorOption"></quill-editor>
b、单页面组件使用
1
2
3
4
5
6
2
3
4
5
6
import { quillEditor } from 'vue-quill-editor'
export default {
components: {
quillEditor
}
}
export default {
components: {
quillEditor
}
}
<quill-editor v-model="content" :options="editorOption"></quill-editor>
3、添加quill-html-edit-button源代码编辑
import { htmlEditButton } from 'quill-html-edit-button'
Quill.register('modules/htmlEditButton', htmlEditButton)
window.Quill = Quill //如果不加这行，可能会提示Quill未定义
Quill.register('modules/htmlEditButton', htmlEditButton)
window.Quill = Quill //如果不加这行，可能会提示Quill未定义
1
2
3
4
5
6
7
2
3
4
5
6
7
data(){
return {
editorOption:{
modules: {htmlEditButton: {}}
}
}
}
return {
editorOption:{
modules: {htmlEditButton: {}}
}
}
}
如果要在一个div中显示vue-quill-editor的内容，一定要加上class=”ql-editor”。
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK