Disable Resize option for divs in Radeditor (WYSWYG)

722 Views Asked by At

RadEditor version 7.3.3.0

I am using radeditor from telerik to give editing option for creating and modifying emails.

editor contents are created in <tr> and <td> formats. each td can have div and other dom inside it.

It appears to us that resize options are provided for all divs in wyswyg editor when editing is done in firefox. whereas it is not there in other browsers. How can i disable the resizing option for firefox.

In Firefox:

enter image description here

In Chrome:

enter image description here

1

There are 1 best solutions below

0
On

This comes from the browser's rich text editing engine and I do not think you can stop it.

Try adding the same HTML in a simple editable iframe to test it. Here is a simple page that you can use for that:

<body onload="SetEditable()">
<b>Set your original HTML content here:</b><br />
<textarea id="htmlArea" style="width: 783px; height: 189px"></textarea>
<br />
<input type="button" onclick="CreateHtml();return false;" value="Set Content in the IFRAME">
<br />

<b>Editable IFRAME element:</b>
<br />
<iframe
src="javascript:void(0)"
id="editor" style="width: 774px; height: 489px;border: 3px solid red;"></iframe>
<input type="button" onclick="ShowIFRAMEHTML();return false;" value="Show IFRAME HTML">
<br />

<b>HTML Mode of the IFRAME:</b>
<br />
<textarea id="htmlMode" style="width: 783px; height: 313px"></textarea>


    <script type="text/javascript">
var editor1 = document.getElementById("editor"); //reference to the IFRAME element
var htmlArea1 = document.getElementById("htmlArea"); //reference to the HTML area in which we put the content
var htmlMode = document.getElementById("htmlMode"); //reference to the HTML area that displays the IFRAME content
var oDocument = editor1.contentWindow.document;

var sMarkup = "<html><head><title>New Document</title></head>" + 
              "<body contenteditable=true style='overflow:scroll;margin:0px;padding:0px;height:100%'>" + 
              "&nbsp;</body></html>";

function SetEditable()
{
    oDocument.open();
    oDocument.write(sMarkup);
    oDocument.close();      
    oDocument["designMode"] = "on";     
}
function CreateHtml()
{
    oDocument.body.innerHTML = htmlArea1.value;
    htmlMode.value = oDocument.body.innerHTML;
}
function ShowIFRAMEHTML()
{
    alert(oDocument.body.innerHTML);
}

</script>