Question

我正在努力验证我的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(' ');
             }
          });
      });
  }

在我的初学者之后，这确实有效，我只想计算单词而不是字符。一些帮助将不胜感激！

Answer 1

在这里，您只需更换选择器并根据需要获取文字：

    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;

Answer 2

这很简单：

在DOM中创建一些虚拟元素。
让此元素保存您的数据。
使用Node.textContent或Node.innerText从您的数据中提取文字内容（不含标签等）
拆分文字和计算单词。

工作示例：

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的更多信息。

Answer 3

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

Answer 4

你的解决方案就在这里

https://github.com/AdamScheller/charwordcount

好这是完整的解决方案。

从上面的链接下载Zip文件。它在右侧底部给出
解压缩内部插件目录中的zip文件夹。所以现在你shoyld在你的插件目录中有一个名为（charwordcount-master）的目录
然后

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

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

现在你既有字符和字数统计功能，它也会显示在编辑器的状态栏中。它适用于每个文本区域。

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

<强> \插件\ charwordcount主\ charwordcount主\示例

如果您有任何问题，请告诉我。这个解决方案将100％工作，因为我花了很多时间寻找解决方案。

Saurabh Gupta

Answer 5

如果你也遇到这个问题意味着当你使用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或VIEW

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

验证字数tinymce

5 个答案: