如何使用JavaScript从文本编辑器和TinyMCE编辑器的字符限制验证中删除菜单项(文件,编辑,视图,格式)

时间:2022-10-06 09:54:37

how to remove menu items (file, edit, view, format) from the text editor and Character Limit validation for TinyMCE editor using JavaScript and i am following this example: http://www.aspsnippets.com/Articles/Character-Count-and-Character-Limit-validation-for-TinyMCE-editor-using-JavaScript.aspx

如何使用JavaScript从文本编辑器和TinyMCE编辑器的字符限制验证中删除菜单项(文件,编辑,视图,格式),我遵循以下示例:http://www.aspsnippets.com/Articles/Character-Count-和字符限制的验证换TinyMCE的编辑器,使用-JavaScript.aspx

 <div>
 <textarea id="txtTinyMCE" rows="2" cols="20"></textarea>
 <br />
 <div id="character_count">
 </div>
 <br />
 <input type="submit" value="Submit" onclick="return ValidateCharacterLength();" />
 <script type="text/javascript" src="//tinymce.cachefly.net/4.0/tinymce.min.js"></script>
</div>

Java Script code for restricting maximum characters:

用于限制最大字符的Java脚本代码:

 <script type="text/javascript" src="//tinymce.cachefly.net/4.0/tinymce.min.js"></script>
  <script type="text/javascript">
window.onload = function () {
    tinymce.init({
        selector: 'textarea',
        width: 400,
        setup: function (ed) {
            ed.on('keyup', function (e) {
                var count = CountCharacters();
                document.getElementById("character_count").innerHTML = "Characters: " + count;
            });
        }
    });
}
function CountCharacters() {
    var body = tinymce.get("txtTinyMCE").getBody();
    var content = tinymce.trim(body.innerText || body.textContent);
    return content.length;
};
function ValidateCharacterLength() {
    var max = 3000;
    var count = CountCharacters();
    if (count > max) {
        alert("Maximum " + max + " characters allowed.")
        return false;
    }
    return;
}
</script>

1 个解决方案

#1


2  

From the documentation for the TinyMCE menubar it looks like you can configure what is displayed in the setup. In your case, you would add your configurations in your window.onload function.

从TinyMCE菜单栏的文档中,您可以配置设置中显示的内容。在您的情况下,您将在window.onload函数中添加配置。

ie

tinymce.init({
    menu : { // this is the complete default configuration
        file   : {title : 'File'  , items : 'newdocument'},
        edit   : {title : 'Edit'  , items : 'undo redo | cut copy paste pastetext | selectall'},
        insert : {title : 'Insert', items : 'link media | template hr'},
        view   : {title : 'View'  , items : 'visualaid'},
        format : {title : 'Format', items : 'bold italic underline strikethrough superscript subscript | formats | removeformat'},
        table  : {title : 'Table' , items : 'inserttable tableprops deletetable | cell row column'},
        tools  : {title : 'Tools' , items : 'spellchecker code'}
    }
});

From what I can see, i'd assume to hide an item, you would just need to set it to false.

从我所看到的,我假设隐藏一个项目,你只需要将其设置为false。

#1


2  

From the documentation for the TinyMCE menubar it looks like you can configure what is displayed in the setup. In your case, you would add your configurations in your window.onload function.

从TinyMCE菜单栏的文档中,您可以配置设置中显示的内容。在您的情况下,您将在window.onload函数中添加配置。

ie

tinymce.init({
    menu : { // this is the complete default configuration
        file   : {title : 'File'  , items : 'newdocument'},
        edit   : {title : 'Edit'  , items : 'undo redo | cut copy paste pastetext | selectall'},
        insert : {title : 'Insert', items : 'link media | template hr'},
        view   : {title : 'View'  , items : 'visualaid'},
        format : {title : 'Format', items : 'bold italic underline strikethrough superscript subscript | formats | removeformat'},
        table  : {title : 'Table' , items : 'inserttable tableprops deletetable | cell row column'},
        tools  : {title : 'Tools' , items : 'spellchecker code'}
    }
});

From what I can see, i'd assume to hide an item, you would just need to set it to false.

从我所看到的,我假设隐藏一个项目,你只需要将其设置为false。