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

[Solved] Telerik RadEditor SharePoint (5.4.1.0)

5 Answers 47 Views

RadEditor

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

This question is locked. New answers and comments are not allowed.

5 Answers, 1 is accepted

answered on 18 Nov 2009, 02:09 PM

Hi Stanimir

Thanks for your swift answer. :-)

Im having some problems getting this to work.

If i paste this code into a normal html file:

<div contenteditable="false" unselectable="on">Non Editable AREA

<div contenteditable="true" unselectable="off">Editable REGION... </div>

Non Editable AREA </div>

<span style="-moz-user-select: none">Hello, World! </span>

It works as expected. But if i paste it into the RadEditor's html, none of the text can be edited in Firefox.

Can you get it to work in FireFox?
And if so, can you show me the html markup.

br. Jakob

answered on 23 Nov 2009, 02:59 PM

editableiframe.zip

Hi Jakob,

The functionality is a browser behavior and it behaves differently in the IE and FF browsers.
The RadEditor content area is a editable IFRAME. If you manage to achieve this in a sample editable IFRAME page, I will be able to help you integrate it in the RadEditor.

I attached a simple sample page which you can use for your test.

Greetings,
Stanimir
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

answered on 06 Jan 2010, 09:36 AM

Hi Stanimir
Now we have found a solution witch works in IE 6,7,8.
So, if you would please help integration this function in the editor.

Creat a html file whit this content.

<html>
<head>
    <title>IFRAME test</title>
</head>
<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>
    <br />

    <b>HTML Mode of the IFRAME:</b>
    <br />
    <textarea id="htmlMode" style="width: 783px; height: 313px"></textarea>
    <input type="button" onclick="ShowIFRAMEHTML();return false;" value="Show IFRAME HTML">

        <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 style='overflow:scroll;margin:0px;padding:0px;height:100%' contentEditable='false'>" +
                  " </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>

</body>
</html>

Run the html file, and paste the fowling into the top box (Set your original HTML content here) and click the button (Set Content in the IFRAME).

locked
<div contentEditable="true" unselectable="off">Edit here</div>
locked

Now I cannot edit the words “locked”, but the rest I edible.

Thanks for your help :-)

Br
Jakob

answered on 12 Jan 2010, 01:38 PM

Hello Jakob,
In order to achieve the desired functionality follow these steps.
1. Add the following code to the respective ConfigFile.xml or ListConfigFile.xml, which are located in the /Program Files/Common Files/Microsoft Shared/web server extensions/wpresources/RadEditorSharePoint/5.x.x.0__1f131a624888eeed/Resources/ folder.

<property name="OnClientLoad">OnClientLoad</property>

2. Define the following javascript method in the end of MOSSEditorTools.js, which is located in the mentioned above location.

function OnClientLoad(editor, args)

{

var doc = editor.get_document();

var body = doc.body;

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

body.setAttribute("contentEditable", "" + false);

}

I hope this helps.

Sincerely yours,
Stanimir
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.