Custom insert/edit DIV dialog

4 posts, 1 answers
  1. Marja
    Marja avatar
    70 posts
    Member since:
    Nov 2013

    Posted 25 Feb 2014 Link to this post

    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
  2. Ianko
    Admin
    Ianko avatar
    1899 posts

    Posted 27 Feb 2014 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the UI for ASP.NET AJAX, subscribe to the blog feed now.
  3. Marja
    Marja avatar
    70 posts
    Member since:
    Nov 2013

    Posted 27 Feb 2014 in reply to Ianko Link to this post

    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?
  4. Answer
    Ianko
    Admin
    Ianko avatar
    1899 posts

    Posted 27 Feb 2014 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the UI for ASP.NET AJAX, subscribe to the blog feed now.
Back to Top