javascript - 如何像这样在 TinyMCE 中高亮句子？

Question

编辑 2016 年 11 月 18 日 我正在尝试在 TinyMCE 编辑器中标记/突出显示长句子(超过 16 个单词)。

这是我迄今为止最好的选择 mark.js和 TinyMCE 编辑器

HTML 非常简单:

<div id="myTextArea" contenteditable="true">
    Put whatever random text you want and as long as it is above 
    16 words per dot separated sentence it should also mark the text.
</div>

JavaScript 目前看起来像这样:

tinymce.init({
    selector: '#myTextArea',
    height: 300,
    init_instance_callback : "myCustomInitInstance",
});

function myCustomInitInstance(inst) {
   var rawText = tinyMCE.get('myTextArea').getContent({format : 'text'});
   var sentenceArray = rawText.split(".");
   var matchWarning = [];
   var longSentence = 16;
   var words;
   var wordCounter;

   for (var i in sentenceArray) {
       words = sentenceArray[i].split(" ");
       wordCounter = words.length;
       if (wordCounter > longSentence) {
           matchWarning.push(sentenceArray[i]);
       }
   }

    $("#myTextArea").mark(matchWarning, {
        "separateWordSearch": false,
        "iframes": true,
    });
}

你可以在这里看到它在 CodePen 上运行:http://codepen.io/MarkBuskbjerg/pen/rWWRbX

欢迎就 TinyMCE 为何不突出显示文本提出任何建议

标题

提前致谢

---

原帖

我正在使用一个简单的工具来计算 lix、长句等。

我真的希望能够突出文本中需要写作者注意的区域。

使用带有 contenteditable="true"的普通 div 和创建突出显示效果的底层 div 非常简单。

我在这里创建了一个效果的快速演示:http://codepen.io/MarkBuskbjerg/pen/qqZBwo

<div id="myTextArea" contenteditable="true">
    ...Text goes here
</div>

<div id="textMarker">

</div>

然后

function textHandler() {
rawText = $("#myTextArea").html();
rawText = rawText.replace(/\n\r?/g, '<br />');
textArray = rawText.split(". ");
var matchWarning = new Array();


for (var i in textArray) {
    var words = textArray[i].split(" ");
    var wordCounter = words.length;
    if (wordCounter > 16) {
        matchWarning.push(i);
    }
}

rawText = $( "#myTextArea" ).html();
rawText = rawText.replace(/\n\r?/g, '<br />');
rawText = rawText.split(". ");

for (var i in matchWarning) {
    for (var y in rawText) {        
        if (matchWarning[i] == y) {
            rawText[y] = "<span class='long-sentence'>" + rawText[y] + "</span>";
        }
    }
}

rawText = rawText.join(". ");

// Output to the #outputText div on top of the TinyMCE editor
$("#textMarker").html(rawText); 
}

$(document).ready(textHandler);
$( "#myTextArea" ).keyup(textHandler);
$( "#myTextArea" ).change(textHandler);

我不只是直接编辑可编辑 div 中的内容的原因是，我同时希望在编辑器中保留用户标记(元素符号、标题等)。因此，我转向了 TinyMCE。

如果通过我的 javascript 混合的文本只是被转储到 TinyMCE 编辑器之外的一个 div 中，我完全可以使用 TinyMCE 做到这一点。

但我对如何使用 TinyMCE 实现上述效果感到非常困惑。非常感谢任何意见。

Answer 1

您需要使用 TinyMCE API 方法设置更改后的 HTML。

This answer演示如何使用 tinyMCE.activeEditor.setContent 设置 HTML 内容。现在，由于 mark.js 直接在 textarea 中标记匹配项，您必须克隆 textarea，让 mark.js 在那里进行更改，然后将克隆的 HTML 设置为原始 textarea。

这是完整的代码:

tinymce.init({
  selector: '#myTextArea',
  height: 300,
  init_instance_callback: "myCustomInitInstance",
});

function myCustomInitInstance(inst) {
  var rawText = tinyMCE.get('myTextArea').getContent({
    format: 'text'
  });

  var sentenceArray = rawText.split(".");
  var matchWarning = [];
  var longSentence = 16;
  var words;
  var wordCounter;

  for (var i in sentenceArray) {
    words = sentenceArray[i].split(" ");
    wordCounter = words.length;
    if (wordCounter > longSentence) {
      matchWarning.push(sentenceArray[i]);
    }
  }

  var $clone = $("#myTextArea").clone();
  $clone.mark(matchWarning, {
    "separateWordSearch": false,
    "iframes": true
  });
  tinyMCE.activeEditor.setContent($clone.html());
}