vue 引入、使用富文本编辑器

• 下载Vue-Quill-Editor

npm install vue-quill-editor --save
cnpm install quill --save							//vue-quill-editor需要依赖此项，也许需下载

• 具体页面代码：

  <template>
      <div class="edit_container">
          <quill-editor 
              v-model="content" 
              ref="myQuillEditor" 
              :options="editorOption" 
              @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
              @change="onEditorChange($event)">
          </quill-editor>
      </div>
  </template>
  <script>
  import { quillEditor } from "vue-quill-editor"; //调用编辑器
  import 'quill/dist/quill.core.css';
  import 'quill/dist/quill.snow.css';
  import 'quill/dist/quill.bubble.css';
  export default {
      components: {
          quillEditor
      },
      data() {
          return {
              content: `欢迎使用`,
              editorOption: {}
          }
      },
      methods: {
          onEditorReady(editor) { // 准备编辑器
   
          },
          onEditorBlur(){}, // 失去焦点事件
          onEditorFocus(){}, // 获得焦点事件
          onEditorChange(){}, // 内容改变事件
      },
      computed: {
          editor() {
              return this.$refs.myQuillEditor.quill;
          },
      }
  }
  </script>
  
  

编辑器效果图：

富文本中的内容将以 html格式存入到 content 中，图片数据将转码为base64，同样保存在content 中。如果我们想要展示富文本编辑后的内容，直接

<div v-html='content '></div>

那么该div将显示content对应的富文本内容。