javascript - 验证字数 tinymce

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

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

score 3 · Accepted Answer

在这里，只需替换选择器并获取所需的文本：

    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;

score 1 · Accepted Answer

这很容易：

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

score 0 · Accepted Answer

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

score -1 · Accepted Answer

您的解决方案在这里

https://github.com/AdamScheller/charwordcount

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

从上面的链接下载 Zip 文件。在右下角给出
在tinymce内的plugins目录中解压zip文件夹。所以现在你应该在你的插件目录中有一个名为 (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 文件夹中还有一个示例，它将位于新安装的文件夹中

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

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

索拉布·古普塔

score -1 · Accepted Answer

如果您也遇到此问题，则意味着当您使用 tinymce html 编辑器时所需的验证不起作用，所以我有一个解决方案，请遵循它，我希望您的问题能够解决，请使用以下代码在您的应用程序中检查 tinymce jquery 的安装包使用 nuget 包创建一个像这样的模型

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

javascript - 验证字数 tinymce

5 回答 5

Related

Reference