版权声明:Yangliwei 版权所有 https://blog.csdn.net/qq_32674347/article/details/84900044
1,选择使用了vue-quill-editor
- npm install vue-quill-editor -D
全局使用:
import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'
// require styles
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor, /* { default global options } */)
组件使用:
// require styles
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
export default {
components: {
quillEditor
}
}
自定义功能配置:
<script>
import { quillEditor } from 'vue-quill-editor'
export default{
data(){
return {
content:null,
editorOption:{
modules:{
toolbar:[
[
{ size: ["small", false, "large", "huge"] },
{ color: [] },
{ align: [] },
"bold",
"italic",
"underline",
"strike",
"link",
"blockquote",
"code-block",
"image",
"video"
]
]
}
}
}
},
methods:{
onEditorBlur(){//失去焦点事件
},
onEditorFocus(){//获得焦点事件
},
onEditorChange(){//内容改变事件
}
}
}
</script>
2,需要在显示的div 包裹上class :ql-editor
<div class="content">
<!-- {{articledetail.content}} -->
<div class="ql-editor" v-html="articledetail.content"></div>
</div>