Indent/Outdent are flawed

[David]

I have a problem -- and a bone to pick.

First of all, I don't recall reading about a change to the Indent/Outdent behaviour in any of the release notes over the last few years. I have 10's of customers who have edited 10's of thousands of pages of content that all relay on the blockquote method of indentation. Now the editor doesn't support it. This is frustrating to no end.

Secondly, your current method is flawed. If I indent and then create a new paragraph, the next paragraph caries on the same indent level. This is great for persisting classes and other formatting options, but unexpected for an indentation.

The example code provided here (http://www.telerik.com/forums/blockquote-for-indent-setting) does not stand up to testing either. If the blockquotes are in a div or table cell, then the HTML gets jammed; not to mention that the example code adds the style AND the blockquote element.

It would have been awesome if you had given us an option (e.g. the newline settings).

[Ianko]

Hi David,

I am sorry to hear that you are disappointed from the new behavior of the block commands.

Firstly I would like to inform that the mentioned improvement has been announced in the release notes of the 2013 Q2 version. You can examine them by following this link http://www.telerik.com/support/whats-new/aspnet-ajax/release-history/q2-2013-version-2013-2-611, under Editor -> Changed section. You can find there an item titled "The Indent and Outdent commands produce consistent content in all browsers".

Also we have published an article (http://www.telerik.com/help/aspnet-ajax/editor-inline-and-block-commands-behavior-change.html), which provides more information about why this has been changed and how the old behavior can be brought back. I hope you will find all the needed information in these material and change the undesired behavior.

About the mentioned indentation inheritance, you are correct that this happens. After invoking the Indent command the new paragraphs, inserted by pressing enter are also indented. As you will see in the provided help article, this is due to many request to improve the RadEditor text editing experience to be more consistent and close to the user experience from desktop rich text editors. You can test the same scenario with e.g. MS Word and the same result will appear. You can see my testing in MS Word by reviewing this screencast.

The mentioned forum thread provides an approach for using blockquote elements instead of the new default indent behavior. Note that this is not a firmly provided approach but only a suggestion, further testing and implementation should be done according to the application requirements.

While on this matter, I would like to inform you that the RadEditor control is designed to be an XHTML editor and as one, every correct and valid HTML tag/element is supported and can be used to format the content. This is why we provide the ability to implement custom commands/tools which can trigger any functionality that fits additional requirements or specific design decisions. More information aboutbuilding custom tools is provided in this online example http://demos.telerik.com/aspnet-ajax/editor/examples/customtools/defaultcs.aspx

If you desire to retain the new behavior of the block commands and implement custom tools for Custom Indent/Outdent commands you can follow this example:

<telerik:RadEditor runat="server" ID="RadEditor1">
    <Tools>
        <telerik:EditorToolGroup>
            <telerik:EditorTool Name="Indent" />
            <telerik:EditorTool Name="Outdent" />
            <telerik:EditorTool Name="InsertBlockquote" Text="Custom Indent" ShowText="true" ShowIcon="false" />
            <telerik:EditorTool Name="RemoveBlockquote" Text="Custom Outdent" ShowText="true" ShowIcon="false"/>
        </telerik:EditorToolGroup>
    </Tools>
</telerik:RadEditor>

<script type="text/javascript">
    Telerik.Web.UI.Editor.CommandList["InsertBlockquote"] = function (commandName, editor, args) {
        var args = new Telerik.Web.UI.EditorCommandEventArgs();
        args.set_value("<blockquote>");
        editor.fire("FormatBlock", args);
    };

    Telerik.Web.UI.Editor.CommandList["RemoveBlockquote"] = function (commandName, editor, args) {
        var selElm = editor.getSelectedElement();

        if (!selElm)
            return;

        if (selElm.tagName === "BLOCKQUOTE") {
            Telerik.Web.UI.Editor.Utils.removeNode(selElm);
        } else {
            selElm = Telerik.Web.UI.Editor.Utils.getElementParentByTag(selElm, "BLOCKQUOTE");
            if (selElm) {
                Telerik.Web.UI.Editor.Utils.removeNode(selElm);
            }
        }
    };
</script>

Note, that this is only an example and if it does not provide the exact behavior that fits the application requirements you should further implement it according to them.

If you do not need the new behavior of the block commands. And you are certain that you are going to use the old one (InsertList commands will change too). As explained in the provided help article, you should insert the following line of code (highlighted in yellow) right after the ScriptManager control like in this example:

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

<script type="text/javascript" src='<%= Page.ClientScript.GetWebResourceUrl(typeof(RadEditor), "Telerik.Web.UI.Editor.RadEditor.Commands.LegacyCommands.js") %>'></script>

<telerik:RadEditor runat="server" ID="RadEditor1">
</telerik:RadEditor>

Do not hesitate contacting me in case of further information or assistance needed.

Regards,
Ianko
Telerik