道招

wangEditor输入中文后直接粘贴bug来了解compositionstart

如果您发现本文排版有问题,可以先点击下面的链接切换至老版进行查看!!!

wangEditor输入中文后直接粘贴bug来了解compositionstart

昨天有人反馈邮件编辑过程中的一个报障,具体内容就是在编辑器中输入中文然后直接粘贴先前复制好的信息,然后出现了bug,比如之前复制了订单号“1234”,再输入“您的订单号”后直接粘贴,编辑器内显示的结果是“1234您的订单号”,这是不符合预期的,报障了给录屏信息,看的出其实是输入光标问题导致,点击编辑器内区域开始编辑时光标是落在最前方,也就是“您”字的前面,粘贴后实际上页面显示的光标是落在“号”字后面的,但是粘贴时确还是认为光标在“您”字前方,所以“1234”就落在了“您”的前面了,而不是大家预期的“号”后面。英文输入无此问题。 鉴于编辑器用的是wangEditor,我很自然的想到如果这个bug真的存在的,wangEditor多半也是有的,跑到官网看了下,并没有。邮件项目的web版也没有此bug,但是邮件项目其实是在壳里面的,公司老版的壳是QT,新版的是Electron版,目前新版还在灰度中,只有少部分人在使用,实测该问题在QT上存在,Electron版上没有。 中文输入法的问题很容易想到是不是要用compositionstartcompositionendcompositionupdate了,在此之前我们可以先看看wangEditor是记录当前光标的位置的。

javascript
// 绑定事件
_bindEvent: function _bindEvent() {
    // 实时保存选取
    this._saveRangeRealTime();

    // 按回车建时的特殊处理
    this._enterKeyHandle();
    ....
}

// 实时保存选取
_saveRangeRealTime: function _saveRangeRealTime() {
    var editor = this.editor;
    var $textElem = editor.$textElem;

    // 保存当前的选区
    function saveRange(e) {
      // 随时保存选区
      editor.selection.saveRange();
      // 更新按钮 ative 状态
      editor.menus.changeActive();
    }
    // 按键后保存
    $textElem.on('keyup', saveRange);
    $textElem.on('mousedown', function(e) {
      // mousedown 状态下,鼠标滑动到编辑区域外面,也需要保存选区
      $textElem.on('mouseleave', saveRange);
    });
    $textElem.on('mouseup', function(e) {
      saveRange();
      // 在编辑器区域之内完成点击,取消鼠标滑动到编辑区外面的事件
      $textElem.off('mouseleave', saveRange);
    });
},

可以看到在keyup的时候就实时保存选区了,简单测试了下,在QT版壳里面使用中文编辑时,虽然编辑器内光标如预期般更新,但是未曾触发keyup事件,英文输入是不存在此问题的。

现在是该compositionstartcompositionendcompositionupdate上场了。

在输入法开始输入中文时会触发compositionstart,输入结束时会触发compositionend,我需要简单记录下即可。 更完整的方案可以参考element-ui的input,里面还针对韩语进行了兼容。

handleCompositionStart() {
        this.isComposing = true;
},
handleCompositionUpdate(event) {
        const text = event.target.value;
        const lastCharacter = text[text.length - 1] || '';
        this.isComposing = !isKorean(lastCharacter);
},
handleCompositionEnd(event) {
        if (this.isComposing) {
          this.isComposing = false;
          this.handleInput(event);
        }
},

function isKorean(text) {
  const reg = /([(\uAC00-\uD7AF)|(\u3130-\u318F)])+/gi;
  return reg.test(text);
}

据此我们更新下wangEditor部分代码即可

_saveRangeRealTime: function _saveRangeRealTime() {
    var editor = this.editor;
    var $textElem = editor.$textElem;
    var isComposing = false;

    // 保存当前的选区
    function saveRange(e) {
        // 随时保存选区
        editor.selection.saveRange();
        // 更新按钮 ative 状态
        editor.menus.changeActive();
    }

    function isKorean(text) {
        const reg = /([(\uAC00-\uD7AF)|(\u3130-\u318F)])+/gi;
        return reg.test(text);
    }

    function handleCompositionStart() {
        isComposing = true;
    }

    function handleCompositionUpdate(event) {
        const text = event.target.value;
        const lastCharacter = text[text.length - 1] || '';
        isComposing = !isKorean(lastCharacter);
    }

    function handleCompositionEnd(event) {
        if (isComposing) {
            isComposing = false;
            saveRange();
        }
    }
    // 按键后保存
    $textElem.on('keyup', saveRange);
    $textElem.on('compositionstart', handleCompositionStart);
    $textElem.on('compositionupdate', handleCompositionUpdate);
    $textElem.on('compositionend', handleCompositionEnd);
    $textElem.on('mousedown', function(e) {
        // mousedown 状态下,鼠标滑动到编辑区域外面,也需要保存选区
        $textElem.on('mouseleave', saveRange);
    });
    $textElem.on('mouseup', function(e) {
        saveRange();
        // 在编辑器区域之内完成点击,取消鼠标滑动到编辑区外面的事件
        $textElem.off('mouseleave', saveRange);
    });
},
更新时间:
上一篇:php发送请求,解决curl返回空白问题下一篇:项目Vue转成React hooks可能存在的问题--急需类似setState回调

相关文章

富文本编辑器wangEditor多语言、工具栏体验改造

支持多语言 首页wangEditro本身是支持使用多语言的,通过源码可以看到里面有个 replaceLang 方法,虽然这种写法有点非主流,但是是有效的,里面部分地方在支持多语言方面有些遗漏。 阅读更多…

富文本编辑器wangEditor迁移CKEditor前后效果对比

一、背景 富文本编辑器wangEditor的工具栏如图所示 富文本编辑器CKEditor4工具栏如图所示 二、wangEditor编辑器存在问题 1. 字号和字体设置 阅读更多…

命令式组件Message、Dialog的主流写法分析

这里还是以element-ui为例,那我们就看看里面的Message。 它的dom结构什么的就写在node-modules/element-ui/packages/notification/src/ 阅读更多…

element-ui表单源码解析之el-form

表单时大家常用的,根据本站的百度统计后台显示来到道招网的程序很多都在关注 《element-ui动态表单async-validate校验 please transfer a valid prop p 阅读更多…

element-ui表单源码解析之el-input

关于表单校验el-input做的主要工作就是跟el-form-item交互,把input的相关事件发送给el-form-item,上一篇已经讲到在el-form-item的mounted的生命周期里 阅读更多…

在iframe中使用富文本编辑器wangEditor

自己做的邮件项目里面需要使用到富文本编辑器,邮件内容说白了就是HTML代码。前任使用的是wangEditor,部分定制化需求就是直接改的源码。 最近发现有的用户的邮件内容加进去的很多css信息, 阅读更多…

关注道招网公众帐号
友情链接
消息推送
道招网关注互联网,分享IT资讯,前沿科技、编程技术,是否允许文章更新后推送通知消息。
允许
不用了