javascript - 当插入符号在文本上处于事件状态时，markjs.io 和 TinyMCE 书 checkout 现问题

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);
        }
      });
    }
  });

}