vue-quillEditor 富文本编辑器

最新推荐文章于 2024-03-12 00:57:29 发布

不当混子

最新推荐文章于 2024-03-12 00:57:29 发布

阅读量163

点赞数

文章标签： vue js

本文链接：https://blog.csdn.net/weixin_45515229/article/details/106405758

版权

安装依赖

npm run vue-quill-editor --save

在main.js中引入

import VueQuillEditor from 'vue-quill-editor'

Vue.use(VueQuillEditor)

然后就可以直接用了啊

<quill-editor
       ref="myTextEditor"
       class="ql-editor"
       :disabled="true"
       v-model="form1.content"
       :options="editorOption"
       >
 </quill-editor>

export default {
  data() {
    return {
       editorOption: {
        modules: {
          toolbar: toolbar()
        }
      }
    }
  }
}

//一些配置
export const toolbar = () => {
    return [
      ['bold', 'italic', 'underline'],
      [{ color: [] }, { background: [] }],
      [{ list: 'ordered' }, { list: 'bullet' }],
      [{ indent: '-1' }, { indent: '+1' }],
      [{ direction: 'rtl' }],
      [{ align: [] }],
      [{ header: [1, 2, 3, 4, 5, 6, false] }],
      [{ font: [] }],
      ['link', 'image'],
      ['clean']
    ]
  }