a

src/components/tools/wangEditor.vue

@@ -0,0 +1,179 @@
+<!--
+* @FileDescription: 富文本框
+* @Author: ztc
+* @Date: 2023年03月22日
+* @Params(调用时  v-model 绑定 父组件值)
+* @Params(needImage) 是否需要 上传图片  默认关闭
+* @Params(imageUrl) 图片上传地址
+* @Params(data   key-val   键值对) 图片上传附加参数
+-->
+
+<template>
+    <div class="w_editor">
+        <!-- 富文本编辑器 -->
+        <div ref="w_view"></div>
+    </div>
+</template>
+
+<script>
+    //自定义字体类型
+    /*富文本编辑图片上传配置*/
+    const uploadConfig = {
+        action: ''  // 必填参数 图片上传地址
+    };
+    // 引入富文本
+    import WE from "wangeditor";
+    // 引入elementUI Message模块（用于提示信息）
+    import { Message } from "element-ui";
+
+    export default {
+        name: "wangEditor",
+        model: {
+          prop: 'desc',
+          event:'change'
+        },
+        props:{
+          desc:{
+            type:String,
+            default:""
+          },
+          //业务中我们经常会有添加操作和编辑操作，添加操作时，我们需清除上一操作留下的缓存
+          isClear:{
+            type:Boolean,
+            default:false
+          },
+          needImage:'',
+          imageUrl:'',
+          data:{},
+          showFullScreen: {
+            type:Boolean,
+            default:true
+          }
+        },
+        data() {
+            return {
+                info_:null,
+                isChange:false,
+                // 编辑器实例
+                editor: null,
+                // 富文本菜单选项配置
+                menuItem: [
+                    "head",
+                    "bold",
+                    "fontSize",
+                    "fontName",
+                    "italic",
+                    "underline",
+                    "indent",
+                    "lineHeight",
+                    "foreColor",
+                    "backColor",
+                    "link",
+                    "list",
+                    "justify"
+                ]
+            };
+        },
+        watch: {
+            // 监听默认值
+          isClear(val){
+              // console.log(val)
+            if (val){
+              this.editor.txt.clear()
+            }
+          },
+          //接收父组件传递过来的值
+          desc(value){
+            //判断父组件传递过来的值跟当前编辑器内容是否一样
+            if (value != this.editor.txt.html()) {
+              this.editor.txt.html(this.desc)
+            }
+          }
+        },
+        mounted() {
+            this.initEditor();
+            if(this.editor){
+              this.editor.txt.html(this.desc)
+            }
+        },
+        methods: {
+            clearText(){
+              if (this.editor) {
+                this.editor.txt.clear()
+              }
+            },
+            // 初始化编辑器
+            initEditor() {
+              if(this.needImage){
+                this.menuItem.push("image")
+              }
+                // 获取编辑器dom节点
+                const editor = new WE(this.$refs.w_view);
+                // 配置编辑器
+                editor.config.showLinkImg = false; /* 隐藏插入网络图片的功能 */
+                editor.config.onchangeTimeout = 5000; /* 配置触发 onchange 的时间频率，默认为 200ms */
+                editor.config.uploadImgMaxLength = 1; /* 限制一次最多能传几张图片 */
+                editor.config.showFullScreen = this.showFullScreen; /* 配置全屏功能按钮是否展示 */
+                editor.config.menus = [...this.menuItem]; /* 自定义系统菜单 */
+                // editor.config.uploadImgMaxSize = 5 * 1024 * 1024 /* 限制图片大小 */;
+                editor.config.customAlert = err => {
+                    Message.error(err);
+                };
+                // 监控变化，同步更新数据
+                editor.config.onchange = newHtml => {
+                    // this.isChange = true;
+                    // // 异步更新组件富文本值的变化
+                    // // this.defaultText=newHtml
+                    // this.$emit("update:rich-text", newHtml);
+                  this.info_ = newHtml // 绑定当前逐渐地值
+                  this.$emit('change', this.info_) // 将内容同步到父组件中
+                };
+
+                // 自定义上传图片
+                editor.config.customUploadImg = (resultFiles, insertImgFn) => {
+                    let param = new FormData(); // 创建form对象
+                    param.append("filename", "test");
+                    param.append("file", resultFiles[0]);
+                    for(let i in this.data){
+                      param.append(this.data[i].key,this.data[i].val)
+                    }
+                    // 一般项目中都会封装好发送请求得方法,我这为了通用直接用axios
+                    axios.post(this.imageUrl, param).then(res => {
+                        // res是上传成功后返回的数据,返回的数据中需要有上传图片的路径,
+                        // 通过insert方法将路径传入,即可将图片在富文本中插入
+                        if (res.status === 200) {
+                            // 我这返回的是JSON数据,需要解析
+                            let path = res.data.data.fileUrl
+
+                            // 上传代码返回结果之后，将图片插入到编辑器中
+                            insertImgFn(path);
+                        }
+                    });
+
+                };
+
+                // 创建编辑器
+                editor.create();
+                this.editor = editor;
+            }
+        },
+        beforeUnmount() {
+            // 销毁编辑器
+            this.editor.destroy();
+            this.editor = null;
+        },
+    };
+</script>
+
+<style>
+.w-e-toolbar{
+  z-index: 1 !important;
+}
+.w-e-menu {
+  z-index: 2 !important;
+}
+.w-e-text-container {
+  z-index: 1 !important;
+  height: auto;
+}
+</style>