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

Forums / Designing & Styling / Setting TableLayoutCssFile for RadEditor

Setting TableLayoutCssFile for RadEditor

4 posts, 0 answered
  1. sacparker
    sacparker avatar
    14 posts
    Registered:
    21 Mar 2007
    10 Jun 2011
    Link to this post
    I do not see this setting anywhere, I was assuming it would be Settings > Advanced > Appearance > EditorConfigurations.
  2. Boyan Barnev
    Boyan Barnev avatar
    1429 posts
    Registered:
    08 Dec 2016
    13 Jun 2011
    Link to this post
    Hello sacparker,

    Can you please take a look at this article from our Documentation which provides instructions on setting table CSS styles in the content editor and let me know if this is the functionality you want to achieve, so I can be sure we're on the same track here?

    Kind regards,
    Boyan Barnev
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. sacparker
    sacparker avatar
    14 posts
    Registered:
    21 Mar 2007
    13 Jun 2011
    Link to this post
    Hi Boyan,

    I could not find the page in the documentation. Here is the demo page:
    http://demos.telerik.com/aspnet-ajax/editor/examples/tablelayoutcssfile/defaultcs.aspx

    thanks,
    Steve
  4. Boyan Barnev
    Boyan Barnev avatar
    1429 posts
    Registered:
    08 Dec 2016
    14 Jun 2011
    Link to this post
    Hi sacparker,

    Thank you for the clarification. To achieve this functionality you need to map Telerik.Sitefinity.Web.UI.Fields.HtmlField through the configuration. Please find below the default template we're using:
    <%@ 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_read" 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_write" 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, "");
                         
                        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;
                    }
     
                    /* ]]> */
                </script>
            </sf:ConditionalTemplate>
        </Templates>       
    </sf:ConditionalTemplateContainer>
    You'll need to add a code-behind file to the template and set the new TablelayoutCSSFile like this:
    protected void Page_Load(object sender, EventArgs e)
           {
               editControl.PreRender += new EventHandler(editControl_PreRender);
           }
      
           void editControl_PreRender(object sender, EventArgs e)
           {
               editControl.TableLayoutCssFile = "~/TableLayoutCss.css"; //relative path to your table layout theme
           }
    Then go to Administration >> Settings >> Advanced >>Controls >>ViewMap and create new, filling in the fields like this (all without the quotes):
    HostType: "Telerik.Sitefinity.Web.UI.Fields.HtmlField"
    LayoutTemplatePath: "relative path to the template where you have declared HtmlField control"
    After mapping the  template, please restart the application to apply the settings. If you need any further assistance achieving the desired functionality, please let me know, I'll be glad to help.



    Kind regards,
    Boyan Barnev
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
4 posts, 0 answered