时间戳

首页 > 解决方案 > 如何根据 TinyMCE 5 中的光标位置设置 CodeMirror 中的光标位置？

javascript - 如何根据 TinyMCE 5 中的光标位置设置 CodeMirror 中的光标位置？

问题描述

我在网页上有一个表单，用于TinyMCE 5编辑其中一个字段。在我的配置中，TinyMCE用于CodeMirror检查/编辑字段内容的 html 代码。开始时CodeMirror，它将光标定位在代码的开头，但我想找到一种方法如何将初始光标位置设置CodeMirror为 html-code 中的位置，该位置对应于光标在TinyMCE. 换句话说，如果光标位于例如在TinyMCE我调用时CodeMirror（通过按菜单面板上的“代码”按钮）的表格内，我希望将CodeMirror其光标设置为接近或位于<table>html 代码中的标记内。

我想到的解决方案是在光标位置获取标签名称TinyMCE，然后开始CodeMirror，找到CodeMirror包含该标签的行，最后将光标定位到该行。但我真的不明白如何实现这一点。我应该编辑codemirror/plugin.js还是有另一种破坏性较小的方式？

欢迎任何想法！谢谢！

标签： javascripttinymcecodemirror

解决方案

经过一番研究，我找到了我的问题的答案。我希望它对其他人有帮助。

首先，我的问题中描述的功能已经在CodeMirror. 它由CodeMirror选项控制saveCursorPosition。如果设置为true，则将CodeMirror光标定位到 html 代码中的位置，该位置对应于光标在TinyMCE编辑器中的位置，反之亦然。

但最有趣的是，以上所有方法都不起作用：）tinymce-codemirror插件为了保存光标位置，span在内容的 html-code 中添加了不可见TinyMCE（<span style="display: none;" class="CmCaReT">&#x0;</span>）。就在CodeMirror实例被激活之前，插件用不可见字符（UTF 代码 = 0）替换该跨度，否则span标签将在CodeMirror.

此替换由以下代码执行（在与和source.html位于同一文件夹的文件中plugin.js）plugin.min.js：html.replace(/<span\s+style="display: none;"\s+class="CmCaReT"([^>]*)>([^<]*)<\/span>/gm, String.fromCharCode(chr)). 正则表达式应该找到所有这些span-s，但它没有！原因是style和class属性的顺序似乎相反：class是第一个，然后是style。（我认为这是浏览器带来的惊喜——我用的是火狐。）

现在，我们必须将正则表达式更改为/<span\s+(style="display: none;")*\s*(class="CmCaReT")\s+(style="display: none;")*([^>]*)>([^<]*)<\/span>/gm，它会捕获span标记，而不管其属性的顺序如何。

所以，现在在 TinyMCE 和 CodeMirror 的相应位置之间跳转可以正常工作了！

推荐阅读