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

[Jonathan]

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
};

[Rumen]

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

[Jonathan]

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

 

[Rumen]

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