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

Putting RadEditor in ReadOnly mode via Client-Side Script?

9 Answers 434 Views
Editor
This is a migrated thread and some comments may be shown as answers.
carlpro
Top achievements
Rank 1
carlpro asked on 13 Mar 2008, 11:59 PM
I need to put the RadEditor into 'read-only' mode using client-side script, where both the Toolbars and the Content area are disabled, but are still viewable.

I've tried the following code in Javascript, but the Radeditor's content area is still editable.

    document.body.editor.enableEditing =

false;
    document.body.editor.set_editable(
false);
    document.body.editor.EnableContentArea =
false;
    document.body.editor.get_ContentArea().contentEditable =
'false';

Suggestions?

9 Answers, 1 is accepted

Sort by
0
Tervel
Telerik team
answered on 14 Mar 2008, 08:42 AM
Hello carlpro,

You were mostly on the right track - but it must be noted that enableEditing is a method, not a property.
This method takes a second argument that allows for fine-tuning what needs to be disabled/enabled.

Here is how to implement toggle enable/disable functionality

<

script>
var
toggle = true;
function toggleEditing()
{
    
var editor = $find("RadEditor1");
    toggle = !toggle;
    editor.enableEditing(toggle, Telerik.Web.UI.EditingOptions.All); 
    editor.get_ContentArea().contentEditable = toggle;
}
</script>

<

button onclick="toggleEditing(); return false;">Toggle editing mode </button>

For the coming editor update we plan to make the enableEditing method a bit easier to use - it will not require a second argument, and you would not need to set contentEditable explicitly either.


Best regards,
Tervel
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
0
carlpro
Top achievements
Rank 1
answered on 17 Mar 2008, 07:50 PM
Thanks!  That code works only if you have the following line in the control's Load event.

this.Editor.Modules.Clear(); 

if you don't have this line, then I get the following runtime error:

_80.setToolState is not a function  
enableEditing(true, 63, undefined)ScriptResource.ax... (line 7620)  
set_disableEditor(false)FixedEditor.js (line 284)  
showEditor("message_new", function())Forums.debug.js (line 1774)  
doQuote(Object rawEvent=Event click altKey=false button=0, Object Id=ec6a4fe0-234e-408d-a444-23aaa6166fcc)ScriptResource.ax... (line 758)  
quote(Object rawEvent=Event click altKey=false button=0, Object Id=ec6a4fe0-234e-408d-a444-23aaa6166fcc)ScriptResource.ax... (line 644)  
onMessageAction(Object, Object _action=quote _object=Object _event=Object)ScriptResource.ax... (line 506)  
(no name)()ScriptResource.ax... (line 61)  
(no name)(Object, Object _action=quote _object=Object _event=Object)ScriptResource.ax... (line 2883)  
onMessageAction(Object, Object _action=quote _object=Object _event=Object)ScriptResource.ax... (line 1230)  
(no name)()ScriptResource.ax... (line 61)  
(no name)(Object, Object _action=quote _object=Object _event=Object)ScriptResource.ax... (line 2883)  
messageAction("quote", Object rawEvent=Event click altKey=false button=0)ScriptResource.ax... (line 1310)  
onButtonAction(Object _element=div.rndButton _data=quote _enabled=true, Object _event=Object _data=quote)ScriptResource.ax... (line 1770)  
(no name)()ScriptResource.ax... (line 61)  
(no name)(Object _element=div.rndButton _data=quote _enabled=true, Object _event=Object _data=quote)ScriptResource.ax... (line 2883)  
clicked(Object rawEvent=Event click altKey=false button=0)Forums.debug.js (line 1022)  
(no name)()ScriptResource.ax... (line 61)  
browserHandler(click clientX=0clientY=0)ScriptResource.ax... (line 3477)  
[Break on this error] _80.setToolState(null,Telerik.Web.UI.Editor.CommandStates.Off); 


Thank-you!
0
Arthur
Top achievements
Rank 2
answered on 06 Jan 2009, 10:34 AM
Hello,

I am trying to do the same thing. Is this approach applicable to RadControls for ASPNET AJAX Q1 2008 (version 2008.1.619.20)? I tried it out but I am getting this error: "'Telerik.Web.UI.EditingOptions.All' is null or not an object." If not can you suggest any work around to make this work on my version?

Thanks in advance.

Regards,
Arthur
0
Tervel
Telerik team
answered on 06 Jan 2009, 11:54 AM
Hi Arthur,

The version 2008.1.619.20 does feature the client-side enum Telerik.Web.UI.EditingOptions.All - and the code posted in this tread should work fine.

FYI, in subsequent editor versions you can even simplify the code to not explicitly provide a second argument.
Here is a slightly changed/updated version of the same thing:
<script> 
var toggle = true
function toggleEditing() 
    var editor = $find("<%=RadEditor1.ClientID%>"); 
    toggle = !toggle; 
    editor.enableEditing(toggle);  
    editor.set_editable(toggle);     
</script> 

If you experience a problem with the version you are using, we are not sure where the problem might be, and we suggest you open a support ticket and send us a fully runnable project for us to test.
 

Kind regards,
Tervel
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Arthur
Top achievements
Rank 2
answered on 07 Jan 2009, 11:11 AM
Hi Tervel,

   Thank you for the reply. I created a new project and tried to make this approach work, and it did. Unfortunately, this is not the behavior that I was trying to do. I totally misunderstood what carlpro was trying to do.

   Here is my real question. Is it possible to set the Enabled property of the RadEditor to true or false by using only javascript? In this demo, the property was set in the code behind. The effect is that the tollbars are not just disabled but hidden, as well as the border of the editor. Is it possible to do this by client-side? As much as possible, we do not want to use another control that will pass the values to the RadEditor (and vice versa) when switching between view and edit modes (just like in this example). We are hoping that this can be done using the RadEditor only just like in the demo.

Thanks in advance.

Regards,
Arthur
0
Tervel
Telerik team
answered on 07 Jan 2009, 02:02 PM
Hi Arthur,

Thank you for the additional clarifications.

No, it is not possible to [easily] make the editor re-render as if its Enabled property was set to false using client-code.

You have two options to achieve what you need:

1. Use AJAX. Put the editor in <asp:UpdatePanel> do a partial update, and set the Enabled to false on the server. End result is what you need, yet this is not a pure client-side solution of course.

2. Use a DIV hidden element which you should insert next to the RadEditor. When you want to show the editor disabled you will need to hide the editor and transfer its content to the DIV, and show the DIV - all that can be easily accomplished with the editor client-side API, e.g.

//Hide/Show
editor.set_visible(true/false);

//Get html
editor.get_html(true);



Sincerely yours,
Tervel
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Arthur
Top achievements
Rank 2
answered on 08 Jan 2009, 11:23 AM
Hi Tervel,

   I guess we will just go with option two. I have tried it and it is working quite well. Thanks for the help.


Regards,
Arthur
0
Haitao
Top achievements
Rank 1
answered on 26 Aug 2013, 09:04 PM
Hi,

I am trying to enable/disable multiple RadEditors on a single page based on which one is clicked. I want only 1 RadEditor is enabled at a time. So I need to enable it, disable it. is it possible? When I tried the above javascript:

    toggle = !toggle;
    editor.enableEditing(toggle);
    editor.get_ContentArea().contentEditable = toggle;

I got the error: editor.enableEditing(toggle) is not a function.

Can anybody help?

PS. This only happens when  ContentAreaMode="Div".
Thanks!

Here is my aspx:

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

    <h4>Overview
    </h4>
<div class="SKEditorWrapper" >  
    <telerik:RadEditor ID="RadEditor1" runat="server"  Enabled="true">    
    <content>
 This is <b>editable</b> body 1.  
    </content>
    </telerik:RadEditor>
    <asp:LinkButton ID="LinkButton1" class="mybutton" runat="server">LinkButton</asp:LinkButton>
</div>
 

    <h4>Background
    </h4>
<div class="SKEditorWrapper" >  
    <telerik:RadEditor ID="RadEditor2" runat="server"  Enabled="true">    
    <content>
        This is <u>editable</u> body 2.  
    </content>
    </telerik:RadEditor>
    <asp:LinkButton ID="LinkButton2" class="mybutton" runat="server">LinkButton</asp:LinkButton>
</div>
 

<h4>Notes:</h4>
<div class="SKEditorWrapper" >  
    <telerik:RadEditor ID="RadEditor3" runat="server" ContentAreaMode="Div" Enabled="true" >    
    <content>
        This is <i>editable</i> body 3.  
    </content>
    </telerik:RadEditor>
    <asp:LinkButton ID="LinkButton3" class="mybutton" runat="server">LinkButton</asp:LinkButton>
</div>

<p id="info">
</p>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
        var toggle = true;
$(document).ready(function(){
    $(".SKEditorWrapper").click(function () {
        var editor = $(this).find('[id*="RadEditor"]');
        if (editor) {
            toggle = !toggle;
            editor.enableEditing(toggle);
            editor.get_ContentArea().contentEditable = toggle;
            editor.css("background-color","red");
        }
        $("#info").html("id=" + editor.attr('id')+"<br/>"+editor.text);
    })
})
</script>
0
Ianko
Telerik team
answered on 29 Aug 2013, 01:58 PM
Hi,

I tried the described issue and I can assure you that the enableEditing() method of the editor is working as expected.

Could you please follow this example custom code for your project:
<telerik:RadEditor runat="server" ID="RadEditor1"
    ContentAreaMode="Div">
</telerik:RadEditor>
<telerik:RadButton runat="server" ID="button1" Text="Disable editor"
    OnClientClicked="OnClientClicked"
    AutoPostBack="false"></telerik:RadButton>
<script type="text/javascript">
    function OnClientClicked(sender, args) {
        var editor = $find("<%=RadEditor1.ClientID%>");
        var toggle = confirm("Disable editor?");
        editor.enableEditing(!toggle);
    }
</script>

Let me know if the sample above does not help you for your case.

Regards,
Ianko
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.
Tags
Editor
Asked by
carlpro
Top achievements
Rank 1
Answers by
Tervel
Telerik team
carlpro
Top achievements
Rank 1
Arthur
Top achievements
Rank 2
Haitao
Top achievements
Rank 1
Ianko
Telerik team
Share this question
or