Commands for custom tools not running when enabled in preview mode.

4 posts, 0 answers
  1. Jonathan
    Jonathan avatar
    3 posts
    Member since:
    May 2018

    Posted 30 May 2018 Link to this post

    We have a few custom tools added into the editor that we've decided need to be enabled while in preview mode.

    Using the steps here, we've had that working for a while now. Recently though we updated to version 2018.2.516.45, and while the buttons still enable they no longer function while in preview mode. They work fine in both other modes, and they're not disabled (at least their state is set to 0).

    We're setting a timeout to make the tools available after the page finishes initializing:

    function OnClientModeChange(sender, args) {
        setTimeout(function () { MakeToolsAvailable(sender) }, 500);
    };

     

    And in the timeout we set the state of each of the tools to 0:

    function MakeToolsAvailable(sender) {
        var editor = sender;
        editor.getToolByName('example').setState(0);
        // etc
    }

     

    Both of these are working fine as evidenced by the buttons looking available and the sanity check test I ran by putting console.logs in them. This last bit is the part that breaks.

    Telerik.Web.UI.Editor.CommandList["example"] = function (commandName, editor, args) {
         // Everything here runs fine in design mode, but not in preview mode
    };

  2. Rumen
    Admin
    Rumen avatar
    14106 posts

    Posted 01 Jun 2018 Link to this post

    Hello Jonathan,

    Please have in mind that the content area, the commands related to content editing and the toolbar are disabled on purpose in Preview mode. 

    Here is an example how to enable the custom command in Preview mode:


    <telerik:RadEditor runat="server" OnClientModeChange="OnClientModeChange" OnClientCommandExecuting="OnClientCommandExecuting" ID="RadEditor1">
        <Tools>
            <telerik:EditorToolGroup>
                <telerik:EditorTool Name="example" />
                <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.get_contentArea().setAttribute("contentEditable", "true");
                    break;
                case 2:
                    //alert("We are in HTML mode");
                    break;
                case 4:
                    setTimeout(function () {
                        // debugger
                        MakeToolsAvailable(sender);
                    }, 0);
     
                    break;
            }
        }
     
        function MakeToolsAvailable(sender) {
            var editor = sender;
            sender.set_editable(true);
            sender.get_contentArea().setAttribute("contentEditable", "false");
            editor.getToolByName('example').setState(0);
        }
     
        function OnClientCommandExecuting(editor, args) {
            //The command name   
            var commandName = args.get_commandName();
            console.log(commandName);
        }
     
        Telerik.Web.UI.Editor.CommandList["example"] = function (commandName, editor, args) {
            // Everything here runs fine in design mode, but not in preview mode
            console.log("The example command has been executed");
        };
    </script>


    Best regards,
    Rumen
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Jonathan
    Jonathan avatar
    3 posts
    Member since:
    May 2018

    Posted 01 Jun 2018 Link to this post

    Hi Rumen,

    Thank you for your reply. We understand that preview mode is meant for reading only, the tools we're trying to enable are custom tools meant for printing, distributing, and navigating between "files" to be read.

    The solution you sent works great in Chrome and Edge, but in Internet Explorer setting "contentEditable" to false isn't preventing the user from editing the text content being displayed. I logged the value of the attribute to the console to be sure, and it is getting set in IE, it's just not actually stopping me from typing.

    I appreciate your help with this.

    Thanks again,

    Jonathan

     

  4. Rumen
    Admin
    Rumen avatar
    14106 posts

    Posted 04 Jun 2018 Link to this post

    Hi Jonathan,

    Since the command execution relies on that the content area is editable in IE, I would propose to disable the typing instead of disabling the whole content area in Preview mode and to restoring it in Design mode:

    <telerik:RadEditor runat="server" OnClientModeChange="OnClientModeChange" OnClientCommandExecuting="OnClientCommandExecuting" ID="RadEditor1">
        <Content>some content</Content>
        <Tools>
            <telerik:EditorToolGroup>
                <telerik:EditorTool Name="example" />
                <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 () {
                        // debugger
                        MakeToolsAvailable(sender);
                    }, 0);
      
                    break;
            }
        }
      
        function MakeToolsAvailable(sender) {
            var editor = sender;
            editor.getToolByName('example').setState(0);
            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();
            console.log(commandName);
        }
      
        Telerik.Web.UI.Editor.CommandList["example"] = function (commandName, editor, args) {
            // Everything here runs fine in design mode, but not in preview mode
            console.log("The example command has been executed");
        };
    </script>


    Regards,
    Rumen
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top