使用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
相关产品推荐
相关产品推荐

