Design Mode vs Preview Mode question

[Craig]

The application that I'm building is a document repository / content management system. I am using the editor for creating AND displaying a read-only verision of the documents. The issue I'm having now is that if the editor is in Preview Mode, the ribbon is disabled (there is functionality in it that we want available at all times... print, export to word, redirect to the full editor version of the page).  But if the editor is in Design Mode, any href's are not able to be clicked (they are treated as raw text).  I don't want users to be able to type into this editor, so I have it in Design Mode, but with enableEditing set to false. But having enableEditing turned off causes the context menu (where a user could normally follow a link from one of the selections) to not appear and they get the default windows context menu instead.

 

I'd really prefer to keep the ribbon (for visual consistency) and let it work as designed, as opposed to creating a series of buttons that appear on the top of the page.

 

Any suggestions on how to overcome this?

[Craig]

My ideal solution would be to have the Editor locked in PreviewMode, but with the Ribbon available.

[Rumen]

Hi Craig,

If you prefer keeping the editor in Design mode, you can open the links as shown in these articles:

• How do I make hyperlinks active in RadEditor 
• Open Link in a New Window When Clicked
• Open Link in a New Window on Double Click

If you prefer to keep some tools enabled in Preview mode check out this KB Enabling Print button in Preview mode.

I hope this helps! Keep me in touch.

Regards,
Rumen
Progress Telerik

[Craig]

Rumen,

The preference is definitely to have the editor in Preview mode, but to be able to enable the tools I need for the user.  However, setState isn't working for me (Favorite is a custom tool that I wrote so a user can flag a document to be viewed later).

"Unhandled exception at line 97, column 20 in http://localhost:51068/AspxForms/StandardViewer.aspx?actionType=draftDoc&_dc=1563537122230
0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'setState' occurred"

function OnClientLoad(editor, args)
{
   var mode = editor.get_mode();
   switch (mode)
   {
       case 1:
           //alert( "We are in Design mode");
           //do something
       break;
       case 2:
           //alert("We are in HTML mode");
       break;
       case 4:
           setTimeout(function()
           {
               var favTool = editor.getToolByName("Favorite");
               favTool.setState(0);
           }, 0);
           //alert( "We are in Preview mode");
           //do something
       break;
   }
}

[Rumen]

Hi Craig,

Have you tried the OnClientModeChange client event of RadEditor? It works on my side properly:

<telerik:RadEditor ID="RadEditor1" runat="server" OnClientModeChange="OnClientModeChange">
    <Tools>
        <telerik:EditorToolGroup>
            <telerik:EditorTool Name="Favorite" />
        </telerik:EditorToolGroup>
    </Tools>
</telerik:RadEditor>
<script>
    function OnClientModeChange(editor, args) {
        var mode = editor.get_mode();
        switch (mode) {

            case 1:
                //alert( "We are in Design mode");
                //do something
                break;
            case 2:
                //alert("We are in HTML mode");
                break;
            case 4:
                setTimeout(function () {
                            
                    var favTool = editor.getToolByName("Favorite");
                    favTool.setState(0);
                }, 0);
                //alert( "We are in Preview mode");
                //do something
                break;
        }
    }
</script>

Regards, Rumen
Progress Telerik

[Craig]

I tried that as well, but get the same error

[Craig]

Would it be affected since I am adding the custom tools from the code behind instead of the markup?  I did it that way since not all tool groups are available to all users so I have logic that decides when to add them (the Favorites tool is always there though).

[Craig]

The javascript is finding the tool.  It just isn't able to set the state.

[Rumen]

Hi there,

For your convenience I have attached my test project. Please use it as a base to proceed.

Regards, Rumen
Progress Telerik

[Craig]

Thank you... That actually tells me why it doesn't work for me... I forgot a piece of information... I am using:

 

ToolbarMode ="RibbonBar"

 

If I didn't use RibbonBar, your code works.  Unfortunately, my UI is built around the use of that RibbonBar.  Is there a way to accomplish it in a RibbonBar?  I'm sorry for not including that information earlier.

[Rumen]

You are welcome.

When using the RadRibbonBar, we need to use its Client-side API :)

Here you go:

 

<telerik:RadEditor ID="RadEditor1" runat="server" OnClientModeChange="OnClientModeChange" ToolbarMode="RibbonBar" EditModes="Preview">
    <Tools>
        <telerik:EditorToolGroup>
            <telerik:EditorTool Name="Favorite" />
        </telerik:EditorToolGroup>
    </Tools>
</telerik:RadEditor>
<script>
    function OnClientModeChange(editor, args) {
        var mode = editor.get_mode();
        switch (mode) {

            case 1:
                //alert( "We are in Design mode");
                //do something
                break;
            case 2:
                //alert("We are in HTML mode");
                break;
            case 4:
                setTimeout(function () {
                    var favTool = editor.getToolByName("Favorite");
                    favTool.set_enabled(true);
                }, 0);
                //alert( "We are in Preview mode");
                //do something
                break;
        }
    }
</script>

 

Regards, Rumen
Progress Telerik

[Craig]

That does enable the button, but it doesn't reach the listener.  Am I missing something?  It works as expected in Design mode.  In Preview mode, the alert is never reached (I just put that in there to test).

<script type="text/javascript">

    Telerik.Web.UI.Editor.CommandList["Favorite"] = function (commandName, editor, args)
    {
        alert('hello');
        favoriteTool.setOn(!isFavorite);
        isFavorite = !isFavorite;

        fireAjaxRequest("ToggleFavorite");
    }

</script>

[Rumen]

Hello,

To reach the listener, you need to enable the content area as shown below and disable the typing with code as shown below:

<telerik:RadEditor runat="server" OnClientModeChange="OnClientModeChange" OnClientCommandExecuting="OnClientCommandExecuting" ID="RadEditor1" EditModes="Preview" ToolbarMode="RibbonBar">
    <Content>some content</Content>
    <Tools>
        <telerik:EditorToolGroup>
            <telerik:EditorTool Name="Favorite" />
            <telerik:EditorTool Name="bold" />
        </telerik:EditorToolGroup>
    </Tools>
</telerik:RadEditor>
<script type="text/javascript">
    function OnClientModeChange(sender, args) {
        var mode = sender.get_mode();

        switch (mode) {
            case 1:
                //alert( "We are in Design mode");
                sender.detachEventHandler("onkeydown", myKeydownHandler);
                break;
            case 2:
                //alert("We are in HTML mode");
                break;
            case 4:
                setTimeout(function () {
                    MakeToolsAvailable(sender);
                }, 0);

                break;
        }
    }

    function MakeToolsAvailable(sender) {
        var editor = sender;
        editor.getToolByName('Favorite').set_enabled(true);
        sender.set_editable(true);

        sender.attachEventHandler("onkeydown", myKeydownHandler);

    }

    myKeydownHandler = function (e) {
        $telerik.cancelRawEvent(e);
    };

    function OnClientCommandExecuting(editor, args) {
        //The command name  
        var commandName = args.get_commandName();
        alert(commandName);
    }

    Telerik.Web.UI.Editor.CommandList["Favorite"] = function (commandName, editor, args) {
        alert("The Favorite command has been executed");
    };
</script>

Regards, Rumen
Progress Telerik

[Craig]

Agh... that does allow the listener to fire, but now any hyperlinks in the document don't work since it is editable (which is what started me down this whole exercise anyway. lol).

I'm really just after a View-Only version of the Editor that has a working ribbon.  Is that possible?  I know I can have the editor in Edit Mode, and block any input. The hyperlinks can't be clicked that way, but I can let users use the context-menu to follow them (not natural for a user, but it may be all we can do).

Any other suggestions?  Or am I stuck going with Edit Mode and forcing the user to use the Context Menus?

 

Either way, I really appreciate all of your help trying to get this working.  Thank you so much!

[Rumen]

Hi,

You can still right click in the Preview area on the link and choose open in a new window from the context menu.

Regards, Rumen
Progress Telerik

[Craig]

Yeah I was hoping to have a more natural way of following links for the users.  But your answers on my other question helped get me to the closest functionality to what I really wanted (Editor is in Design mode, reject onkeydown so they can't actually modify anything, remove all context menus except the one for following links).  Thanks for your help!

[Rumen]

I am glad that we managed to find a suitable solution for your scenario! 

Keep up the great work!

 

Regards, Rumen
Progress Telerik