1-888-365-2779
+1-888-365-2779
Try Now
More in this section

Forums / General Discussions / Format Code Block in blog edit

Format Code Block in blog edit

6 posts, 0 answered
  1. Daniel Plomp
    Daniel Plomp avatar
    112 posts
    Registered:
    14 Jun 2012
    25 Feb 2011
    Link to this post
    Hi,

    I'd like to have the 'Format Code Block dialog' option inside the RadEditor when I add or edit blog post items.
    How can I achieve this?

    Thanks,
    Daniel
  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    25 Feb 2011
    Link to this post
    Hi Daniel,

    It is possible to do it only for the BlogPostsInsert and Edit.

    1. You need to create a custom class that inherits from HtmlField element and there access the Editor property which will allow you to inject the code block tool

    2. You should replace the HtmlField in the configuration

    All the best,
    Ivan Dimitrov
    the Telerik team
  3. Daniel Plomp
    Daniel Plomp avatar
    112 posts
    Registered:
    14 Jun 2012
    25 Feb 2011
    Link to this post
    Hi Ivan,

    Would you mind to give me an example of such a class?

    Thanks,
    Daniel
  4. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    25 Feb 2011
    Link to this post
    Hello Daniel,

    Here is a sample

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using Telerik.Sitefinity.Web.UI.Fields;
     
    namespace SitefinityWebApp
    {
        public class Class1 : HtmlField
        {
     
            public override string LayoutTemplatePath
            {
                get
                {
                    return Class1._layoutTempaltePath;
                }
            }
            private const string _layoutTempaltePath = "path to the html field template";
        }
     
        
    }

    template

    <%@ Control Language="C#" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sf" %>
     
    <sf:ConditionalTemplateContainer ID="conditionalTemplate" runat="server">
        <Templates>
            <sf:ConditionalTemplate Left="DisplayMode" Operator="Equal" Right="Read" runat="server">
                <sf:SitefinityLabel id="titleLabel" runat="server" WrapperTagName="div" HideIfNoText="false" CssClass="sfTxtLbl" />
                <sf:SitefinityLabel id="viewControl" runat="server" WrapperTagName="div" HideIfNoText="false" CssClass="sfRTFContent" />
            </sf:ConditionalTemplate>
            <sf:ConditionalTemplate Left="DisplayMode" Operator="Equal" Right="Write" runat="server">
                <sf:ResourceLinks id="resourcesLinks2" runat="server">
                    <sf:EmbeddedResourcePropertySetter Name="Telerik.Sitefinity.Resources.Themes.Default.Styles.EditorDialogs.css" Static="true" ControlID="editControl" ControlPropertyName="DialogsCssFile" />
                    <sf:ResourceFile Name="Telerik.Sitefinity.Resources.Themes.Default.Styles.Window.css" Static="true" />
                </sf:ResourceLinks>
                <asp:Label ID="titleLabel" runat="server" CssClass="sfTxtLbl" AssociatedControlID="editControl" />
                <asp:LinkButton ID="expandLink" runat="server" OnClientClick="return false;" CssClass="sfOptionalExpander" />
                <asp:Panel ID="expandableTarget" runat="server" CssClass="sfEditorWrp sfClearfix">
                    <telerik:RadEditor
                        ID="editControl"
                        runat="server"
                        Skin="Sitefinity"
                        Width="100%"
                        Height="550px"
                        EnableResize="False"
                        EditModes="Design,HTML"
                        DialogHandlerUrl="~/Telerik.Web.UI.DialogHandler.axd"
                        Content=""
                        NewLineBr="False"
                        StripFormattingOptions="Css,Font,Span"
                        OnClientLoad="Telerik$Sitefinity$Web$UI$Fields$HtmlField$radEditorToggleAdvancedToolbars"
                        OnClientPasteHtml="OnClientPasteHtml"
                        OnClientCommandExecuting="OnClientCommandExecuting">
                        <FlashManager ViewPaths="~/Files" UploadPaths="~/Files" DeletePaths="~/Files" />
                    </telerik:RadEditor>
                    <sf:SitefinityLabel id="descriptionLabel" runat="server" WrapperTagName="div" HideIfNoText="true" CssClass="sfDescription" />
                    <sf:SitefinityLabel id="exampleLabel" runat="server" WrapperTagName="div" HideIfNoText="true" CssClass="sfExample" />
                </asp:Panel
                <script type="text/javascript">
                    /* <![CDATA[ */
                     
                    var className = null;
                    var toRemove = false;
                    var handlersAdded = false;
     
                    function OnClientPasteHtml(sender, args)
                    {
                        var newContent = args.get_value();
                        newContent = newContent.replace(new RegExp("<b(\\s([^>])*?)?>", "ig"), "<strong$1>");
                        newContent = newContent.replace(new RegExp("</b(\\s([^>])*?)?>", "ig"), "</strong$1>");
                        newContent = newContent.replace(new RegExp("<i(\\s([^>])*?)?>", "ig"), "<em$1>");
                        newContent = newContent.replace(new RegExp("</i(\\s([^>])*?)?>", "ig"), "</em$1>");
                        var regex = /<([a-zA-Z]+) ?[^>]*?>\s*<\/\1>/gi;
                        newContent = newContent.replace(regex, "");
     
                        newContent = newContent.replace(new RegExp("( \s*\n*)+", "ig"), " ");
                        newContent = newContent.replace(new RegExp("(\s*\n*<br\s*\/?>\s*\n*)+", "ig"), "<br />");
     
                        args.set_value(newContent);
                    }
     
                    function OnClientCommandExecuting(editor, args) {
                     
                        var name = args.get_name();
                        var val = args.get_value();
                         
                        var commandName = args.get_commandName();
                        className = "re" + commandName;
                        if (editor.get_dialogOpener())
                        {
                            if (editor.get_dialogOpener()._container && !handlersAdded)
                            {
                                editor.get_dialogOpener()._container.add_show(AddRemoveCSSClass);
                                editor.get_dialogOpener()._container.add_close(AddRemoveCSSClass);
                                handlersAdded = true;
                            }
                        }
     
                        if (name == "MergeTags")
                        {
                            editor.pasteHtml(val);
                            //Cancel the further execution of the command as such a command does not exist in the editor command list
                            args.set_cancel(true);
                        }
     
                        if (commandName == "ToggleScreenMode") {
                            var containerWnd = GetRadWindow();
                            if (!editor.isFullScreen()) //if the editor is placed in fullscreen mode specify the needed content area width
                            {
                                $(editor.get_element()).addClass("sfFullScreenEditor");
                                if(containerWnd != null && !containerWnd.isMaximized())
                                {
                                    containerWnd.maximize();
                                    $(containerWnd.get_element()).addClass("sfWndToBeRestored");
                                }
                                editor.get_document().body.style.maxWidth = "640px";
                            }
                            else
                            {
                                $(editor.get_element()).removeClass("sfFullScreenEditor");
                                if(containerWnd != null && $(containerWnd.get_element()).hasClass("sfWndToBeRestored"))
                                {
                                    $(containerWnd.get_element()).removeClass("sfWndToBeRestored");
                                    containerWnd.restore();
                                }
                                editor.get_document().body.style.maxWidth = "100%";
                            }
                        }
     
                    }
     
                    function AddRemoveCSSClass(sender, args)
                    {
                        var popupElement = sender.get_popupElement();
                        if (!toRemove)
                        {
                            Sys.UI.DomElement.addCssClass(popupElement, className);
                        }
                        else
                        {
                            Sys.UI.DomElement.removeCssClass(popupElement, className);
                        }
                    }
     
                    function GetRadWindow()
                    {
                        var oWindow = null;
                        if (window.radWindow) oWindow = window.radWindow;
                        else if (window.frameElement.radWindow) oWindow = window.frameElement.radWindow;
                        return oWindow;
                    }
     
                    Telerik.Web.UI.RadEditor.prototype._setContentAreaHtml = function (initContent, forceNewDocument) {
                        var newContent = this.get_filtersManager().getDesignContent(initContent);
                        var oContent = null;
                        var $T = Telerik.Web.UI;
     
                        if (-1 != newContent.toLowerCase().indexOf("<html")) {
                            this.set_fullPage(true);
                            oContent = newContent;
                            //Check for the presence of DOCTYPE and save it
                            this._doctypeString = this._extractDoctype(oContent);
                        }
                        else this.set_fullPage(false);
     
                        if (this.get_fullPage() && this.get_contentAreaMode() == $T.EditorContentAreaMode.Div) {
                            alert("Error! Set EditorContentAreaMode to Iframe if you want to edit full page HTML");
                            //strip full HTML from content and leave only what's in the body
                            newContent = newContent.replace(/^[\s\S]*<html[\s\S]+?<body[^>]*>([\s\S]*?)<\/body>[\s\S]*$/gi, "$1");
                            this.set_fullPage(false);
                        }
     
                        if (this.get_contentAreaMode() == $T.EditorContentAreaMode.Div) {
                            this.set_contentArea(this.get_contentAreaElement());
                            this.set_document(this.get_contentArea().ownerDocument);
                            this.set_contentWindow(window);
                            if (newContent.match(/<form[\s>]/i)) {
                                alert("Error! Form elements are only supported when the content area is set to Iframe!");
                                newContent = "";
                            }
                            $T.Editor.Utils.setElementInnerHtml(this.get_contentArea(), newContent);
                            this.get_filtersManager().getDesignContentDom(this.get_contentArea());
                            if (!this._divContentAreaInitialized) this._contentAreaCommonInitialization();
                            return;
                        }
     
                        if (null != oContent || true == forceNewDocument) {
                            //Set the content to the content area
                            var operaSpecific = "";
                            if (this.isOpera) {
                                operaSpecific = " style='height:100%'";
                            }
                            if (!oContent) oContent = "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\"><head><style></style></head><body" + operaSpecific + ">" + newContent + "</body>";
     
                            //Mozilla issue - when FULL PAGE editing and there are <link> elements, it loads them with delay!
                            if ($telerik.isFirefox) {
                                var oLoadFunction = Function.createDelegate(this, function () {
                                    if (this._execLoadFunctionSecondTime) {
                                        this._contentFrameLoadFunction();
                                    }
                                });
     
                                $addHandler(this.get_contentAreaElement(), "load", oLoadFunction);
                            }
     
                            try {
                                var contentDocument = this.get_contentAreaElement().contentWindow.document;
                                contentDocument.open();
                                contentDocument.write(oContent);
                                contentDocument.close();
     
                                //check if the body is there and if not (Mozilla), wait for the onload function
                                this._execLoadFunctionSecondTime = false;
                                if (contentDocument.body)
                                    this._contentFrameLoadFunction();
                                else
                                    this._execLoadFunctionSecondTime = true;
                            } catch (e) {
                                //SAFARI blows when editor is rendered in an invisible parent!
                            }
                        }
                        else {
                            //Just set the content in the content area (not full page, body only)
                            $T.Editor.Utils.setElementInnerHtml(this.get_contentArea(), newContent);
                            this.get_filtersManager().getDesignContentDom(this.get_contentArea());
                        }
                    }
                    /* ]]> */
                </script>
            </sf:ConditionalTemplate>
        </Templates>       
    </sf:ConditionalTemplateContainer>


    All the best,
    Ivan Dimitrov
    the Telerik team
  5. Daniel Plomp
    Daniel Plomp avatar
    112 posts
    Registered:
    14 Jun 2012
    25 Feb 2011
    Link to this post
    I copied the template and class to a folder 'Controls'.
    After that I changed the FieldTemplate to: <namespace><classname> or 'DmCms.Controls.BlogContentEditor'.

    When creating a new post, the controls loads, but all button faces have dissapeared.
    And... it isn' clear to me where to add the extra button? Through the class, or inside the template?

    Regards,
    Daniel
  6. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    01 Mar 2011
    Link to this post
    Hi Daniel,

    You can add the FormatCodeBlock through ToolsFile.xml of the RadEditor or you can do this programmatically.

    As for the missing buttons, please check whether there is no some script that hides them or the problem is with the sprite images ,because of the skin applied over the RadEditor.

    Best wishes,
    Ivan Dimitrov
    the Telerik team
6 posts, 0 answered