Jquery 所见即所得编辑器（需要jHtmlArea增强）

在一个非常数据密集的网站项目中使用了大量jQuery/JavaScript，我们自己编写了很多东西，但也使用了很多插件，但即使我们添加了一个插件，我们也需要向它添加更多的功能。在一个例子中，我们需要允许用户对他们选择的文本加粗、斜体或下划线，这样我们就可以使用jHtmlArea插件(http://jhtmlarea.codeplex.com)它确实可以工作，但我们还需要在其上显示一个字符计数器，该计数器考虑相关TEXTAREA元素的maxlength

我发现了一个JSFIDLE（nXMqc），它有一个基于TEXTAREA maxlength的字符计数器。

---

但我需要让它与jHtmlArea插件一起工作。到目前为止，我的尝试都是徒劳的。

我通过更新jHtmlArea-0.7.5.js中的javascript实现了这一点

特别是：

   ...
   updateTextArea: function () {
        this.textarea.val(this.toHtmlString());

        //Add the following javascript
        var val = $(this.textarea).val();
        var vallength = val.length;
        $("#counter-div").html(vallength);

    },...

然后您就可以在文本区域的正下方使用

---

如果您希望在一个页面上有多个JHTMLEAS，则会有一些额外的修改。基本上，

计数器div

需要唯一标识到您正在修改的文本区域。

这里是我在原始帖子中无法链接到的JSFIDLE：需要在Iframe中进行计数，在Iframe中WYSIWYG进行编辑。。。查看插件代码并将keyup处理程序绑定到iframe文档您是否尝试过我的答案？Charlie，我的脚本似乎无法影响iframe中发生的任何事情。好像它有自己的想法。谢谢。我要开始做这件事了。更新：我认为你的添加确实有帮助，但它不包括输入IFRAME的文本，IFRAME屏蔽了jHtmlArea插件实现的文本区域。Michael，我看到你正在设置一个名为“maxlength”的变量但我不知道在那之后它在哪里被使用。不过，其他变量似乎正在被使用。我删除了它。它是从您在第一条评论中发布的JSFIDLE中删除的。当你接近极限时，它将被用来改变计数器的颜色。关于第二条注释，当您在IFRAME中输入文本时，它应该触发updateTextArea。因此，它将产生与您尝试实现的结果相同的结果。这是我的经验，如果你需要我提供我使用的完整代码，我可以。我刚刚在JSFIDLE中看到你的评论。我建议不要“修剪”，因为这需要您编写一些安全地提取html的内容，然后在修剪创建空元素时删除它们。由于添加和删除HTML标记，您可能最终会在文本计数上有很大的跳跃。