vue Element 副文本编辑使用

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

npm install vue-quill-editor

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>
    <el-card style="height: 610px;">
      <quill-editor v-model="content" ref="myQuillEditor" style="height: 500px;" :options="editorOption" 
		            @blur="onEditorBlur($event)"
		            @change="onEditorChange($event)">
        <!-- 自定义toolar -->
        <div id="toolbar" slot="toolbar">
          <!-- Add a bold button -->
          
          <el-upload
          v-show="false"
          id="quill-upload"
          :action="serverUrl"
          multiple
          list-type="picture"
          :show-file-list="false"
          :before-upload="beforeUpload"
          :on-error="uploadError"
          :on-success="handleExceed"
          :on-preview="handlePictureCardPreview">
          <el-button size="small" type="primary"></el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
          <!-- You can also add your own -->
        </div>
      </quill-editor>
      
    </el-card>
    <el-button type="primary" @click="open">提交信息</el-button>
  </div>
</template>

<script>
  import {
    Quill,
    quillEditor
  } from 'vue-quill-editor'
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'
  
  //引入font.css 
  import '@/css/font.css'

  export default {
    name: 'FuncFormsEdit',
    components: {
      quillEditor
    },
    data() {
      return {
        content: '',
        uillUpdateImg: false, //根据图片上传状态来确定是否显示loading动画
        imgUrl: "https://jsonplaceholder.typicode.com/posts/",  //  上传图片后路径的前缀
        serverUrl: "https://jsonplaceholder.typicode.com/posts/", //上传的图片服务器地址
        remark: "", //富文本内容
        editorOption: {
            //符文本编辑器的配置
            placeholder: "请输入内容",
            theme: "snow",
            modules: {
            toolbar: {
                container: [
                // 工具栏配置, 默认是全部
                ["bold"],
                ["italic"],
                ["underline"],
                ["strike"],
                [{ list: "ordered" }, { list: "bullet" }],
                ["blockquote"],
                ["code-block"],
                ["link"],
                ["image"],
                [{ list: "ordered" }, { list: "bullet" }]
                ],
                handlers: {
                    // image: function(value) {
                    //     console.log(value)
                    //     if (value) {
                    //     // 给个点击触发Element-ui，input框选择图片文件
                    //         document.querySelector("#quill-upload input").click();
                    //     } else {
                    //         this.quill.format("image", false);
                    //     }
                    // }
                }
            }
            }
        },
        dialogImageUrl: '',
        dialogVisible: false
      }
    },
    methods: {
        // 提交富文本内容
        open() {
            // this.$message('这是一条消息提示');
            // console.log(11)
            // for (var i = 0,answer = this.content; i < answer.length; i++) {
            //     console.log(answer[i])
            //     // answer[i] = answer[i].replace("
", "");
            //     // answer[i] = answer[i].replace("
", "");
            // }

            console.log(this.$refs.myQuillEditor.quill.editor.delta.ops[0].insert)
        },
        onEditorBlur(){}, // 失去焦点事件
        // onEditorFocus(){}, // 获得焦点事件
        onEditorChange({ quill, html, text }) {
            this.content = html
        },
        beforeUpload() {
            //上传图片之前开启loading
            this.uillUpdateImg = true;
            this.dialogVisible = true
        },
        uploadError() {
            //图片上传失败,关闭loading
            console.log(this.uillUpdateImg)
            this.uillUpdateImg = false;
            this.$message.error("图片插入失败");
        },
        handleExceed(response, file, fileList) {
            //图片添加成功
            let quill = this.$refs.myQuillEditor.quill;
            console.log(quill)
            // if (response.result == "success") {
            //     let length = quill.getSelection().index;
            //     // 插入图片 response.data.url为服务器返回的图片地址
            //     quill.insertEmbed(length, "image", this.imgUrl + response.msg);
            //     // 调整光标到最后
            //     quill.setSelection(length + 1);
            // } else {
            //     this.$message.error("图片插入失败");
            // }
            // this.uillUpdateImg = false;
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        }
    }
  }
</script>

<style>
.el-card__body {
    padding: 20px !important;  
}
.ql-snow .ql-editor img {
    max-width: 12.5rem !important;
    max-height: 12.5rem;
}
</style>