如何根据TinyMCE 5中的光标位置在CodeMirror中设置光标位置?

问题描述 投票:0回答:1

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

我想到的解决方案是,在TinyMCE中的光标位置获取标签名称,然后启动CodeMirror,在CodeMirror中找到包含该标签的行,最后将光标定位到那条线。但是我不太了解如何实现这一点。我应该编辑codemirror/plugin.js还是其他破坏性较小的方法?

欢迎提出任何想法!谢谢!

javascript tinymce codemirror
1个回答
0
投票
首先,我的问题中描述的功能已在CodeMirror中实现。它由CodeMirror选项saveCursorPosition控制。如果将其设置为true,则CodeMirror将光标定位到html代码中的位置,该位置对应于TinyMCE编辑器中光标的位置,反之亦然。

但是最有趣的是,以上所有方法均无效:)为了保存光标位置,tinymce-codemirror插件将不可见的span添加到了TinyMCE内容的html代码中( <span style="display: none;" class="CmCaReT">&#x0;</span>)。在激活CodeMirror实例之前,插件会用不可见的字符(UTF代码= 0)替换该范围,否则span标记将在CodeMirror中可见。

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

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

因此,现在在TinyMCE和CodeMirror中的相应位置之间跳转可以正常工作!

© www.soinside.com 2019 - 2024. All rights reserved.