vue中使用wangEditor出现光标乱跳的问题【前端】

sinnoo

发布于 2022-01-04 16:23:15

2.5K0

发布于 2022-01-04 16:23:15

文章被收录于专栏：技术人生

一、发生的原因和处理方式解析

1.是因为封装了组件后，使用父级传入的内容，每次输入都会触发wangEditor的onchange事件，而在onchange事件中又使用了子传父的方式将修改后的值赋给父组件，父组件的值改变后导致子组件wangEditor的值也被修改，所以出现光标总是跳转到最后。此时，并发的还有另外一个问题就是，撤销和恢复点击后无效，另外一些样式编辑按钮选中后，鼠标也会自动跳转。

2.在修改时，不让父组件的值改变，即在子传父后，父级接收赋值给另外一个变量，在提交时在赋值给原始值

3.在编辑时，保证初始值传入wangEditor子组件后，子组件的值不被外界修改，直至修改完成。

二、问题处理后的父组件

1.我这边模板中，htmlData用的form.content，也就是业务数据提交的字段

2.我这边catchData函数中，用htmlData变量来接收编辑框的值

3.最后在提交编辑doEdit()的时候，进行一次赋值即刻 this.form.content = this.htmlData

catchData(content) { this.htmlData = content; },

三，子组件的配置（不需要变动）

<template>
    <div id="wangeditor">                                                                                                                                                                                 
        <div ref="editorElem" style="text-align:left;"></div>
    </div>
</template>

<script>
import E from "wangeditor";
export default {
    name: "Editor",
    data() {
        return {
            editor: null,
            editorContent: ''
        }
    },
    // catchData是一个类似回调函数，来自父组件，当然也可以自己写一个函数，主要是用来获取富文本编辑器中的html内容用来传递给服务端
    props: ['catchData','htmlData'], // 接收父组件的方法
    mounted() {
        var that = this;
        this.editor = new E(this.$refs.editorElem);
        // 编辑器的事件，每次改变会获取其html内容
        this.editor.customConfig.onchange = html => {
            this.editorContent = html;
            this.catchData(this.editorContent); // 把这个html通过catchData的方法传入父组件
        };
        this.editor.customConfig.menus = [
            // 菜单配置
            'head', // 标题
            'bold', // 粗体
            'fontSize', // 字号
            'fontName', // 字体
            'italic', // 斜体
            'underline', // 下划线
            'strikeThrough', // 删除线
            'foreColor', // 文字颜色
            'backColor', // 背景颜色
            'link', // 插入链接
            'list', // 列表
            'justify', // 对齐方式
            'quote', // 引用
            'emoticon', // 表情
            'image', // 插入图片
            'table', // 表格
            'code', // 插入代码
            'undo', // 撤销
            'redo' // 重复
        ];
        //开启外部图片引入
        this.editor.customConfig.showLinkImg = true;
        //本地图片上传
        this.editor.customConfig.uploadImgServer = '/applet/console/common/image/addwangeditor';
        this.editor.customConfig.uploadFileName = 'file';
        this.editor.customConfig.uploadImgMaxLength = 1;
        this.editor.customConfig.uploadImgTimeout = 5000;
        this.editor.customConfig.uploadImgHooks = {
            success: function (xhr, editor, result) {
            },
            fail: function (xhr, editor, result) {
                that.$message.error('插入图片失败！')
            },
            error: function (xhr, editor) {
                that.$message.error('插入图片错误！')
            },
            timeout: function (xhr, editor) {
                that.$message.error('插入图片超时！')
            },
        };
        this.editor.create(); // 创建富文本实例
        this.editor.txt.html(this.htmlData);
    },
    methods:{
    },
     watch:{
        htmlData:{
            handler:function(newVal, oldVal) {
                if (this.editor) {
                    this.editor.txt.html(newVal);
                }
            },
            immediate: true,
        }
    },
}
</script>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020/11/16 ，如有侵权请联系 cloudcommunity@tencent.com 删除

html