如何像这样突出显示 TinyMCE 中的句子? [英] How to highlight sentences in TinyMCE like this?

查看：16
本文介绍了如何像这样突出显示 TinyMCE 中的句子?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

编辑 2016 年 11 月 18 日我正在尝试在 TinyMCE 编辑器中标记/突出显示长句(16 个字以上).

这是我目前最好的选择，使用 mark.js 和 TinyMCE 编辑器

HTML 非常简单:

放置任何你想要的随机文本，只要它在上面每点16个字分隔的句子也应标明正文.

JavaScript 目前看起来像这样:

tinymce.init({选择器:'#myTextArea'，高度:300，init_instance_callback : "myCustomInitInstance",});函数 myCustomInitInstance(inst) {var rawText = tinyMCE.get('myTextArea').getContent({format : 'text'});var sentenceArray = rawText.split(".");var matchWarning = [];var longSentence = 16;var 词;var wordCounter;for (var i in sentenceArray) {words = sentenceArray[i].split(" ");wordCounter = words.length;如果(wordCounter > longSentence){matchWarning.push(sentenceArray[i]);}}$("#myTextArea").mark(matchWarning, {separateWordSearch":假，iframes":真，});}

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

非常欢迎关于为什么 TinyMCE 没有突出显示文本的任何建议

标题

提前致谢

<小时>

原帖

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

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

使用带有 contenteditable="true" 的普通 div 和创建高光效果的底层 div 相当简单.

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

...文本在这里
<div id="textMarker">

然后

function textHandler() {rawText = $("#myTextArea").html();rawText = rawText.replace(/\n\r?/g, '
');textArray = rawText.split(".");var matchWarning = new Array();for (var i in textArray) {var words = textArray[i].split(" ");var wordCounter = words.length;如果 (wordCounter > 16) {matchWarning.push(i);}}rawText = $( "#myTextArea" ).html();rawText = rawText.replace(/\n\r?/g, '
');rawText = rawText.split(".");for (var i in matchWarning) {for (var y in rawText) {如果(匹配警告[i] == y){rawText[y] = ""+ rawText[y] + "</span>";}}}rawText = rawText.join(".");//输出到 TinyMCE 编辑器顶部的 #outputText div$("#textMarker").html(rawText);}$(document).ready(textHandler);$( "#myTextArea" ).keyup(textHandler);$( "#myTextArea" ).change(textHandler);

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

如果通过我的 javascript 混搭的文本只是被转储到 TinyMCE 编辑器之外的 div 中，我完全能够使用 TinyMCE 做到这一点.

但我对如何使用 TinyMCE 实现上述效果感到非常困惑.任何输入都将不胜感激.

解决方案

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

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

这将是完整的代码:

tinymce.init({选择器:'#myTextArea'，高度:300，init_instance_callback: "myCustomInitInstance",});函数 myCustomInitInstance(inst) {var rawText = tinyMCE.get('myTextArea').getContent({格式:'文本'});var sentenceArray = rawText.split(".");var matchWarning = [];var longSentence = 16;var 词;var wordCounter;for (var i in sentenceArray) {words = sentenceArray[i].split(" ");wordCounter = words.length;如果(wordCounter > longSentence){matchWarning.push(sentenceArray[i]);}}var $clone = $("#myTextArea").clone();$clone.mark(matchWarning, {separateWordSearch":假，iframe":真});tinyMCE.activeEditor.setContent($clone.html());}

Edit 18th november 2016 I'm trying to mark / highlight long sentences (above 16 words) in a TinyMCE editor.

This is my best bet so far using mark.js and TinyMCE editor

The HTML is quite plain:

<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 looks like this at the moment:

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

You can see it run on CodePen here: http://codepen.io/MarkBuskbjerg/pen/rWWRbX

Any suggestions as to why TinyMCE is not highlighting the text is very welcome

Heading

Thanks in advance

Original post

I'm playing around with a simple tool calculating lix, long sentences and such.

I really wanna be able to highlight areas in the text, which needs the attention of the person writing.

It's fairly simple with a plain div with contenteditable="true" and an underlay div creating the highlight effect.

I've created a swift demo of the effect here: http://codepen.io/MarkBuskbjerg/pen/qqZBwo

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

<div id="textMarker">

</div>

and then

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

The reason why I'm not just editing the content in the editable div directly is, that I at the same time want the users markup preserved in the editor (bullets, headers and such). I therefore turned to TinyMCE.

I'm perfectly able to do this with TinyMCE if the text mashed through my javascript was just to be dumped in a div outside of the TinyMCE editor.

But I'm more than puzzled trying to figure how to achieve the above shown effect with TinyMCE. Any inputs would be much, much appreciated.

解决方案

You'll need to set the changed HTML using a TinyMCE API method.

This answer demonstrates how to set HTML content using tinyMCE.activeEditor.setContent. Now, since mark.js marks matches directly in the textarea, you'll have to clone the textarea, let mark.js do the changes there and then set the clone's HTML to the original textarea.

This would be the full code:

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

这篇关于如何像这样突出显示 TinyMCE 中的句子?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆