TINYMCE 长度:asp.net mvc

TINYMCE Length : asp.net mvc

这是我用来检查 tinymce 内容长度的代码

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

                setup: function (ed) {
                    ed.on('keyup', function (e) {
                        var count = CountCharacters();
                        document.getElementById("character_count").innerHTML = "Characters: " + count;
                    });
                }
            });
        }
        function CountCharacters() {
            var body = tinymce.get("Body").getBody();
            var content = tinymce.trim(body.innerText || body.textContent);
            return content.length;
        };
        function ValidateCharacterLength() {
            var max = 4000;
            var count = CountCharacters();
            if (count > max) {
                alert("Maximum " + max + " characters allowed.")
                return false;
            }
            return;
        }
    </script>

它 return 没有(html 标签)的长度所以最大尺寸是 4000 但如果我把它加粗,改变颜色 它超过 4000,所以不能将它存储在 SQL 我如何确定 HTML 标签的长度?

例如:这是加粗的长度 enter image description here

但在 SQL 中它的长度为 :33

我将代码更改为如下所示

@model TinyEditorWithMVCApp.Models.Post


@{
    ViewBag.Title = "AddPost";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Add new Post</h2>


<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>TintMCE App</title>
    <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',

                setup: function (ed) {
                    ed.on('keyup', function (e) {
                        var count = CountCharacters();
                        document.getElementById("character_count").innerHTML = "Characters: " + count;
                    });
                }
            });
        }
        function CountCharacters() {
    var content = tinymce.activeEditor.getContent({format: 'raw'});
     return content.length;
};
        function ValidateCharacterLength() {
            var max = 4000;
            var count = CountCharacters();
            if (count > max) {
                alert("Maximum " + max + " characters allowed.")
                return false;
            }
            return;
        }
    </script>
</head>
<body>
    <div>
        @using (Html.BeginForm("AddPost", "Home", FormMethod.Post))
        {
            <div>
                @Html.TextBoxFor(model => model.AuthorName)
            </div>

            <div>
                @Html.TextAreaFor(model => model.Body)
            </div>

            <div id="character_count">
            </div>
            <div>
                <input type="submit" value="Save Post" onclick="return ValidateCharacterLength();" />


            </div>

        }
    </div>
    <div id="character_count">
    </div>
</body>
</html>

我猜得到的结果不正确

它告诉我即使是(测试)字符 8 也必须是 4,我没有添加任何 HTML 标签 enter image description here

根据documentation,您可以阅读原始内容

// Get the HTML contents of the currently active editor
console.debug(tinymce.activeEditor.getContent());

// Get the raw contents of the currently active editor
tinymce.activeEditor.getContent({format: 'raw'});

// Get content of a specific editor:
tinymce.get('content id').getContent()

对于你的情况我会尝试改变

function CountCharacters() {
    var content = tinymce.activeEditor.getContent({format: 'raw'});
     return content.length;
};

来自 JSFiddle 的示例:

  • 空编辑器 - tinyMCE 默认放在那里 <p><br data-mce-bogus="1"></p> 并给出长度 30
  • example 作为输入然后 html 后面是 <p>example</p> 长度是 14
  • 粗体example作为输入然后html是

    示例

    并且长度是31

JSFiddle 上的工作样本。