Javascript 正在验证字数tinymce_Javascript_Jquery_Tinymce

Javascript 正在验证字数tinymce

javascript jquery tinymce

Javascript 正在验证字数tinymce,javascript,jquery,tinymce,Javascript,Jquery,Tinymce,我正在验证我的tinymce编辑器。目前，我已经通过字符数验证了它的有效性，但是我想把它变成一种类似于字数的东西，因为这应该是一篇文章的主体。所以基本上他们不能提交一篇仅仅几句话的文章现在我有这个 setup : function(ed) { ed.onInit.add(function(ed, evt) { tinymce.dom.Event.add(ed.getBody(), 'focusout', function(e, t) { var c

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

设置：功能（ed）{
ed.onInit.add（功能（ed，evt）{
tinymce.dom.Event.add（ed.getBody（），'focusout'，函数（e，t）{
var con=tinyMCE.activeEditor.getContent（）；
变量len=con.replace（/（]+）>）/ig，“”）.length；
如果（len在这里，只需更换选择器并根据需要获取文本：
    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);


在您的情况下，它将是：
    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(' ');
             }

          });
      });
    }

这很简单：
在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

var data='第一段，带strong，
dummy=document.createElement（'div'）；
dummy.innerHTML=数据；
console.log（（dummy.textContent | | dummy.innerText）.split（/\s+/）.length）；
>>>4//没有“强”、“p”等，只有文本

有关MDN的更多信息。
您的解决方案就在这里

好的，这是完整的解决方案
从上面的链接下载Zip文件。它在右下角给出
解压缩tinymce中插件目录中的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>


charwordcount TinyMCE插件示例
tinymce.init({
选择器：“文本区域”，
插件：[
“charwordcount advlist链接图像列表预览分页符”，
“searchreplace代码insertdatetime非中断”，
“表格文本颜色粘贴文本颜色”
],
charwordcount_include_标记：false，//可选，在计数中包括HTML标记和实体（如）；默认情况下禁用；
工具栏1：“预览代码|恢复后撤消重做|剪切复制粘贴搜索替换|链接取消链接图像|表格|下标上标|非中断|凹痕缩进块引号|布利斯特numlist”，
工具栏2：“格式选择字体选择字体大小选择|粗体斜体下划线删除线|前景色背景色|左对齐中心对齐右对齐对齐对齐”，
梅努巴：错，
工具栏项目大小：“小”
});

这就是你现在拥有的字符和单词计数功能，它将显示在编辑器的状态栏中。它将适用于每个文本区域
我希望这足够清楚，否则在zip文件夹中也有一个例子，它将在新安装的文件夹中
\plugins\charwordcount master\charwordcount master\example
如果你有任何问题，请告诉我。这个解决方案将100%有效，因为我花了很多时间寻找解决方案
Saurabh Gupta如果您也面临这个问题，这意味着在使用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; }

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

CSHTML或视图
    [Required(ErrorMessage = "Please enter About Company")]
    [Display(Name = "About Company : ")]
    [UIHint("tinymce_jquery_full"), AllowHtml]
    public string txtAboutCompany { get; set; }

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

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

是的，谢谢！请注意，设置函数中缺少了一个右括号，如果在if语句之前将计数设置为0，则始终为0。：）不客气：），在这里添加了缺少的括号，我知道在计算完单词后，计数应该重置为0，这是在if语句之前。所以在if语句之前将其归零不会影响它。嗯，这很奇怪。当我将其放入工作代码中时，只有在if语句之前删除计数，它才会工作。实际上，你必须将其归零因为如果您不这样做，那么如果再次触发该函数，则计数将在旧计数的基础上增加。我看不到计数周围有任何语法错误。如果您发现了什么，请告诉我，以便我可以修复它。感谢您的回答！我喜欢该方法的工作原理，但由于某些原因，我无法将其用于tinymce。不清楚在哪里解决方案是在其中一个文件中还是直接在页面上？您应该使用“编辑”将相关代码复制粘贴到您的答案中链接按钮就在它下面。这样，你的答案会更有价值，特别是当链接最终断开时。你应该扩展你的答案，包括op如何集成它，而插件使用起来非常好。有时它们并不总是正确的答案。在这种情况下，我真的在寻找一些关于我已经准备好的代码的帮助正在工作。你能把html部分也发给我吗？这样我就可以弄明白了。实际上，Js文件中给出了字符和字数的代码。我需要知道你是如何调用ed函数的。我已经在6月份找到了这个问题的答案，你可以看到上面我是如何解决我的问题的。我真的没有必要回到这个代码来做广告我尽量避免使用插件。这篇文章已经有了答案（去年）这真是太棒了。如果你能在jQuery中完成这一切，并使用更少的代码，为什么要创建一个完全独立的模型呢？上面的答案有什么好处？你能分享一下这会是什么样子吗？例如，这会阻止用户输入，还是会抛出一条类似上面答案的错误消息？另外，你能解释一下lim是什么吗ited.join正在做什么，以及它如何影响tinymc