富文本编辑器 quillEditor 的使用方法

装包 vue-quill-editor 和高亮插件 highlight.js

npm install vue-quill-editor highlight.js

引入样式和包

//引入富文本编辑器及其样式
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
// 引入高亮插件及其样式文件
import hljs from 'highlight.js'
import 'highlight.js/styles/googlecode.css' 

vue2项目需要注册，vue3项目不需要注册

export default {
   components: { quillEditor }, 
}

富文本工具栏配置 

const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
  [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
  ['blockquote'], // 引用  代码块-----['blockquote', 'code-block']
  ['code-block', 'image', 'link'] // 链接、图片、视频-----['link', 'image', 'video']
]

富文本编辑器配置

questionEditorOption: {
        //  富文本编辑器配置
        modules: {
          // 工具栏定义的
          toolbar: toolbarOptions,
          syntax: {
            highlight: (text) => {
              return hljs.highlightAuto(text).value // 这里就是代码高亮需要配置的地方
            }
          }
        },
        // 主题
        theme: 'snow',
        placeholder: '请输入题干'
      },

使用

           <quill-editor
             ref="queEditer"
              v-model="form.question"
              :options="questionEditorOption"
              class="editor"
            ></quill-editor>