使contenteditable div中的div可调整大小

Question

我有一个设置为可编辑的div。现在我想在可编辑的div中启用div的大小调整。

在我的示例HTML中，插入工作正常，但如何使插入的HTML div具有可调整大小的功能呢？

代码：

function inserthtml() {
    var sel = document.selection;
    if (sel) {
        var textRange = sel.createRange();
        document.execCommand('inserthtml', false, "<div><img src='https://www.google.com/images/srpr/logo11w.png'  height='42' width='42'></div>");
        textRange.collapse(false);
        textRange.select();
    } else {
        document.execCommand('inserthtml', false, "<div><img src='https://www.google.com/images/srpr/logo11w.png'  height='42' width='42'></div>");
    }
}

fiddle: http://jsfiddle.net/q6q05f1b/

- user3189644

---

可能是使<div>可调整大小的重复问题。 - Luís P. A.

Luis，这不是你提到的帖子的副本。在我的情况下，div contenteditable 被设置为 true。非常感谢任何帮助。 - user3189644

你可以使用CSS3属性resize:both; http://www.w3schools.com/cssref/css3_pr_resize.asp，或者你也可以使用JQuery UI http://api.jqueryui.com/resizable/。 - Akshay Khale

akshayk，我已经尝试过了，但没有成功。你能否更新我的fiddle，以便我可以看到它是如何工作的？ - user3189644

Answer 1

#editme {
  resize: vertical;
  overflow: auto;
}

<div id="editme" contenteditable="true">Click somewhere in here and press the 'insert html' button</div>

- Pranay Nailwal