为 contenteditable div 中的 div 启用调整大小

Posted 2023-05-08

【中文标题】为 contenteditable div 中的 div 启用调整大小

【英文标题】：Enable resize for div inside contenteditable div

【发布时间】：2015-10-21 13:23:06

【问题描述】：

我有一个 contenteditable 设置为 true 的 div。现在我想在 contenteditable 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>");
    

小提琴：http://jsfiddle.net/q6q05f1b/

【问题讨论】：

Make <div> resizeable的可能重复

Luis，这与您提到的帖子不重复。在我的情况下，div contenteditable 设置为 true。非常感谢任何帮助。

你可以使用 css3 属性 resize:both; w3schools.com/cs-s-ref/css3_pr_resize.asp 或者你也可以使用 JQuery UI api.jqueryui.com/resizable

akshayk，我已经尝试过了，但没有运气。你能更新我的小提琴，让我看看它是如何工作的吗？

【参考方案1】：

#editme 
  resize: vertical;
  overflow: auto;

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