适配Vue的富文本编辑器vue-quille-editor的使用以及前端显示获得的html

安装

CDN

<link rel="stylesheet" href="path/to/quill.core.css"/>
<link rel="stylesheet" href="path/to/quill.snow.css"/>
<link rel="stylesheet" href="path/to/quill.bubble.css"/>
<script type="text/javascript" src="path/to/quill.js"></script>
<script type="text/javascript" src="path/to/vue.min.js"></script>
<script type="text/javascript" src="path/to/dist/vue-quill-editor.js"></script>
<script type="text/javascript">
  Vue.use(window.VueQuillEditor)
</script> 

NPM

npm install vue-quill-editor --save

使用

全局配置

import Vue from 'vue'
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 } */)

单个组件配置

// require styles
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
 
import { quillEditor } from 'vue-quill-editor'
 
export default {
  components: {
    quillEditor
  }
}

使用方法

SSR

<template>
  <!-- 双向数据绑定 -->
  <div class="quill-editor" 
       v-model="content"
       v-quill:myQuillEditor="editorOption">
  </div>
 
  <!-- 手动控制数据流  -->
  <div class="quill-editor" 
       :content="content"
       @change="onEditorChange($event)"
       v-quill:myQuillEditor="editorOption">
  </div>
</template>
 
<script>
  export default {
    data() {
      return {
        content: '<p>example content</p>',
        editorOption: { /* quill options */ }
      }
    },
    mounted() {
      console.log('this is current quill instance object', this.myQuillEditor)
    },
    methods: {
      // 编辑器变化时触发
      onEditorChange({quill,html,text}) {
        console.log('onEditorChange',quill,html,text);
      }
    },
  }
</script>

SPA

<template>
  <!-- 双向数据绑定 -->
  <quill-editor v-model="content"
                ref="myQuillEditor"
                :options="editorOption"
                @blur="onEditorBlur($event)"
                @focus="onEditorFocus($event)"
                @ready="onEditorReady($event)">
  </quill-editor>
 
  <!-- 手动控制数据流 -->
  <quill-editor :content="content"
                :options="editorOption"
                @change="onEditorChange($event)">
  </quill-editor>
</template>
 
<script>
 
  // you can also register quill modules in the component
  import Quill from 'quill'
  import { someModule } from '../yourModulePath/someQuillModule.js'
  Quill.register('modules/someModule', someModule)
  
  export default {
    data () {
      return {
        content: '<h2>I am Example</h2>',
        editorOption: {
          // some quill options
        }
      }
    },
    // 如果需要手动控制数据同步，父组件需要显式地处理changed事件
    methods: {
      onEditorBlur(quill) {
        console.log('editor blur!', quill)
      },
      onEditorFocus(quill) {
        console.log('editor focus!', quill)
      },
      onEditorReady(quill) {
        console.log('editor ready!', quill)
      },
      onEditorChange({ quill, html, text }) {
        console.log('editor change!', quill, html, text)
        this.content = html;
      }
    },
    computed: {
      editor() {
        return this.$refs.myQuillEditor.quill
      }
    },
    mounted() {
      console.log('this is current quill instance object', this.editor)
    }
  }
</script>

实际项目

效果图：

核心代码

html

      <div class="Description">
        <div class="part2" style="width: 100%;">
          <div class="Text">异常描述</div>
          <quill-editor
            ref="myTextEditor"
            v-model="descriptionPic"
            :options="editorOption"
            style="height:70%;margin-top: 5px;"
            @change="onEditorChange($event)"
          ></quill-editor>
        </div>
      </div>

JavaScript

// 富文本编辑器内容改变
    onEditorChange({ html }) {
      console.log(html);
      this.descriptionPic = html;
    },

给此处的html放一张截图：

可以看到，文字会被保存为p标签，图片会以base64上传

前端显示获得的html

v-html

很简单，v-html可以完美的解决这一问题
模版：

<div class="ql-snow">
                <div class="ql-editor" v-html="上文的html传在这里"></div>
              </div>

上实例代码

<div class="part3 Content">
            <div class="Text">保养内容</div>
            <div
              class="Info contentInfo"
              v-for="(item, index) in content"
              :key="index"
            >
              <div style="font-size:18px;font-weight:bold;">
                <span style="font-size:15px;font-weight:bolder;color:#409eff;"
                  >|</span
                >
                {{ item.contentinfotitle }}
              </div>
              <div class="ql-snow">
                <div class="ql-editor" v-html="item.contentinfotext"></div>
              </div>
            </div>
          </div>

这里的item.contentinfotext就是上面的html
效果图：