5

I have a div with contenteditable set to true. Now I want to enable resize for div inside contenteditable div.

In my example html insert works fine but how to make inserted html div to be resizable?

Code:

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/

Tim Down
  • 318,141
  • 75
  • 454
  • 536
user3189644
  • 157
  • 2
  • 10
  • 1
    possible duplicate of [Make
    resizeable](http://stackoverflow.com/questions/391440/make-div-resizeable)
     – Luís P. A. Jul 30 '15 at 09:12
  • Luis, this is not dublicate with post you mentioned. In my case div contenteditable is set to true. Any help is greatly appreciated. – user3189644 Jul 30 '15 at 10:12
  • 1
    you may use css3 property resize:both; http://www.w3schools.com/cssref/css3_pr_resize.asp or you can also use JQuery UI http://api.jqueryui.com/resizable/ – Akshay Khale Jul 30 '15 at 11:13
  • akshayk, I tried already but no luck. Can you update my fiddle so I can see how it works? – user3189644 Jul 30 '15 at 11:31

1 Answers1

6

#editme {
  resize: vertical;
  overflow: auto;
}
<div id="editme" contenteditable="true">Click somewhere in here and press the 'insert html' button</div>
shreyasm-dev
  • 2,711
  • 5
  • 16
  • 34
Pranay Nailwal
  • 483
  • 6
  • 13