vue项目中富文本编辑器

1. npm install vue-quill-editor --save
2. 在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)

3. 在模块中使用 相关核心代码

<quill-editor 
  v-model="addContent" 
  :options="editorOption" 
  >
</quill-editor>

import { quillEditor } from 'vue-quill-editor'
components: { quillEditor },
editorOption: {
  modules: {
    toolbar: [
      [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
      [{ 'header': 1 }, { 'header': 2 }],
      [{ 'align': [] }],
      ['bold', 'italic', 'underline', 'strike'],
      [{ 'list': 'ordered' }, { 'list': 'bullet' }]
    ]
  }
},

 

• 测试中发现一个问题，就是这些内容在编辑器中是正常显示的，但是把内容单独出来显示不正常
• 解决办法是给容器增加一个classql-editor，才能正常显示

        <div class="preface-text ql-editor" v-html="report.foreword">