Custom insert/edit DIV dialog

[Marja]

The standard RadEditor lacks a dialog to insert/edit DIV elements, so I built my own custom dialog to be able to do that.

Inserting the DV element works fine. However, editing an existing DIV does not. Instead of replacing the existing DIV element, a new DIV is created within the existing DIV.

Telerik.Web.UI.Editor.CommandList["InsertDIV"] = function (commandName, editor, args) {
            var argument = null, elem = editor.getSelectedElement(); //returns the selected element.

            if (elem && elem.tagName && elem.tagName == "DIV") {
                editor.selectElement(elem);
                argument = elem;
            }
            else {
                var l_sContent = editor.getSelectionHtml();
                if (l_sContent == '') { l_sContent = 'Inhoud DIV...'; }

                var l_oDiv = editor.get_document().createElement("DIV");
                l_oDiv.innerHTML = l_sContent;
                argument = l_oDiv;
            }

            var callbackInsertDIV = function (sender, args) {
                if (args != null) {
                    var l_sStyle = "", l_sClass, l_sID, l_sContent = "Inhoud DIV...";

                    if (args.width && args.width != '') { l_sStyle += 'width:' + args.width + ';' }
                    if (args.height && args.height != '') { l_sStyle += 'height:' + args.height + ';' }
                    if (args.padding && args.padding != '') { l_sStyle += 'padding:' + args.padding + ';' }
                    if (args.margin && args.margin != '') { l_sStyle += 'margin:' + args.margin + ';' }
                    if (l_sStyle.length > 0) { l_sStyle = " style='" + l_sStyle + "'" }

                    if (args.class && args.class != '') { l_sClass = " class='" + args.class + "'" }
                    if (args.id && args.id != '') { l_sID = " id='" + args.id + "'" }
                    if (args.content && args.content != '') { l_sContent = args.content }

                    var l_sHtml = String.format("<div{0}{1}{2}>" + l_sContent + "</div>", l_sStyle, l_sClass, l_sID);
                    editor.pasteHtml(l_sHtml);
                }
            }

            editor.showExternalDialog(
            'RadEditor/dlgInsertDIV.aspx',
            argument,
            600,
            250,
            callbackInsertDIV,
            null,
            'DIV element invoegen/wijzigen',
            true,
            Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move + Telerik.Web.UI.WindowBehaviors.Resize,
            false,
            true);
        };

In editing an existing DIV, how can I replace/update the existing DIV instead of inserting an extra one?

Best regards, Marja

[Ianko]

Hello Marja,

The required functionality depends on the already implemented logic of the custom dialog. Unfortunately, I am unable to provide a firm answer how to achieve that because it depends on the app requirements and should be build from the current developer.

I can only suggest you examining the Insert Special Link dialog in this example . Note that this dialog demonstrates how to build a custom dialog. I would like to point out the line of code on which the following method is executed:

//remove links if present from the current selection - because of JS error thrown in IE
editor.fire("Unlink");

Note that this removes the whole link and creates a new one in its place according to the modified properties in the dialog. I suppose the same logic should work for Div elements, only you should build additional logic that removes them, because there is no built-in command which implements such logic.

Regards,
Ianko
Telerik

[Marja]

If a DIV was selected to be edited, I need to be able to delete that selected element (including its content) prior to pasting the HTML for new/edited DIV.

So if 

editor.selectElement(elem);

selects that current DIV in the editor, what JS statement should I then issue to delete that element?

[Ianko]

Hi Marja,

Working with the Radeditor's content could be done just like modifying DOM objects in the HTML page.

Please examine the following example, in which is shown how an element could be removed with a simple jQuery remove method:

<telerik:RadEditor runat="server" ID="RadEditor1">
    <Tools>
        <telerik:EditorToolGroup>
            <telerik:EditorTool Name="AddDiv" Text="Add Div" ShowIcon="false" ShowText="true" />
            <telerik:EditorTool Name="RemoveDiv" Text="Remove Div" ShowIcon="false" ShowText="true" />
        </telerik:EditorToolGroup>
    </Tools>
</telerik:RadEditor>

<script type="text/javascript">
    Telerik.Web.UI.Editor.CommandList["AddDiv"] = function (commandName, editor, args) {
        editor.pasteHtml("<div>Some text in the DIV</div>");
    }

    Telerik.Web.UI.Editor.CommandList["RemoveDiv"] = function (commandName, editor, args) {
        var selectedElement = editor.getSelectedElement();
        $telerik.$(selectedElement).remove();
    }
</script>

Regards,
Ianko
Telerik