Setting TableLayoutCssFile for RadEditor - Front- & Back-End Development - Front- & Back-End Development - Progress Community
 Front- & Back-End Development

Setting TableLayoutCssFile for RadEditor

  • Setting TableLayoutCssFile for RadEditor
  • I do not see this setting anywhere, I was assuming it would be Settings > Advanced > Appearance > EditorConfigurations.
  • 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
  • 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
  • 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