vue+elementui富文本编辑配置使用

1. 命令行安装富文本编辑器插件。

npm install vue-quill-editor –D

2. src/main.js文件配置全局的vue-quill-editor。

 

import QuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.bubble.css'
import 'quill/dist/quill.snow.css'

 

3. 使用富文本编辑，下面代码只能参考，应为上传服务器地址是后端提供，而上传的参数是后端需要。

<template>
  <div class="Issuedby">
    <el-card class="el-card-box">
      <!-- 通过el-upload的uploadSuccess函数获取上传图片的地址替换富文本框bs64码图片 -->
      <!-- :data的作用是可以向后端传对象数据 -->
      <el-upload
        class="avatar-uploader"
        :action="URL+'/api/post/file'"
        :data="date"
        :show-file-list="false"
        :on-success="uploadSuccess">
      </el-upload>
      <!-- class="quill-editor"富文本宽度样式， ql-editor显示内容的空格换行。 -->
      <!-- :options="editorOption"自定义配置富文本需要的功能 -->
      <!-- @blur 失去焦点触发事件 -->
      <!-- @focus 获得焦点触发事件 -->
      <!-- @change 内容改变触发事件 -->
      <quill-editor
        class="quill-editor ql-editor"
        v-model="content"
        ref="myQuillEditor"
        :options="editorOption"
        @blur="onEditorBlur($event)"
        @focus="onEditorFocus($event)"
        @change="onEditorChange($event)"
      >
      </quill-editor>
    </el-card>
  </div>
</template>
<script>
import { addQuillTitle } from '@/assets/quill-title.js'
import loot from '@/assets/loot.js'

export default {
  components:{
  },
  data() {
    return {
      URL:loot.SERVE.userResource, //后端给的上传服务器地址
      date:{ //传给后端的对象
        token:'', //后端需要上传图片时绑定的token。
        videoCode:null
      },
      content: ``, //保存富文本框的内容和图片
      editorOption: { //配置富文本需要的功能
        // theme: "snow",//默认是这个，这个代码不注释会显示富文本所有的功能
        placeholder: '最多输入10000字。',
        modules: {
          toolbar: {
            container: [
              ['italic','bold','underline'], 
              [{ 'align': [] }], 
              ['image'] 
            ],  // 工具栏
            handlers: { //这里把点击upload的焦点绑定到富文本框图片上
                'image': function (value) {
                if (value) {
                  document.querySelector('.avatar-uploader input').click() 
                } else {
                  this.quill.format('image', false);
                }
              }
            }
          }
        }
      },
    };
  },
  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill;
    }
  },
  created () {
    // 获取后端需要的token, 上传图片的时候用。
    this.getToken(); 
  },
  methods: {
    // 上传图片
    uploadSuccess(res, file){
      // 首先获取富文本编辑器的实例
      let quill = this.$refs.myQuillEditor.quill
      if (res.errorCode == 200) {
          // 获取光标所在位置
          let length = quill.getSelection().index;
          // 插入图片res为服务器返回的数据
          quill.insertEmbed(length, 'image', loot.SERVE.file + res.result)
          // 光标移动至文本末端
          quill.setSelection(length + 1)
      } else {
        loot.Messages(this,'error','图片插入失败!')
      }
    },
    // 准备编辑器
    onEditorReady(editor) {
    },
    onEditorBlur() {}, // 失去焦点事件
    onEditorFocus() {}, // 获得焦点事件
    onEditorChange(event) {
      event.quill.deleteText(100, 4) //限制输入字数，行数。
    }, // 内容改变事件

    // 获取上传图片需要的token。
    getToken () {
      this.$axios.post('/api/post/file/token',{
          userId:Number(localStorage.getItem('userId')),
          sessionId:localStorage.getItem('sessionId'),
          isMobileTerminal:0
      }).then(res => {
          if(res.errorCode == 200){
              console.log(res.result, 'token')
              this.date.token = res.result
          }
      })
    }
  }
};
</script>

<style lang='less'>
  .Issuedby {
    //卡片样式
    .el-card-box {
      width: 1300px;
      height: 600px;
      margin: 20px auto;
      //富文本样式
      .quill-editor {
        height: 400px;
        //内容框高度
        .ql-container.ql-snow {
          height: 300px;
        }
      }
    }
  }
</style>