javascript - 如何根据TinyMCE 5中的光标位置在CodeMirror中设置光标位置？(How to set cursor position in CodeMirror in accordance to cursor position in TinyMCE 5?)

Question

I have a form on the webpage, which uses TinyMCE 5 to edit one of the fields.

(我在网页上有一个表单，该表单使用TinyMCE 5编辑其中一个字段。)

In my configuration, the TinyMCE uses CodeMirror in order to inspect/edit the html-code of the field's content.

(在我的配置中， TinyMCE使用CodeMirror来检查/编辑字段内容的html代码。)

When the CodeMirror starts, it positions the cursor at the beginning of the code, but I would like to find a way how to set initial cursor position in CodeMirror to the place in html-code, which corresponds to the position of cursor in TinyMCE .

(当CodeMirror启动时，它将光标定位在代码的开头，但是我想找到一种方法来将CodeMirror中的初始光标位置设置为html代码中的位置，该位置与TinyMCE的光标位置相对应。)

In other words, if the cursor is located eg inside a table in TinyMCE when I call the CodeMirror (by pressing "code" button on menu panel), I would like the CodeMirror to set its cursor close to or inside the <table> tag in the html-code.

(换句话说，如果当我调用CodeMirror （例如，通过按菜单面板上的“代码”按钮），光标位于TinyMCE的表内部，则希望CodeMirror将其光标设置为靠近<table>标记或在其中在html代码中。)

The solution, which comes to my mind, is to get the tag name at the cursor position in TinyMCE , then start CodeMirror , find the line in CodeMirror , which contains that tag, and finally position the cursor to that line.

(我想到的解决方案是，在TinyMCE中的光标位置获取标签名称，然后启动CodeMirror ，在CodeMirror找到包含该标签的行，最后将光标定位到该行。)

But I don't really understand how to implement this.

(但是我不太了解如何实现这一点。)

Should I edit the codemirror/plugin.js or there is another less destructive way?

(我应该编辑codemirror/plugin.js还是有另一种破坏性较小的方法？)

Any ideas are welcome!

(任何想法都欢迎！)

Thanks!

(谢谢！)

  ask by Vlad V. translate from so

Answer 1

After some research I've found the answer to my question.

(经过研究，我找到了我问题的答案。)

I hope it will be helpful for someone else.

(希望对其他人有帮助。)

First of all, the functionality described in my question has already been implemented in the CodeMirror .

(首先，我的问题中描述的功能已在CodeMirror实现。)

It's controlled by the CodeMirror option saveCursorPosition .

(它由CodeMirror选项saveCursorPosition 。)

If it's set to true , CodeMirror positions cursor to the place in the html-code, which corresponds to the position of the cursor in the TinyMCE editor and vice versa.

(如果将其设置为true ，则CodeMirror光标定位到html代码中的位置，该位置与TinyMCE编辑器中光标的位置相对应，反之亦然。)

But the most funny thing is that all of the above doesn't work :) In order to save the cursor position, the tinymce-codemirror plugin adds the invisible span to the html-code of the TinyMCE content ( <span style="display: none;" class="CmCaReT">&#x0;</span> ).

(但是最有趣的是，以上所有方法均无效：)为了保存光标位置， tinymce-codemirror插件将不可见的span添加到TinyMCE内容的html代码中（ <span style="display: none;" class="CmCaReT">&#x0;</span> ）。)

Just before the CodeMirror instance is activated, the plugin replaces that span with invisible character (UTF code = 0), otherwise the span tag would be visible in the CodeMirror .

(在激活CodeMirror实例之前，插件将用不可见的字符（UTF代码= 0）替换该范围，否则该span标签将在CodeMirror可见。)

This replacement is performed by the following code (in the source.html file located at the same folder as plugin.js and plugin.min.js ): html.replace(/<span\s+style="display: none;"\s+class="CmCaReT"([^>]*)>([^<]*)<\/span>/gm, String.fromCharCode(chr)) .

(此替换由以下代码（位于与plugin.js和plugin.min.js相同的文件夹中的source.html文件中）执行： html.replace(/<span\s+style="display: none;"\s+class="CmCaReT"([^>]*)>([^<]*)<\/span>/gm, String.fromCharCode(chr)) 。)

The regular expression should find all those span -s, but it doesn't!

(正则表达式应该找到所有这些span -s，但是没有找到！)

The reason is that style and class attributes appear to be in opposite order: the class is the first, then follows the style .

(原因是style和class属性的显示顺序相反： class是第一个，然后是style 。)

(I think this is the surprise made by the browser - I use Firefox.)

(（我认为这是浏览器带来的惊喜-我使用Firefox。）)

Now, we have to change the regular expression to /<span\s+(style="display: none;")*\s*(class="CmCaReT")\s+(style="display: none;")*([^>]*)>([^<]*)<\/span>/gm , which catches the span tag regardless of the order of its attributes.

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

So, now jumping between corresponding positions in TinyMCE and CodeMirror works fine!

(因此，现在在TinyMCE和CodeMirror中的相应位置之间跳转可以正常工作！)