vue-quill-editor富文本编辑器

使用方法一

一、安装

npm install vue-quill-editor --save

npm install quill --save     //Vue-Quill-Editor需要依赖

二、在需要使用富文本编辑器的.vue文件中导入并使用

<template>
    <div class="edit_container">
        <quill-editor 
           v-model="form.describe" 
           ref="myQuillEditor" 
           :options="editorOption" 
            @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
            @change="onEditorChange($event)">
        </quill-editor>
        <div v-html="str" class="ql-editor">{{str}}</div> 
    </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 {
            str: '',
            content:null,
            editorOption: {       //  富文本编辑器配置
                placeholder: '请输入正文'
            },
        }
    },
    methods: {
        onEditorReady(editor) { // 准备编辑器
 
        },
        onEditorBlur(){}, // 失去焦点事件
        onEditorFocus(){}, // 获得焦点事件
        onEditorChange(){}, // 内容改变事件
        //把实体格式字符串转义成HTML格式的字符串
        escapeStringHTML(str) {
            str = str.replace(/&lt;/g,'<');
            str = str.replace(/&gt;/g,'>');
            return str;
        },
    },
    computed: {
        editor() {
            return this.$refs.myQuillEditor.quill;
        },
    },
    mounted(){
        let content = '';  // 请求后台返回的内容字符串
        this.str = this.escapeStringHTML(content);
    }
}
</script>

获取时如果只需要值不需要样式等时按如下操作可过滤HTML标签(单个对象)

filterHTMLTag (msg) {
   var msg = msg.replace(/<\/?[^>]*>/g, ''); //去除HTML Tag
   msg = msg.replace(/[|]*\n/, '') //去除行尾空格
   msg = msg.replace(/&npsp;/ig, ''); //去掉npsp
},

获取时如果只需要值不需要样式等时按如下操作可过滤HTML标签(数组对象)

getapp(){
    for(var i=0;i<res.data.length;i++){
       for(var j=0;j<res.data[i].orderItemList.length;j++){
          this.msglist.push(res.data[i].orderItemList[j].describe)
       }
    }
    this.filterHTMLTag()
    res.data.forEach(item=>{
        item.orderItemList.map((items,index)=>{
             items.spinfo=this.msglists[index]
        })
    })
}
filterHTMLTag () {
     this.msglist.forEach(item=>{
     var msg = item.replace(/<\/?[^>]*>/g, ''); //去除HTML Tag
     msg = msg.replace(/[|]*\n/, '') //去除行尾空格
     msg = msg.replace(/&npsp;/ig, ''); //去掉npsp
     this.msglists.push(msg)
     })
},

style

.edit_container .ql-toolbar>.ql-formats:nth-child(3){
    display: none;
}
.edit_container .ql-toolbar>.ql-formats:nth-child(4){
    display: none;
}
.edit_container .ql-toolbar>.ql-formats:nth-child(5){
    display: none;
}
.edit_container .ql-toolbar>.ql-formats:nth-child(6){
    display: none;
}
.edit_container .ql-toolbar>.ql-formats:nth-child(7){
    display: none;
}
.edit_container .ql-toolbar>.ql-formats:nth-child(8){
    display: none;
}
.edit_container .ql-toolbar>.ql-formats:nth-child(9){
    display: none;
}
.edit_container .ql-toolbar>.ql-formats:nth-child(11){
    display: none;
}
.edit_container .ql-container{
    height: 130px;
}

使用方法二(包含图片上传等问题)

<template>
    <div class="edit_container">
    //图片上传的控件
        <el-upload
                action=""
                list-type="picture-card"
                :auto-upload="true"
                :on-success="handleAvatarSuccess"
              >
         </el-upload>
         <quill-editor 
                  v-model="ruleForm.content" 
                  ref="myQuillEditor" 
                  :options="editorOption" 
                  @blur="onEditorBlur($event)" 
                  @focus="onEditorFocus($event)"
                  @change="onEditorChange($event)">
         </quill-editor>
         <div v-html="str" class="ql-editor">{{str}}</div> 
    </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';
//自定义工具栏
const toolbarOptions = [
      ['bold', 'italic', 'underline', 'strike'],    // 加粗 斜体 下划线 删除线
      ['blockquote', 'code-block'], // 引用  代码块
      [{'header': 1}, {'header': 2}], // 1、2 级标题
      [{'list': 'ordered'}, {'list': 'bullet'}], // 有序、无序列表
      [{'script': 'sub'}, {'script': 'super'}], // 上标/下标
      [{'indent': '-1'}, {'indent': '+1'}], // 缩进
      [{'color': []}, {'background': []}], // 字体颜色、字体背景颜色
      [{'align': []}],   // 对齐方式
      ['image'],  // 链接、图片、视频
      ['clean']   // 清除文本格式
    ]
export default {
    components: {
        quillEditor
    },
    data() {
        return {
            str: '',
            content:null,
            editorOption: {       //  富文本编辑器配置
                placeholder: '请输入正文'
                modules: {
                    toolbar: {
                         container: toolbarOptions,  // 工具栏
                         //图片上传
                         handlers: {
                             'image': function (value) {
                                  if (value) {
                                       document.querySelector(".el-upload__input").click();
                                  } else {
                                       this.quill.format('image', false);  //禁用富文本编辑器中默认的图片上传
                                  }
                              }
                         }
                    }
                }
            },
        }
    },
    methods: {
        onEditorReady(editor) { // 准备编辑器
 
        },
        onEditorBlur(){}, // 失去焦点事件
        onEditorFocus(){}, // 获得焦点事件
        onEditorChange(){}, // 内容改变事件
        //把实体格式字符串转义成HTML格式的字符串
        escapeStringHTML(str) {
            str = str.replace(/&lt;/g,'<');
            str = str.replace(/&gt;/g,'>');
            return str;
        },
    },
    computed: {
        editor() {
            return this.$refs.myQuillEditor.quill;
        },
    },
    mounted(){
        let content = '';  // 请求后台返回的内容字符串
        this.str = this.escapeStringHTML(content);
    }
}
</script>

小程序使用

   <rich-text class="ql-editor" nodes="{{listInfo.content}}"></rich-text>

问题1

图片的显示，需要写样式

res.data[0].content=res.data[0].content.replace(/<img/, '<img style="width:95%;"')

问题2

不居中

加class="ql-editor"

也可以参考这个文章,直接封装好的,可以直接用https://blog.csdn.net/weixin_42524279/article/details/92838296