logo标签列表

验证TinyMCE的字数统计

javascriptjquerytinymce
3
我正在努力验证我的tinymce编辑器。目前我通过字符计数进行验证，这有效，但我想将其变成一种类似于单词计数的方式，因为这应该是一篇文章的主体。因此，基本上他们不能提交只有几个单词的文章。
目前我有这个：
setup : function(ed) {
     ed.onInit.add(function(ed, evt) {
     tinymce.dom.Event.add(ed.getBody(), 'focusout', function(e, t) {
             var con = tinyMCE.activeEditor.getContent();
             var len = con.replace(/(<([^>]+)>)/ig,"").length;
             if(len <=100){
                $('.storyError').text('An artical has to have at least 100 words!');
             }else{
                    $('.storyError').text(' ');
             }
          });
      });
  }

在我的初始代码之后，这确实有效，但我只想计算单词而不是字符。非常感谢您的帮助！
5个回答
3

您好，只需替换选择器并以所需方式获取文本即可：

    var count = 0;
    function fn(){
        count++;
        return ' ';
    }
    var x= $('textarea').text().trim();
    console.log(x);
    x= x.replace(/[\s]+/ig,fn);
    //x is now filtered out of extra spaces too !
    var words = count+1;
    count = 0;
    console.log(words);

JSFiddle

在您的情况下，它将是：

    var count = 0;
    function fn(){
        count++;
        return ' ';
    }

    setup : function(ed) {
             ed.onInit.add(function(ed, evt) {
             tinymce.dom.Event.add(ed.getBody(), 'focusout', function(e, t) {
             var con = tinyMCE.activeEditor.getContent().trim();
             con = con.replace(/[\s]+/ig,fn);
             //var len = con.replace(/(<([^>]+)>)/ig,"").length;
             var words = count+1;
             count = 0;
             if(words <=100){
                $('.storyError').text('An artical has to have at least 100 words!');
             }else{
                $('.storyError').text(' ');
             }

          });
      });
    }

或者使用这个方法将所有内容放在同一行（但它不会过滤掉额外的空格）：

var words = con.trim().split(/\s+/).length;
是的，谢谢！只有几件事情需要注意，你在设置函数上缺少了一个闭合括号，如果在if语句之前将计数器设为0，它将始终为0。 :) - zazvorniki
不客气 :) ，这里加上了缺失的括号，我知道在单词计算完成后应该将计数器重置为0，而且是在if语句之前。因此，在if语句之前将其清零不会影响它。 - CME64
嗯，这很奇怪。当我把它放到我的工作代码中时，只有在在 if 语句之前删除 count 才能正常工作。 - zazvorniki
你实际上必须将其清零，因为如果不这样做，那么如果函数再次触发，计数将会在旧计数的基础上增加。我没有看到计数周围有任何语法错误。如果你找到了什么，请告诉我，这样我就可以修复它。 - CME64
1
很简单：
  1. 在DOM中创建一些虚拟元素。
  2. 让这些元素保存你的数据。
  3. 使用Node.textContent或Node.innerText从你的数据中提取文本内容（不包括标签等）。
  4. 分割文本并计算单词数。
工作示例：
var data = '<p>First paragraph <strong>with strong</strong></p>',
    dummy = document.createElement( 'div' );

dummy.innerHTML = data;

console.log( ( dummy.textContent || dummy.innerText ).split( /\s+/ ).length );
>>> 4 // no "strong", "p" etc, just text

在MDN上了解有关Node.textContent的更多信息。

谢谢回答！我喜欢这个想法的工作方式，但出于某种原因，我无法将其与tinymce一起使用。 - zazvorniki
0

适用于tinymce 4.1.4

    $('#ContentPlaceHolder1_txtTitle').tinymce({
            theme: "modern",
            plugins: "wordcount code charmap paste",
            toolbar1: "bold italic underline strikethrough | removeformat | subscript superscript | charmap | cut copy paste | undo redo | code visualblocks visualchars",
            paste_auto_cleanup_on_paste: true,
            paste_remove_styles: true,
            paste_remove_styles_if_webkit: true,
            paste_strip_class_attributes: true,
            menubar: false,
            toolbar_items_size: 'large',
            forced_root_block: "",
            max_word: 5,
            setup: function (ed) {
                ed.on('keyup', function (e) {
                    var writtenWords = $('.mce-wordcount').html();
                    writtenWords = writtenWords.replace("Words: ", "");
                    var maxWord = ed.settings.max_word;
                    var limited = "";
                    var content = ed.getContent();

                    if (writtenWords >= maxWord) {
                        $('.mce-wordcount').css("color", "red");
                        limited = $.trim(content).split(" ", maxWord);
                        limited = limited.join(" ");

                        ed.setContent(limited);
                    } else {
                        $('.mce-wordcount').css("color", "green");
                    }
                });
            }
        });
你能分享一下这个会是什么样子吗？比如说，这只是阻止用户输入还是会像上面的答案一样抛出错误信息？另外，你能解释一下limited.join是做什么的以及它如何影响tinymce吗？ - zazvorniki
如果写下的单词超过了最大单词数，它将防止您编写和连接这些单词（这是您第二个问题的答案）。 - Doğan Etkin
写并连接单词？我不认为我理解你的意思...如果他们写的单词连接在一起，我为什么要担心呢？你是指像“and-this”这样的单词还是有空格的单词？请原谅，我试图理解你在这里做什么。此外，我不明白你如何使用这段代码抛出错误或者单词是如何被计数的...通过空格吗？ - zazvorniki
-1
如果您也遇到了这个问题，即在使用tinymce HTML编辑器时所需的验证无法正常工作，那么我有一个解决方案，请按照以下步骤操作，希望能够解决您的问题。请检查下面的代码 使用nuget包在应用程序中安装tinymce jquery软件包 创建一个像这样的模型 模型 
    [Required(ErrorMessage = "Please enter About Company")]
    [Display(Name = "About Company : ")]
    [UIHint("tinymce_jquery_full"), AllowHtml]
    public string txtAboutCompany { get; set; }

CSHTML或视图

 <div class="divclass">
       @Html.LabelFor(model => model.txtAboutCompany, new { @class = "required" })
       @Html.EditorFor(model => model.txtAboutCompany)
       <span class="field-validation-error" id="AC" style="margin:9px 0 0 57px;">/span>
 </div>

这是jQuery

$("#BusinessProfile").click(function () {
        var aboutC = $("#txtAboutCompany").val()
        var pinfo = $("#txtProductinfo").val();
        if (aboutC == "" && pinfo == "") {
            $("#AC").append("").val("").html("Please enter about company")
            $("#PI").append("").val("").html("Please enter product information")
            $("#bpform").valid();
            return false;
        } else if (aboutC == "") {
            $("#PI").append("").val("").html("")
            $("#AC").append("").val("").html("Please enter about company")
            $("#txtAboutCompany").focus();
            $("#bpform").valid();
            return false;
        } else if (pinfo == "") {
            $("#AC").append("").val("").html("")
            $("#PI").append("").val("").html("Please enter product information")
            $("#txtProductinfo").focus();
            $("#bpform").valid();
            return false;
        }
        else {
            $("#AC").append("").val("").html("");
            $("#PI").append("").val("").html("");
            //return true;
            $("#bpform").validate();
        }
    });
这篇帖子已经在去年得到了一个非常好的解决方案。如果你可以使用jQuery并且使用更少的代码完成所有操作，为什么要创建一个完全独立的模型呢？这样做有什么优点超过上面提到的答案吗？ - zazvorniki
-1

你的解决方案在这里

https://github.com/AdamScheller/charwordcount

好的，这是完整的解决方案。

  1. 从上面的链接中下载Zip文件。它位于右下角。

  2. 将zip文件夹解压缩到tinymce内的plugins目录中。现在你的plugins目录中应该有一个名为(charwordcount-master)的文件夹。

  3. 然后

只需在初始化编辑器的代码中调用插件即可。我在这里写整个头部部分。

<head>
    <meta charset="utf-8"> 
    <title>charwordcount TinyMCE plugin example</title>
    <script src="tinymce/tinymce.min.js"></script>
    <script>
        tinymce.init({
            selector: "textarea",
            plugins: [
                "charwordcount advlist link image lists preview pagebreak",
                "searchreplace code insertdatetime nonbreaking",
                "table textcolor paste textcolor"
            ],
            charwordcount_include_tags: false, // optional, includes HTML tags and entities (like &nbsp;) in count; disabled by default;
            toolbar1: "preview code | restoredraft undo redo | cut copy paste searchreplace | link unlink image | table | subscript superscript | nonbreaking | outdent indent blockquote | bullist numlist",
            toolbar2: "formatselect fontselect fontsizeselect | bold italic underline strikethrough | forecolor backcolor | alignleft aligncenter alignright alignjustify",
            menubar: false,
            toolbar_items_size: 'small'
        });
    </script>
</head>

这就是它，现在你既有了字符计数和单词计数的功能，而且它会显示在编辑器的状态栏中。对于每个文本区域都适用。

我希望这足够清楚，否则在压缩文件中还有一个示例，它将位于新安装的文件夹中。

\plugins\charwordcount-master\charwordcount-master\example

如果你遇到任何问题，请告诉我。这个解决方案百分之百有效，因为我花了很多时间寻找解决办法。

Saurabh Gupta

不清楚解决方案在哪里，是在文件中还是直接在页面上？您应该使用下面的“编辑”链接按钮将相关代码复制粘贴到您的答案中。这样，您的答案将更有价值，特别是如果链接最终断开的话。 - ForceMagic
你应该扩展你的回答，包括如何集成它。 - megawac
虽然插件很好用，但有时候它们并不总是最佳解决方案。在这种情况下，我真的希望能得到一些关于我已经编写的代码的帮助，因为它已经在运行中了。 - zazvorniki
你能把HTML部分也发给我吗，这样我就可以弄清楚了。实际上，Js文件中已经提供了字符和单词计数的代码。我需要知道你是如何称呼ed函数的。 - saurabh gupta
我已经在六月份找到了这个问题的答案，你可以看到上面我是如何解决我的问题的。我真的没有必要回到这段代码中添加插件。我尽量避免使用插件。 - zazvorniki
顺便说一下，您可以通过获取长度并查看其是否小于所需的数量来进行字符计数。我在上面就是这样做的。 - zazvorniki
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接