如何禁用contenteditable div中的元素？

Question

如何禁用contenteditable div中的元素？

6

我有一个带有属性contentEditable的div，用于模拟textarea，根据文本自适应高度。这个功能很完美。但是，当我复制超链接并将其粘贴到我的div中时，它不是纯文本，而是带有锚元素。同样的情况也出现在其他网站上的选定部分，如果将其粘贴到该内容可编辑的div中，它会显示所有HTML。我希望该div只显示纯文本，并禁用其中的所有元素！

工作演示：http://jsfiddle.net/4ctVx/

只需将任何HTML粘贴到它中，它就会显示带有该HTML的div。我希望它被禁用，并且div只显示纯文本！

- Muhammad Talha Akbar

只是为了让其他人清楚，如果您复制带有图像等内容的富文本并将其粘贴到div中，则会显示呈现的html。 - gideon

Aquib，为什么不使用文本框？ - gideon

有许多插件可用于使文本区域高度动态化。 - charlietfl

@gideon 我希望它像Facebook和Google+一样扩展。 Google还使用上述技术，当键入或粘贴大量文本时，将contenteditable div扩展为true，但他们还具有这样的功能：当HTML文本被粘贴到其中时，textarea中没有HTML！我只想要那个功能！我已经尝试了3个小时找一个解决方案！ - Muhammad Talha Akbar

这个插件只能扩展一个文本区域！我正在开发一个社交网站，其中有各种帖子，因此每个帖子都有添加评论的文本区域！如果有人对可编辑div或该插件有任何解决方案，请告诉我！ - Muhammad Talha Akbar

1

没有任何限制插件只能在一个文本区域上使用。 - charlietfl

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Chris Like · Accepted Answer

如果你在可编辑内容的div上添加事件监听器，你可以使用jQuery将RichText替换为PlainText。我从这里拿到了事件监听器：balupton：https://dev59.com/N3M_5IYBdhLWcg3waSX9#6263537.

$('[contenteditable]').live('focus', function() {
    var $this = $(this);
    $this.data('before', $this.html());
    return $this;
}).live('blur keyup paste', function() {
    var $this = $(this);
    if ($this.data('before') !== $this.html()) {
        $this.data('before', $this.html());
        $this.trigger('change');
    }
    return $this;
});
//use this jQuery snippet to swap HTML for Text.
$('.editableContent').live('change', function() {
    $(this).html($(this).text());
    alert('changed');
});