Vue中使用富文本编辑器Vue-Quill-Editor

最新推荐文章于 2024-07-22 17:43:00 发布

dong.wang

最新推荐文章于 2024-07-22 17:43:00 发布

阅读量116

点赞数

本文链接：https://blog.csdn.net/wangdong9395/article/details/108648759

版权

// 引入富文本编辑器
main.js中引入
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,{
  modules: {
    toolbar: [
      [{ header: [1, 2, false] }],
      ['bold', 'italic', 'underline'],
      ['image', 'code-block']
    ]
  }, 
  placeholder: "内容",
  theme: 'snow' })
template部分
 <quill-editor
              class="editor"
              v-model="content"
              ref="myQuillEditor"
              @blur="onEditorBlur"
              @focus="onEditorFocus"
              @ready="onEditorReady"
            ></quill-editor>
data部分
data（）{
  	return {
  	 content："",
  	}
}
methods部分
onEditorBlur() {},
onEditorFocus() {},
onEditorReady() {},