iView + vue-quill-editor 实现一个富文本编辑器（包含图片，视频上传）

1. 引入插件（注意IE10以下不支持）

npm install vue-quill-editor --save
npm install quill --save    （Vue-Quill-Editor需要依赖）

2. main.js 引入

import VueQuillEditor from "vue-quill-editor"; 
import 'quill/dist/quill.core.css'; 
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';

Vue.use(VueQuillEditor)

3.页面使用

import { quillEditor } from 'vue-quill-editor'

<div v-show="tuWen" class="tu-wen">

          <Upload

            id="iviewUp"

            :show-upload-list="false"               // 自动上传列表可见

            :on-success="handleSuccessQuill"

            :format="['jpg','jpeg','png','gif']"

            :headers= "header"                     // 设置请求头

            name="richTextAccessory"

            :max-size="2048"

            multiple

            :action="uploadRichTextImg"              // 上传接口

            style="display:none;"

            >

            <Button icon="ios-cloud-upload-outline" ></Button>

        </Upload>

         <quill-editor

            v-model="content"                  // 内容

            ref="myQuillEditor"                // 获取文本节点

            :options="editorOption"

            @blur="onEditorBlur($event)"

            @focus="onEditorFocus($event)"

            @change="onEditorChange($event)"

            >

          </quill-editor>

</div>

4，工具栏配置

// 工具栏配置

    const toolbarOptions = [

      ['bold', 'italic', 'underline'],

      [{'size': ['small', false, 'large', 'huge']}],

      [{'color': []}, {'background': []}],          // dropdown with defaults from theme

      [{'font': []}],

      [{'align': []}],

      ['image'],                                // remove formatting button

    ]

data（）{

  uploadRichTextImg： ‘’   //上传图片地址接口

  uploadList:[], //富文本编辑器的图文列表

  content: '',//富文本里的内容
editorOption: {//富文本编辑器的工具栏
  modules: {
    toolbar:{
      container: toolbarOptions,  // 工具栏
      handlers: {
        'image': function (value) {     // 对图片进行改造，默认是通过base64 ,现通过iview 去传。
          if (value) {
              document.querySelector('#iviewUp input').click()
          } else {
              this.quill.format('image', false);
          }
        }
      }
    },
  },
  imageResize: {}, //自定义拉伸
  placeholder: '请输入文章内容',
},

contentTxt: '',//富文本编辑器里的前面100个文字

}

methods：{

   onEditorChange(e){

      let _this = this;

      _this.content = e.html ;  //标签以<p></p> 形式渲染 （重点）
      _this.contentTxt = e.text.substr(0,100);

   }
}

5.  在上传成功回调中把src 的url 插入

 // 富文本编辑器的上传图片成功的操作

         handleSuccessQuill (res) {

           console.log(res)

            // 获取富文本组件实例

            let quill = this.$refs.myQuillEditor.quill

            // 如果上传成功

            if (res) {

                // 获取光标所在位置

                let length = quill.getSelection().index;

                // 插入图片，res为服务器返回的图片链接地址

                quill.insertEmbed(length, 'image', res.data.path)

                // 调整光标到最后

                quill.setSelection(length + 1)

            } else {

                // 提示信息，需引入Message

                Message.error('图片插入失败')

            }

},

iView + vue-quill-editor 实现一个富文本编辑器（包含图片，视频上传）的相关教程结束。