You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

使用mceInsertContent插入带<br>标签内容后光标未换行的TinyMCE问题

TinyMCE粘贴含换行文本后光标未跳转至新行的问题
  • 通过剪贴板操作拦截粘贴事件,调用mceInsertContent命令插入转换后的内容:将剪贴板中的带换行文本(如text\r\n)替换为text<br/>后插入编辑器。
  • 问题表现:内容可正常插入,但光标未按预期移至下一行;在TinyMCE默认JS fiddle示例中可复现该问题,还会导致生成多个<br>标签。
  • 预期行为:插入文本行后,光标在新行闪烁,输入新内容时从该新行开始。

简化代码示例

tinymce.init({
    selector: 'textarea#editor',
    setup: function (editor) {
        editor.on('paste', function (e) {
            e.preventDefault();
            const clipboardData = e.clipboardData || window.clipboardData;
            let textContent = clipboardData.getData('Text'); // 获取的数据为"text\r\n"

            // 将换行符替换为<br/>
            textContent = textContent.replace(/\r?\n/g, "<br/>"); // 转换后为"text<br/>"

            // 将修改后的内容插入编辑器
            editor.execCommand('mceInsertContent', false, textContent);
        });
    }
});

内容的提问来源于stack exchange,提问作者Vasanth Nag K V

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.21 04:12:33