当插入符在文本上处于活动状态时 markjs.io 和 TinyMCE 书签出现问题

Question

好的。我正在使用 TinyMCE 和 MarkJS 来突出显示文本中的长单词。如果单词的长度超过 6 个字母，则会对其进行标记。

我在这里整理了一个演示：http://codepen.io/MarkBuskbjerg/pen/RomqKO

问题：

乍一看一切都很好。长字完美高亮

但是...

如果你把插入符号放在单词里面。按下键时突出显示消失。

示例：将插入符号放在文本的末尾，然后按箭头键在文本中移动，当插入符号位于突出显示的单词上时，突出显示消失。

我怀疑这个问题是由于 TinyMCE 在插入符号出现在单词上时触发了某种事件。

可能的解决方案 我试图查看插入符号是否以某种方式拆分了单词，从而使它看起来更短。情况似乎并非如此（请参阅第 24 行的 console.log(words)。

** 编辑 2016 年 12 月 30 日：** 当插入符号位于单词内时，似乎应该是 TinyMCE 触发了错误。也许是因为它执行了一些其他事件？

我的问题 我不知何故需要找到一种方法来在插入符号在突出显示的跨度上处于活动状态时保持单词突出显示。

非常感谢任何关于如何实现这一点的想法:)

HTML 标记是：

<div class="container">
    <div id="myTextArea" contenteditable="true">
        Lorem ipsum dolores sit amet.
    </div>
</div>

JavaScript 是这样的：

tinymce.init({
  selector: '#myTextArea',
  height: 200,
  setup: function(ed) {
    ed.on('keyup', myCustomInitInstance);
    ed.on('paste', myCustomInitInstance);
    ed.on('cut', myCustomInitInstance);
  },
  init_instance_callback: "myCustomInitInstance",
});

function myCustomInitInstance(inst) {
  var rawText = tinyMCE.get('myTextArea').getContent({
    format: 'text'
  });
  rawText = rawText.replace(/<([^>]+)>|[\.\+\?,\(\)"'\-\!\;\:]/ig, "");

  var words = rawText.split(" ");

  var matchWarning = [];
  var longWord = 6;
  var wordCounter;
  var output;
  for (var i = 0, len = words.length; i < len; i++) {
    if (words[i].length > longWord) {
      matchWarning.push(words[i]);
    }
  }

  var editor = tinyMCE.activeEditor;
   // Store the selection
  var bookmark = editor.selection.getBookmark();
  console.log(bookmark);
   // Remove previous marks and add new ones
   var $ctx = $(editor.getBody());
   $ctx.unmark({
     done: function() {
      $ctx.mark(matchWarning, {
        acrossElements: true,
        //debug: true,
        separateWordSearch: false
      });
    }
  });
  console.log(bookmark);
  // Restore the selection
  editor.selection.moveToBookmark(bookmark);

}

Answer 1

您的问题是您正在收听 keyup 事件，如果您使用箭头键导航，该事件也会被触发。并且在此事件侦听器的回调函数中，您使用 .unmark() 删除了突出显示的术语，这就是突出显示消失的原因。

要解决这个问题，您需要忽略来自方向键的事件。我已经为你做了这件事。此外，我重构了您的示例以简化情况，删除了不必要的变量并使用了 TinyMCE v4 方法（您正在使用）。

Example

tinymce.init({
  selector: "#myTextArea",
  height: 200,
  setup: function(editor) {
    editor.on("init keyup", function(e) {
      var code = (e.keyCode || e.which || 0);
      // do nothing if it's an arrow key
      if (code == 37 || code == 38 || code == 39 || code == 40) {
        return;
      }
      myCustomInitInstance();
    });
  }
});

function myCustomInitInstance() {
  var editor = tinymce.get("myTextArea"),
    rawText = editor.getContent({
      format: "text"
    }).replace(/<([^>]+)>|[\.\+\?,\(\)"'\-\!\;\:]/ig, ""),
    words = rawText.split(" "),
    matchWarning = [],
    longWord = 6;

  for (var i = 0, len = words.length; i < len; i++) {
    if (words[i].length > longWord) {
      matchWarning.push(words[i]);
    }
  }

  console.log(matchWarning);
  var bookmark = editor.selection.getBookmark();
  var $ctx = $(editor.getBody());
  $ctx.unmark({
    done: function() {
      $ctx.mark(matchWarning, {
        acrossElements: true,
        separateWordSearch: false,
        done: function() {
          editor.selection.moveToBookmark(bookmark);
        }
      });
    }
  });

}

当插入符在文本上处于活动状态时 markjs.io 和 TinyMCE 书签出现问题

Trouble with markjs.io and TinyMCE Bookmark when caret is active on text

javascript

tinymce

tinymce-4