vue中使用vue-quill-editor，包括代码高亮以及图片上传到本地服务

安装cnpm install vue-quill-editor --save

在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, /* { default global options } */)

在组件里面使用 editorOption为配置项,并上传到本地安装vue-quill-editor-upload并在组件里引入import {quillRedefine} from 'vue-quill-editor-upload'

 components: {
    quillRedefine
  },

<quill-editor v-model="ruleForm.content"
                              ref="myQuillEditor"
                              :options="editorOption">
                        </quill-editor>

this.editorOption = quillRedefine(
        {
          // 图片上传的设置
          uploadConfig: {
            action:  '/blogUsers/image',  // 必填参数 图片上传地址,这里的后台是node
            // 必选参数  res是一个函数，函数接收的response为上传成功时服务器返回的数据
            // 你必须把返回的数据中所包含的图片地址 return 回去
            res: (respnse) => {
              console.log(respnse.msg.img.path, 'respnse.msg.img.path');
               var w=respnse.msg.img.path.indexOf('upload');
              // 这里切记要return回你的图片地址
               return 'http://localhost:3000/images/' + respnse.msg.img.path.substring(w);   
            }
          },
          theme:'snow'//这个是组题
        }
      ),

代码高亮安装cnpm install highlight.js --save并在组件里面引入import hljs from 'highlight.js',然后在配置项里面加入：

this.editorOption.modules.syntax = {
          highlight: text => hljs.highlightAuto(text).value
      }

整体配置项如下

created  () {
     this.editorOption = quillRedefine(
        {
          // 图片上传的设置
          uploadConfig: {
            action:  '/blogUsers/image',  // 必填参数 图片上传地址
            // 必选参数  res是一个函数，函数接收的response为上传成功时服务器返回的数据
            // 你必须把返回的数据中所包含的图片地址 return 回去
            res: (respnse) => {
              console.log(respnse.msg.img.path, 'respnse.msg.img.path');
               var w=respnse.msg.img.path.indexOf('upload');
               // 这里切记要return回你的图片地址
               return 'http://localhost:3000/images/' + respnse.msg.img.path.substring(w);   
            }
          },
          theme:'snow'
        }
      ),
      this.editorOption.modules.syntax = {
          highlight: text => hljs.highlightAuto(text).value
      }
      console.log(this.editorOption, 'this.editorOption');
  }

获取回显的数据

<code class="hljs" v-html="ruleForm.content"></code>

vue中使用vue-quill-editor，包括代码高亮以及图片上传到本地服务

推荐阅读更多精彩内容