0

我正在尝试使用此处找到的 ckeditor 教程在我的一些已转换为 wswgs 的文本区域上实现字数统计功能：http ://www.n7studios.co.uk/2010/03/01/ckeditor-word-计数插件/。本教程使用自定义插件来计算 ckeditor 的单词。我得到了正确的字数，但是当我超过允许的最大字数时，我看不到颜色变为红色。我已经使用 firebug 来查看我的文本区域在使用 ckeditor 转换为 wswg 后的样子，但我没有看到任何奇怪的东西。这是我的代码：

<asp:Content ID="Content3" ContentPlaceHolderID="JSContent" runat="server">
<script src="<%: Url.Content("~/Scripts/jquery-1.7.min.js") %>" type="text/javascript"></script>
<script type="text/javascript" src="<%: Url.Content("~/Scripts/jquery.combobox.js") %>"></script>
<script type="text/javascript" src="<%: Url.Content("~/Scripts/ckeditor/ckeditor.js") %>"></script>
<script type="text/javascript" src="<%: Url.Content("~/Scripts/ckeditor/adapters/jquery.js") %>"></script> <%-- Must be linked last --%>
<script type="text/javascript">
    $(document).ready(function () {

        $(".cke_editor").ckeditor({
            toolbar: 'custom'
        });

    });

<div class="form-row form-row-inline">
    <%: Html.TextAreaFor(model => model.AssignmentText, new { @name = "table", @class = "cke_editor", @style = "display:none", @onchange = "setDirty(true)" })%>
    <input name="tableWordCount" type="hidden" value="10" />
</div>

这是屏幕：

ckeditor 和 wordcount 插件

非常感谢任何帮助。

4

1 回答 1

0

我终于弄明白了。Html.TextAreaFor()asp.net mvc helper 方法将 html 属性对象作为参数，如上面的问题代码所示。我最初使用 textarea 的“名称”属性，以便它与 ckeditor 字数统计插件上的“名称属性”相匹配。我不得不改用“id”属性。

ckeditor 示例：

<html>
<head>
    <title>CKEditor Word Count Demonstration</title>
    <script type="text/javascript" src="jquery/jquery.1.4.min.js"></script>
    <script type="text/javascript" src="ckeditor/ckeditor.js"></script>
</head>

<body>
    <form action="#" method="POST">
        <p>
            <label for="content">Content with 250 word limit</label>
            <textarea name="content" class="ckeditor">Lorem Ipsum.</textarea>
            <input type="hidden" name="contentWordCount" value="250" />
        </p>
    </form>
</body>
</html>

我的新固定代码：

<asp:Content ID="Content3" ContentPlaceHolderID="JSContent" runat="server">
<script src="<%: Url.Content("~/Scripts/jquery-1.7.min.js") %>" type="text/javascript"></script>
<script type="text/javascript" src="<%: Url.Content("~/Scripts/jquery.combobox.js") %>"></script>
<script type="text/javascript" src="<%: Url.Content("~/Scripts/ckeditor/ckeditor.js") %>"></script>
<script type="text/javascript" src="<%: Url.Content("~/Scripts/ckeditor/adapters/jquery.js") %>"></script> <%-- Must be linked last --%>
<script type="text/javascript">
    $(document).ready(function () {

        $(".cke_editor").ckeditor({
            toolbar: 'custom'
        });

    });

<div class="form-row form-row-inline">
    <%: Html.TextAreaFor(model => model.AssignmentText, new { @id = "taxta", @class = "cke_editor", @style = "display:none", @onchange = "setDirty(true)" })%>
    <input name="taxtaWordCount" type="hidden" value="10" />
</div>

所以，我唯一需要改变的是“id”属性。我希望这对其他人有帮助。同样，Firebug在深入研究 html DOM 并查看浏览器上的所有内容如何呈现方面非常有帮助。

于 2012-04-20T18:10:52.057 回答