RADEditor Indent to use padded div instead of Blockquote

5 posts, 1 answers
  1. Neil
    Neil avatar
    50 posts
    Member since:
    Mar 2009

    Posted 11 Mar 2011 Link to this post

    I am trying to modify the indent tool to use a left padded div instead of a blockquote.  I understand that the RADEditor uses execCommand that is provided by the browser, but I am trying to override this so that I can use a padded div instead of the browsers implementation.

    I am using the OnClientCommandExecuting event in the RADEditor with the following JavaScript, which isn't working exactly as I thought it would.  Any help would be greatly appreciated!

    Regards,
    Neil

    function OnClientCommandExecuting(editor, args) {
            var commandName = args.get_commandName();
            var editorParentSelection = editor.getSelection().getParentElement();
     
            switch (commandName) {
     
                case "Indent":
                          var editorParentSelection = editor.getSelection().getParentElement();
                    var currentSelection = editor.getSelection().getRange();
                    var wrapper = document.createElement("div");
                    wrapper.setAttribute("style", "margin-left: 30px");
                    wrapper.innerHTML = currentSelection.endContainer.textContent;
                    output = $telerik.getOuterHtml(wrapper);
                     editor.pasteHtml(output);
                    console.log(editorParentSelection.outerHTML);
     
                    args.set_cancel(true);
                    break;
     
                case "Outdent":
                    editorParentSelection.outerHTML;
                    break;
     
                default:
                    break;
            }
     
        }

  2. Neil
    Neil avatar
    50 posts
    Member since:
    Mar 2009

    Posted 15 Mar 2011 Link to this post

    Anybody?
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Rumen
    Admin
    Rumen avatar
    12851 posts

    Posted 16 Mar 2011 Link to this post

    Hi Neil,

    We were pretty busy preparing the Q1 2011 release and we will need a little bit more time to provide a solution for your custom scenario.

    Best regards,
    Rumen
    the Telerik team
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
  5. Answer
    Rumen
    Admin
    Rumen avatar
    12851 posts

    Posted 16 Mar 2011 Link to this post

    Hi Neil,

    Here is our implementation of the requested "DIV with inline margin instead of blockquote element for Indent" scenario:

        <script type="text/javascript">
            function OnClientCommandExecuted(editor, args) {
                var commandName = args.get_commandName();
                var editorParentSelection = editor.getSelection().getParentElement();
     
                switch (commandName) {
     
                    case "Indent":
                        var selectedElement = editor.getSelectedElement();
                         
                        while (!Telerik.Web.UI.Editor.Utils.isEditorContentArea(selectedElement) && !(selectedElement.tagName.toLowerCase() == "blockquote")) {
                            selectedElement = selectedElement.parentNode;
                        }
     
                        var tempDiv = editor.get_document().createElement("div");
                        tempDiv.style.cssText = "margin-left:30px";
                        tempDiv.innerHTML = selectedElement.innerHTML;
     
                        selectedElement.parentNode.replaceChild(tempDiv, selectedElement);
     
                        break;
     
                    case "Outdent":
                        editorParentSelection.outerHTML;
                        break;
     
                    default:
                        break;
                }
     
            }
     
        </script>
    <telerik:RadEditor ID="RadEditor1" runat="server" OnClientCommandExecuted="OnClientCommandExecuted">
        <Content>test</Content>
    </telerik:RadEditor>

    I hope this helps.

    Best regards,
    Rumen
    the Telerik team
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
  6. Neil
    Neil avatar
    50 posts
    Member since:
    Mar 2009

    Posted 16 Mar 2011 Link to this post

    Thanks Rumen.  
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017