More in this section

Forums / Developing with Sitefinity / Custom Css in Sitefinity radeditor bugs?

Custom Css in Sitefinity radeditor bugs?

2 posts, 0 answered
  1. medo
    medo avatar
    9 posts
    Registered:
    22 Nov 2009
    14 Jan 2010
    Link to this post
    I want to use custom css classes in the editor.

    I changed  Sitefinity\Admin\ControlTemplates\EditorToolsFile.xml to include:

    <cssFiles>
        <item name="~/Content/radeditor.css" />
    </cssFiles>

      <classes>
        <class name="EditorToolsFile.xml" value=".read" />
        <class name="Author Oneliner" value=".authorOneliner" />
        <class name="H1 next line" value=".H1-next-line" />
        <class name="test" value=".test" />
        <class name="H1 with big picture" value=".H1-with-big-pic" />
      </classes>
     
    (  I have no idea what <class name="EditorToolsFile.xml" value=".read" /> does but It was already there )

    the radeditor.css has all the css classes so does my css in the theme folder.
    When editing generic content I do see "H1 next line"  and "H1 with big picture" in the drop down for "Apply Css class" but not the other two.


  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    15 Jan 2010
    Link to this post
    Hi medo,

    You can take a look at the following articles.

    Introduction to Toolbars
    Using the ToolsFile.xml
    CSS Styles
    External CSS Files

    You should add ApplyClass toolbar or specify css classes. Below are some tips.

    Through EditorToolsFile file

    1. Open ~/Sitefinity/Admin/ControlTemplates/EditorToolsFile.xml file
    2. Specify the path to the css file, which you need the editor to use:

    Copy Code
    <root>     
      
    ...     
      
      <cssFiles>     
      
        <item name="~/Sitefinity/Admin/ControlTemplates/MyCSS.css" />     
      
      </cssFiles>     
      
    ...     
      
    </root>

    3. Delete the <class> elements which appear as child elements of an element <classes>:

    Copy Code
    <class name="Add CssClasses:" value=".test" />     
    <class name="EditorToolsFile.xml" value=".test1" />

    Programmatically.
    1. Map the external template for the desired view.
    2. Add inline code to the template and specify your css file with the custom classes.

    Copy Code
    <script type="text/C#" runat="server">
      
        protected void Page_Load(object sender, EventArgs e)
        {
            Editor.CssFiles.Add("~/test/your.css");
        }
      
    </script>


    Other options

    Working with ToolsFile

    Apply value property as  the name of your css class. Your class section should look as in the sample below:

    Copy Code
    <classes>
        <class name="RED" value=".BackGroundRed" />
        <class name="Blue" value=".BackGroundBlue" />
    </classes>

    As you can see we are applying css classes from our stylesheet.

    Copy Code
    .BackGroundBlue
    {
      background-color: Blue;
    }
    .BackGroundRed
    {
      background-color: Red;
    }


    Note that you should have added the path to your css stylesheet in the desired template

    Copy Code
    <telerik:RadEditor
     
                    runat="server"
                    ID="Editor"
                    ContentAreaCssFile="~/Sitefinity/Admin/Themes/Default/AjaxControlsSkins/Sitefinity/EditorContentArea.css"
                    ToolsFile="~/Sitefinity/Admin/ControlTemplates/EditorToolsFile.xml"                  
                    Skin="WebBlue"                    
                    NewLineBr="False"
                    Width="95%"
                    ContentFilters="FixUlBoldItalic,FixEnclosingP,IECleanAnchors,MozEmStrong,ConvertFontToSpan,ConvertToXhtml,IndentHTMLContent">
                    <ImageManager ViewPaths="~/Images" UploadPaths="~/Images" DeletePaths="~/Images" />
                    <MediaManager ViewPaths="~/Files" UploadPaths="~/Files" DeletePaths="~/Files" />
                    <FlashManager ViewPaths="~/Files" UploadPaths="~/Files" DeletePaths="~/Files" />
                    <DocumentManager ViewPaths="~/Files" UploadPaths="~/Files" DeletePaths="~/Files" />
                    <CssFiles>
                        <telerik:EditorCssFile Value="~/Sitefinity/Admin/Themes/Default/AjaxControlsSkins/Sitefinity/EditorCssFile.css" />
                       <telerik:EditorCssFile Value="~/Files/style.css"/>
                    </CssFiles>
                </telerik:RadEditor>


    Greetings,
    Ivan Dimitrov
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
2 posts, 0 answered