Question

好。我使用TinyMCE和MarkJS来突出显示文本中的长词。如果单词长于6个字母，则标记为。

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

问题：

乍一看，一切都很好。长长的话很完美。

但是...

如果您将插入符号放在单词中。亮点在keydown上消失了。

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

我怀疑这个问题是由于当插入符号出现时，TinyMCE会触发某种事件。

可能的解决方案 我试图看看插入符号是否以某种方式分裂，从而使它看起来更短。似乎并非如此（请参阅第24行的console.log（字）。

**编辑30-12-2016：** 看起来它应该是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 Bookmark会出现问题

1 个答案: