This is a migrated thread and some comments may be shown as answers.

[Solved] Paste with several RadEditor on the same web page

7 Answers 123 Views

Editor

This is a migrated thread and some comments may be shown as answers.

Steeve asked on 24 Dec 2013, 02:15 PM

Telerik-RadEditor-2013-12-24.png

Hi,

I want to use several RadEditor on my web page. I started using the solution 1 of this page:
http://www.telerik.com/support/kb/aspnet-ajax/editor/setting-hidden-radeditor-in-edit-mode-on-click-and-putting-it-in-non-editable-mode-onblur.aspx

It works fine if I set one Radeditor on the page, but if I add another RadEditor on the page, it does not work.

The reproduce the problem, I paste text in the first RadEditor (works fine), but if I paste the same text on the second control (without reloading the page), I meet a "Stack overflow". I'm using IE9.

My telerik version :
Telerik.Web.Design, 2013.1.220.40
Telerik.Web.UI, 2013.1.220.40
Telerik.Web.UI.Skins, 2013.1.220.40

I attach a picture of the result and a sample of my web page (see below).

Can you tell me what I am doing wrong??

Thank you

Steeve

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="_Test2.aspx.cs" Inherits="Web._Test2" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head id="Head1" runat="server">

<title>Untitled Page</title>

<meta http-equiv="X-UA-Compatible" content="IE=8"/>

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>

<div id="lContent" style="background-color: lightblue;">First RadEditor</div>

<div style="display:none" id="tContent">

<telerik:RadEditor runat="server" ID="RadEditor1" OnClientLoad="OnClientLoadMandate">

<Content></Content>

</telerik:RadEditor>

</div>

<br/><br/><br/>

<div id="div1" style="background-color: lightgray;">Second RadEditor</div>

<div style="display:none" id="div2">

<telerik:RadEditor runat="server" ID="RadEditor2" OnClientLoad="OnClientLoadProjectDesc">

<Content>RadEditor 2</Content>

</telerik:RadEditor>

</div>

<telerik:RadCodeBlock ID="radCodeBlock" runat="server">

<script type="text/javascript">

var lContent, tContent;

lContent = $get('lContent');

tContent = $get('tContent');

$addHandler(lContent, "click", lContent_Click);

var div1, div2;

div1 = $get('div1');

div2 = $get('div2');

$addHandler(div1, "click", div1_Click);

function OnClientLoadMandate(editor, args) {

var topZone = $get(editor.get_id() + "Top");

topZone.setAttribute("unselectable", "on");

topZone.setAttribute("MozUserSelect", "none");

var buttons = topZone.getElementsByTagName("*");

for (var i = 0; i < buttons.length; i++) {

var a = buttons[i];

a.setAttribute("unselectable", "on");

a.style.MozUserSelect = "none";

a.style.MozUserFocus = "none";

a.style.MozUserFocus = "ignore";

}

var element = document.all ? editor.get_document().body : editor.get_document();

$telerik.addExternalHandler(element, "blur", function(e)

{

var labelUpdated;

var editorContent = editor.get_html(true);

if (lContent.textContent == editorContent)

labelUpdated = false;

else

labelUpdated = true;

lContent.innerHTML = editorContent;

tContent.style.display = 'none';

lContent.style.display = '';

if (labelUpdated)

{

//alert('Updating... ' + editorContent);

}

});

}

function lContent_Click()

{

lContent.style.display = 'none';

tContent.style.display = '';

var editor = $find("<%=RadEditor1.ClientID%>"); //get a reference to RadEditor client object

editor.setFocus(); //set the focus on the the editor

editor.set_html(lContent.innerHTML);

}

function OnClientLoadProjectDesc(editor, args) {

var topZone = $get(editor.get_id() + "Top");

topZone.setAttribute("unselectable", "on");

topZone.setAttribute("MozUserSelect", "none");

var buttons = topZone.getElementsByTagName("*");

for (var i = 0; i < buttons.length; i++) {

var a = buttons[i];

a.setAttribute("unselectable", "on");

a.style.MozUserSelect = "none";

a.style.MozUserFocus = "none";

a.style.MozUserFocus = "ignore";

}

var element = document.all ? editor.get_document().body : editor.get_document();

$telerik.addExternalHandler(element, "blur", function (e) {

var labelUpdated;

var editorContent = editor.get_html(true);

if (div1.textContent == editorContent)

labelUpdated = false;

else

labelUpdated = true;

div1.innerHTML = editorContent;

div2.style.display = 'none';

div1.style.display = '';

if (labelUpdated) {

//alert('Updating... ' + editorContent);

}

});

}

function div1_Click() {

div1.style.display = 'none';

div2.style.display = '';

var editor = $find("<%=RadEditor2.ClientID%>"); //get a reference to RadEditor client object

editor.setFocus(); //set the focus on the the editor

editor.set_html(div1.innerHTML);

}

</script>

</telerik:RadCodeBlock>

</form>

</body>

</html>

7 Answers, 1 is accepted

answered on 03 Jan 2014, 02:26 PM

OnPageLoad.png

OnClickOnFirstDiv.png

SetSizeOnClientLoad.png

Hi,

I tried with the version 2013.3.1217.40 and it seems to work. I did not encounter the stack overflow error.

But, I have another problem. When I click on the div to show the editor, I am not able to set the height correctly. The first editor go over the second. The extra seems to have the same height than my toobar. I let you screenshots and my code to try to explain this.

I did another test... In the OnClientLoad function, if I set the size of the editor (editor.setSize(856, 90)) and I remove the width-height property. The height is set to the toolbar. See my third screenshot.

Thank you for your help and have a nice day

Steeve

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="_Test2.aspx.cs" Inherits="Web._Test2" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head id="Head1" runat="server">

<title>Untitled Page</title>

<meta http-equiv="X-UA-Compatible" content="IE=8"/>

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>

<br/><br/><br/>

<div id="lContent" style="background-color: lightblue;">First RadEditor</div>

<div style="display:none" id="tContent">

<telerik:RadEditor runat="server" ID="RadEditor1" OnClientLoad="OnClientLoadMandate" ToolbarMode="Default" EditModes="Design" Width="856" Height="90" >

<Tools>

<telerik:EditorToolGroup>

<telerik:EditorTool Name="AjaxSpellCheck" Enabled="true" ShowIcon="true" />

<telerik:EditorTool Name="Cut" />

<telerik:EditorTool Name="Copy" />

<telerik:EditorTool Name="Paste" />

<telerik:EditorTool Name="Italic" />

<telerik:EditorTool Name="InsertSymbol" />

<telerik:EditorTool Name="Subscript" />

<telerik:EditorTool Name="Superscript" />

<telerik:EditorTool Name="Undo" />

<telerik:EditorTool Name="Redo" />

</telerik:EditorToolGroup>

</Tools>

<CssFiles>

<telerik:EditorCssFile Value="~/Styles/RadEditor.css" />

</CssFiles>

</telerik:RadEditor>

</div>

<br/>

<div id="div1" style="background-color: lightgray;">Second RadEditor</div>

<div style="display:none" id="div2">

<telerik:RadEditor runat="server" ID="RadEditor2" OnClientLoad="OnClientLoadProjectDesc">

<Content>RadEditor 2</Content>

</telerik:RadEditor>

</div>

<telerik:RadCodeBlock ID="radCodeBlock" runat="server">

<script type="text/javascript">

var lContent, tContent;

lContent = $get('lContent');

tContent = $get('tContent');

$addHandler(lContent, "click", lContent_Click);

var div1, div2;

div1 = $get('div1');

div2 = $get('div2');

$addHandler(div1, "click", div1_Click);

function OnClientLoadMandate(editor, args) {

var topZone = $get(editor.get_id() + "Top");

topZone.setAttribute("unselectable", "on");

topZone.setAttribute("MozUserSelect", "none");

var buttons = topZone.getElementsByTagName("*");

for (var i = 0; i < buttons.length; i++) {

var a = buttons[i];

a.setAttribute("unselectable", "on");

a.style.MozUserSelect = "none";

a.style.MozUserFocus = "none";

a.style.MozUserFocus = "ignore";

}

//editor.setSize(856, 90);

var element = document.all ? editor.get_document().body : editor.get_document();

$telerik.addExternalHandler(element, "blur", function(e)

{

var labelUpdated;

var editorContent = editor.get_html(true);

if (lContent.textContent == editorContent)

labelUpdated = false;

else

labelUpdated = true;

lContent.innerHTML = editorContent;

tContent.style.display = 'none';

lContent.style.display = '';

if (labelUpdated)

{

//alert('Updating... ' + editorContent);

}

});

}

function lContent_Click()

{

lContent.style.display = 'none';

tContent.style.display = '';

var editor = $find("<%=RadEditor1.ClientID%>"); //get a reference to RadEditor client object

editor.setFocus(); //set the focus on the the editor

editor.set_html(lContent.innerHTML);

}

function OnClientLoadProjectDesc(editor, args) {

var topZone = $get(editor.get_id() + "Top");

topZone.setAttribute("unselectable", "on");

topZone.setAttribute("MozUserSelect", "none");

var buttons = topZone.getElementsByTagName("*");

for (var i = 0; i < buttons.length; i++) {

var a = buttons[i];

a.setAttribute("unselectable", "on");

a.style.MozUserSelect = "none";

a.style.MozUserFocus = "none";

a.style.MozUserFocus = "ignore";

}

var element = document.all ? editor.get_document().body : editor.get_document();

$telerik.addExternalHandler(element, "blur", function (e) {

var labelUpdated;

var editorContent = editor.get_html(true);

if (div1.textContent == editorContent)

labelUpdated = false;

else

labelUpdated = true;

div1.innerHTML = editorContent;

div2.style.display = 'none';

div1.style.display = '';

if (labelUpdated) {

//alert('Updating... ' + editorContent);

}

});

}

function div1_Click() {

div1.style.display = 'none';

div2.style.display = '';

var editor = $find("<%=RadEditor2.ClientID%>"); //get a reference to RadEditor client object

editor.setFocus(); //set the focus on the the editor

editor.set_html(div1.innerHTML);

}

</script>

</telerik:RadCodeBlock>

</form>

</body>

</html>

answered on 07 Jan 2014, 12:51 PM

RadEditor-test.zip

Hi Steeve,

I have tried to reproduce the unexpected behavior but to no avail. You can watch a short video with the test in the attached archive and then tell me what I am missing. It may be possible that there are some global styles on your page that affect the proper appearance of the RadEditors on your page. For example the file "~/Styles/RadEditor.css" that is loaded in the first RadEditor. If that is so you can try removing all the styles and if that fixes the issue then start turning one by one the styles until you find and fix the problematic one. Such an example is illustrated in Distorted Appearance help article.

If that is not the case I can suggest that you try to reproduce the issue with the attached VS example and then send it back to us, so that we can make an investigation locally.

Regards,
Danail Vasilev
Telerik

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.

answered on 07 Jan 2014, 09:09 PM

01---PageLoad.png

02---First-Click.png

03---Add-empty-line.png

04---On-Close.png

05---Second-Click.png

Hi Danail,

I think that I found something interesting and I would like to share it with you to know if I am on the good way...

In load and click function of the editor, I added instruction to set the height of the editor and the Content Area. It works well, but I meet a problem... If the text in div tag is "higher" than the height of the original size of the editor and I click on the div to show the editor, the AutoResizeHeight does not work and the size will be the original size.

If I add or remove line in text, the AutoResizeHeight works. My code is below. Can you help me to find a solution??

I have add screenshots inorder to illustrate my problem. I'm still using IE9.

Thank you

Steeve

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="_Test2.aspx.cs" Inherits="Web._Test2" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head id="Head1" runat="server">

<title>Untitled Page</title>

<meta http-equiv="X-UA-Compatible" content="IE=8"/>

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>

<br/><br/><br/>

<div id="lContent" style="background-color: lightblue; min-height: 30px">First RadEditor<br/>First RadEditor<br/>First RadEditor<br/>First RadEditor<br/> END</div>

<div style="display:none" id="tContent">

<telerik:RadEditor runat="server" ID="RadEditor1" OnClientLoad="OnClientLoadMandate" ToolbarMode="Default" EditModes="Design" Height="50" Width="856" AutoResizeHeight="True" >

<Tools>

<telerik:EditorToolGroup>

<telerik:EditorTool Name="AjaxSpellCheck" Enabled="true" ShowIcon="true" />

<telerik:EditorTool Name="Cut" />

<telerik:EditorTool Name="Copy" />

<telerik:EditorTool Name="Paste" />

<telerik:EditorTool Name="Italic" />

<telerik:EditorTool Name="InsertSymbol" />

<telerik:EditorTool Name="Subscript" />

<telerik:EditorTool Name="Superscript" />

<telerik:EditorTool Name="Undo" />

<telerik:EditorTool Name="Redo" />

</telerik:EditorToolGroup>

</Tools>

</telerik:RadEditor>

</div>

<br/>

<div id="div1" style="background-color: lightgray;">Second RadEditor</div>

<div style="display:none" id="div2">

<telerik:RadEditor runat="server" ID="RadEditor2" OnClientLoad="OnClientLoadProjectDesc">

<Content>RadEditor 2</Content>

</telerik:RadEditor>

</div>

<telerik:RadCodeBlock ID="radCodeBlock" runat="server">

<script type="text/javascript">

var lContent, tContent;

lContent = $get('lContent');

tContent = $get('tContent');

$addHandler(lContent, "click", lContent_Click);

var div1, div2;

div1 = $get('div1');

div2 = $get('div2');

$addHandler(div1, "click", div1_Click);

function OnClientLoadMandate(editor, args) {

var topZone = $get(editor.get_id() + "Top");

topZone.setAttribute("unselectable", "on");

topZone.setAttribute("MozUserSelect", "none");

var buttons = topZone.getElementsByTagName("*");

for (var i = 0; i < buttons.length; i++) {

var a = buttons[i];

a.setAttribute("unselectable", "on");

a.style.MozUserSelect = "none";

a.style.MozUserFocus = "none";

a.style.MozUserFocus = "ignore";

}

//editor.setSize(856, 90);

var element = document.all ? editor.get_document().body : editor.get_document();

$telerik.addExternalHandler(element, "blur", function(e)

{

var labelUpdated;

var editorContent = editor.get_html(true);

if (lContent.textContent == editorContent)

labelUpdated = false;

else

labelUpdated = true;

lContent.innerHTML = editorContent;

tContent.style.display = 'none';

lContent.style.display = '';

if (labelUpdated)

{

//alert('Updating... ' + editorContent);

}

});

// ==== New Tests ====

var height = parseInt(editor.get_element().style.height.replace("px", "")) || 0;

if (height > 0) {

editor.get_contentAreaElement().style.height = height + "px";

var elem = editor.get_element();

elem.style.minHeight = height + 28;

}

// ==== End New Tests ====

}

function lContent_Click()

{

lContent.style.display = 'none';

tContent.style.display = '';

var editor = $find("<%=RadEditor1.ClientID%>"); //get a reference to RadEditor client object

editor.setFocus(); //set the focus on the the editor

editor.set_html(lContent.innerHTML);

// ==== New Tests ====

var height = parseInt(editor.get_element().style.height.replace("px", "")) || 0;

if (height > 0) {

editor.get_contentAreaElement().style.height = height + "px";

editor.setSize(editor.get_element().style.width, height);

}

// ==== End New Tests ====

}

function OnClientLoadProjectDesc(editor, args) {

var topZone = $get(editor.get_id() + "Top");

topZone.setAttribute("unselectable", "on");

topZone.setAttribute("MozUserSelect", "none");

var buttons = topZone.getElementsByTagName("*");

for (var i = 0; i < buttons.length; i++) {

var a = buttons[i];

a.setAttribute("unselectable", "on");

a.style.MozUserSelect = "none";

a.style.MozUserFocus = "none";

a.style.MozUserFocus = "ignore";

}

var element = document.all ? editor.get_document().body : editor.get_document();

$telerik.addExternalHandler(element, "blur", function (e) {

var labelUpdated;

var editorContent = editor.get_html(true);

if (div1.textContent == editorContent)

labelUpdated = false;

else

labelUpdated = true;

div1.innerHTML = editorContent;

div2.style.display = 'none';

div1.style.display = '';

if (labelUpdated) {

//alert('Updating... ' + editorContent);

}

});

}

function div1_Click() {

div1.style.display = 'none';

div2.style.display = '';

var editor = $find("<%=RadEditor2.ClientID%>"); //get a reference to RadEditor client object

editor.setFocus(); //set the focus on the the editor

editor.set_html(div1.innerHTML);

}

</script>

</telerik:RadCodeBlock>

</form>

</body>

</html>

answered on 08 Jan 2014, 04:34 PM

Hello Steeve,

Thank you for the additional information.

I have successfully reproduced the mentioned issue and it stems from the code optimization that have been made to the resizing of the RadEditor. In order to handle it you can simply execute the editor's repaint() method after it is displayed and before calling the editor.set_html() method. For example:

function lContent_Click() {

lContent.style.display = 'none';

tContent.style.display = '';

var editor = $find("<%=RadEditor1.ClientID%>"); //get a reference to RadEditor client object

editor.setFocus(); //set the focus on the the editor

editor.repaint();

editor.set_html(lContent.innerHTML);

}

Regards,
Danail Vasilev
Telerik