How to Disable _Moz_Resizing

How can I disable _moz_resizing?

You can disable this by going to about:config in Firefox - change browser.enable_automatic_image_resizing to false.

Disable resizing tables in mozilla in design mode

Yes.

document.designMode = "on";
document.execCommand("enableObjectResizing", false, "false");
document.execCommand("enableInlineTableEditing", false, "false");

In Firefox, the resizing controls on a table often appear at the same time as the inline table editing controls, so you probably really want to turn off both of them.

If your editable content is inside an iframe, be aware that changes to the CSS position of the ancestor iframe will reset the effects of these commands.

I have prepared a simplified test page that shows this solution in action.

How to simulate _moz_resizing in Chrome or Edge?

You can achieve this in chrome by wrapping the image with a div and adding this styles..

resize: both; 
overflow: auto; 

demo:
https://jsfiddle.net/anwar3606/d184oqfz/

JQuery UI

JQuery UI provides very good resizability functions and is very easy to use.
https://jqueryui.com/resizable/#default

Removing resize handlers on contentEditable div

It looks like I'll be able to work around this by adding a wrapper div and absolutely positioning the wrapper and then making the inner div contentEditable.

contenteditable: trigger event on image resize when using handles

You may observe the DOMAttrModified-event:

editableDivNode
  .addEventListener ('DOMAttrModified', 
                      function(e)
                      {
                        if(e.target.tagName=='IMG'
                            && e.target.getAttribute('_moz_resizing')  
                              && e.attrName=='style' 
                                && e.newValue.match(/width|height/))
                        {
                          //do something here but don't prompt the user
                        }
                      }, 
                      false);

Javascript Absolute vs. Relative URI using .execCommand('insertHTML', false, html);

Have you tried using 'insertImage' instead of 'insertHTML'?

Edit:
'insertImage' just takes the url of the image and creates an img tag based on that.

You can get the image after inserting it with jQuery like this:

 var img = $("img[src='imgUrl']");

with 'imgUrl' being the url of the image you add, and then add the needed attributes to that.

An example without using jQuery is here at line 123.

SharePoint Expandable Link Menu when Mouseover Image with Jquery

Instead of the img tags I would put divs into my html code and the images would be the background of my divs. I would put a select tag into each div with display: none as default for the select tags inside the divs. My divs would have a class attribute and on mouseover event I would change the display of the select in the div where the hover was triggered. When mouseout would happen I would change back the display of the inner div. Try to search on google for more information.

I hope this helps

---

Related Topics