Design Mode vs Preview Mode question

17 posts, 1 answers
  1. Craig
    Craig avatar
    26 posts
    Member since:
    Jan 2019

    Posted 17 Jul 2019 Link to this post

    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?

  2.
  3. Craig
    Craig avatar
    26 posts
    Member since:
    Jan 2019

    Posted 17 Jul 2019 in reply to Craig Link to this post

    My ideal solution would be to have the Editor locked in PreviewMode, but with the Ribbon available.
  5. Rumen
    Admin
    Rumen avatar
    14437 posts

    Posted 19 Jul 2019 Link to this post

    Hi Craig,

    If you prefer keeping the editor in Design mode, you can open the links as shown in these articles: 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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  7. Craig
    Craig avatar
    26 posts
    Member since:
    Jan 2019

    Posted 19 Jul 2019 in reply to Rumen Link to this post

    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;
       }
    }
  8.
  9. Rumen
    Admin
    Rumen avatar
    14437 posts

    Posted 19 Jul 2019 Link to this post

    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

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  11. Craig
    Craig avatar
    26 posts
    Member since:
    Jan 2019

    Posted 19 Jul 2019 in reply to Rumen Link to this post

    I tried that as well, but get the same error
  13. Craig
    Craig avatar
    26 posts
    Member since:
    Jan 2019

    Posted 19 Jul 2019 in reply to Craig Link to this post

    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).
  14.
  15. Craig
    Craig avatar
    26 posts
    Member since:
    Jan 2019

    Posted 19 Jul 2019 Link to this post

    The javascript is finding the tool.  It just isn't able to set the state.
  17. Rumen
    Admin
    Rumen avatar
    14437 posts

    Posted 19 Jul 2019 Link to this post

    Hi there,

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

    Regards, Rumen
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  19. Craig
    Craig avatar
    26 posts
    Member since:
    Jan 2019

    Posted 19 Jul 2019 in reply to Rumen Link to this post

    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.

  20.
  21. Rumen
    Admin
    Rumen avatar
    14437 posts

    Posted 19 Jul 2019 Link to this post

    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

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  23. Craig
    Craig avatar
    26 posts
    Member since:
    Jan 2019

    Posted 19 Jul 2019 in reply to Rumen Link to this post

    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>
  25. Rumen
    Admin
    Rumen avatar
    14437 posts

    Posted 19 Jul 2019 Link to this post

    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

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  26.
  27. Craig
    Craig avatar
    26 posts
    Member since:
    Jan 2019

    Posted 19 Jul 2019 in reply to Rumen Link to this post

    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!

  29. Answer
    Rumen
    Admin
    Rumen avatar
    14437 posts

    Posted 19 Jul 2019 Link to this post

    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

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  31. Craig
    Craig avatar
    26 posts
    Member since:
    Jan 2019

    Posted 19 Jul 2019 in reply to Rumen Link to this post

    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!
  32.
  33. Rumen
    Admin
    Rumen avatar
    14437 posts

    Posted 22 Jul 2019 Link to this post

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

    Keep up the great work!

     

    Regards, Rumen
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top