More in this section

Forums / Developing with Sitefinity / EditorToolsFile... need help

EditorToolsFile... need help

5 posts, 0 answered
  1. Court
    Court avatar
    20 posts
    Registered:
    24 Nov 2009
    18 Feb 2010
    Link to this post
    Ok trying to customize the "RadEditor" by editing the EditorToolsFile.xml.

    When adding paragraph elements to the file, I'm not seeing the visual css in the dropdown. I see the default header formating instead.

    Help?!?

    Here's my EditorToolsFile.xml
    <root>
        <cssFiles>
            <item name="~/Custom/css/base.css" />
        </cssFiles>
     
        <tools name="MainToolbar" dockable="false">
            <tool name="AjaxSpellCheck" shortcut="F7"/>
            <tool name="PasteFromWordNoFontsNoSizes" />
            <tool name="PastePlainText" />
            <tool separator="true"/>
            <tool name="Undo" shortcut="CTRL+Z"/>
            <tool name="Redo" shortcut="CTRL+Y"/>
            <tool separator="true"/>
        </tools>
     
        <tools dockable="false">
            <tool name="Bold" shortcut="CTRL+B"/>
            <tool name="Italic" shortcut="CTRL+I"/>
            <tool name="JustifyLeft" />
            <tool name="JustifyCenter" />
            <tool name="JustifyRight" />
            <tool name="JustifyFull" />
            <tool name="InsertOrderedList" />
            <tool name="InsertUnorderedList" />
            <tool separator="true"/>
        </tools>
     
        <tools name="DropdownToolbar" dockable="false">
            <tool name="FormatBlock"/>
            <tool name="ApplyClass"/>
            <tool name="FormatStripper"/>
            <tool name="ToggleScreenMode" />
        </tools>
     
        <tools name="InsertToolbar" dockable="false">
            <tool name="LibraryImageManager" text="Insert an image"/>
            <tool name="LibraryDocumentManager" text="Insert a document"/>
            <tool name="LinkManager" text="Insert a link" shortcut="CTRL+K"/>
            <tool name="Unlink" shortcut="CTRL+SHIFT+K"/>
        </tools>
     
        <realFontSizes>
            <item value="11px"></item>
            <item value="12px"></item>
            <item value="13px"></item>
            <item value="14px"></item>
            <item value="18px"></item>
            <item value="22px"></item>
        </realFontSizes>
        <paragraphs>
            <paragraph name="Clear formatting" value="<body>" />
            <paragraph name="Normal" value="p" />
            <paragraph name="<h1>Heading 1</h1>" value="<h1>" />
            <paragraph name="<h2>Heading 2</h2>" value="<h2>" />
            <paragraph name="<h3>Heading 3</h3>" value="<h3>" />
            <paragraph name="<h4>Heading 4</h4>" value="<h4>" />
            <paragraph name="<h5>Heading 5</h5>" value="<h5>" />
        </paragraphs>
        <classes>
            <class name="Red" value=".red" />
            <class name="Orange" value=".orange" />
            <class name="Blue" value=".blue" />
            <class name="Green" value=".green" />
            <class name="White" value=".white" />
            <class name="Black" value=".black" />
            <class name="xx-small" value=".xx-small" />
            <class name="small" value=".small" />
            <class name="medium" value=".medium" />
            <class name="large" value=".large" />
            <class name="xx-large" value=".xx-large" />
        </classes>
     
        <links/>
        <snippets/>
        <symbols/>
        <fontNames/>
        <fontSizes/>
        <colors/>
        <dialogParameters/>
        <languages/>
        <contextMenus/>
    </root>

    My Css file:
    h1
    {      
        font-family: Arial;
        font-size: 26px;
        font-weight: bold;
        text-decoration: none;
        color: #3468A8;
        margin: 0px;
        padding: 0px;
    }
     
    h2
    {
        font-family: Arial;
        font-size: 20px;
        font-weight: bold;
        text-decoration: none;
        color: #7C94C4;
        margin: 0px;
        padding: 0px;
    }
     
    h3
    {
        font-family: Myriad Pro;
        font-size: 17px;
        font-weight: bold;
        text-decoration: none;
        font-style: italic;
        letter-spacing: 1px;
        color: #000000;
        margin: 0px;
        padding: 0px;
    }
     
    h4
    {
        color: #000000;
        font-family: Verdana;
        font-size: 15px;
        font-weight: bold;
        text-decoration: none;
        margin: 0px;
        padding: 0px;
    }
     
    h5
    {
        font-family: Verdana;
        font-size: 15px;
        font-weight: bold;
        text-decoration: none;
        color: #B80400;
        margin: 0px;
        padding: 0px;
    }

  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    19 Feb 2010
    Link to this post
    Hello Court,

    1. You cannot declare the paragraphs in the configuration files as you have done. You need to escape hexadecimal chars

    <paragraphs>
           <paragraph name="Clear formatting" value="&lt;body>" />
           <paragraph name="&lt;H1>Heading 1&lt;/H1>" value="&lt;H1>" />
           <paragraph name="&lt;H2>Heading 2&lt;/H2>" value="&lt;H2>" />
           <paragraph name="&lt;H3>Heading 3&lt;/H3>" value="&lt;H3>" />
      </paragraphs>

    2. You can add your css  classes directly to the template where RadEditor has been declared

    <style type="text/css">
     
    h1
    {     
        font-family: Arial;
        font-size: 26px;
        font-weight: bold;
        text-decoration: none;
        color: #3468A8;
        margin: 0px;
        padding: 0px;
    }
      
    h2
    {
        font-family: Arial;
        font-size: 20px;
        font-weight: bold;
        text-decoration: none;
        color: #7C94C4;
        margin: 0px;
        padding: 0px;
    }
      
    h3
    {
        font-family: Myriad Pro;
        font-size: 17px;
        font-weight: bold;
        text-decoration: none;
        font-style: italic;
        letter-spacing: 1px;
        color: #000000;
        margin: 0px;
        padding: 0px;
    }
     
    </style>
     
    <telerik:RadEditor
        runat="server"
        ID="textEditor"
        ContentAreaCssFile="~/Sitefinity/Admin/Themes/Default/AjaxControlsSkins/Sitefinity/EditorContentArea.css"
        ToolsFile="~/Sitefinity/Admin/ControlTemplates/EditorToolsFile.xml"   
        Skin="WebBlue"   
        NewLineBr="False"
        Height="360px"
        Width="98%"
        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" />
        </CssFiles>
    </telerik:RadEditor>


    Kind regards,
    Ivan Dimitrov
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  3. Court
    Court avatar
    20 posts
    Registered:
    24 Nov 2009
    19 Feb 2010
    Link to this post
    I was already aware about this:

    <paragraphs>
    <paragraph name="Clear formatting" value="&lt;body>" />
    <paragraph name="&lt;H1>Heading 1&lt;/H1>" value="&lt;H1>" />
    <paragraph name="&lt;H2>Heading 2&lt;/H2>" value="&lt;H2>" />
    <paragraph name="&lt;H3>Heading 3&lt;/H3>" value="&lt;H3>" />
    </paragraphs>


    And we are not using a custom control with  a rad editor. We are wanting to use the "Generic Content Control" so that they can get visual cues of what each h1,h2.h3 elements will do in the dropdown.
  4. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    12 Sep 2017
    19 Feb 2010
    Link to this post
    Hello Court,

    In the config you pasted the chars was not escaped. The custom control does not matter. Take a look at a screenshot that shows the default control. For more information please refer to Paragraph Styles

    Kind regards,
    Ivan Dimitrov
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  5. Court
    Court avatar
    20 posts
    Registered:
    24 Nov 2009
    19 Feb 2010
    Link to this post
    Well I had "pasted" the content of the xml file using the "Format Code Block Dialog" which took the  &lt; and converted it to < .  So I apologize for the confusion that your tool created.

    However, all the Knowledge Base Articles that we have already found does not fix the issue. Hence is why I posted here for help.

    So in our EditorToolsFile.xml this is what we have and I'm not going to use the "Format Code Block Dialog" so that you can see what we actually have in our xml file:

    <root>
    <cssFiles>
    <item name="~/Custom/css/base.css" />
    </cssFiles>

    <tools name="MainToolbar" dockable="false">
    <tool name="AjaxSpellCheck" shortcut="F7"/>
    <tool name="PasteFromWordNoFontsNoSizes" />
    <tool name="PastePlainText" />
    <tool separator="true"/>
    <tool name="Undo" shortcut="CTRL+Z"/>
    <tool name="Redo" shortcut="CTRL+Y"/>
    <tool separator="true"/>
    </tools>

    <tools dockable="false">
    <tool name="Bold" shortcut="CTRL+B"/>
    <tool name="Italic" shortcut="CTRL+I"/>
    <tool name="JustifyLeft" />
    <tool name="JustifyCenter" />
    <tool name="JustifyRight" />
    <tool name="JustifyFull" />
    <tool name="InsertOrderedList" />
    <tool name="InsertUnorderedList" />
    <tool separator="true"/>
    </tools>

    <tools name="DropdownToolbar" dockable="false">
    <tool name="FormatBlock"/>
    <tool name="ApplyClass"/>
    <tool name="FormatStripper"/>
    <tool name="ToggleScreenMode" />
    </tools>

    <tools name="InsertToolbar" dockable="false">
    <tool name="LibraryImageManager" text="Insert an image"/>
    <tool name="LibraryDocumentManager" text="Insert a document"/>
    <tool name="LinkManager" text="Insert a link" shortcut="CTRL+K"/>
    <tool name="Unlink" shortcut="CTRL+SHIFT+K"/>
    </tools>

    <realFontSizes>
    <item value="11px"></item>
    <item value="12px"></item>
    <item value="13px"></item>
    <item value="14px"></item>
    <item value="18px"></item>
    <item value="22px"></item>
    </realFontSizes>
    <paragraphs>
    <paragraph name="Clear formatting" value="&lt;body>" />
    <paragraph name="Normal" value="p" />
    <paragraph name="&lt;h1>Heading 1&lt;/h1>" value="&lt;h1>" />
    <paragraph name="&lt;h2>Heading 2&lt;/h2>" value="&lt;h2>" />
    <paragraph name="&lt;h3>Heading 3&lt;/h3>" value="&lt;h3>" />
    <paragraph name="&lt;h4>Heading 4&lt;/h4>" value="&lt;h4>" />
    <paragraph name="&lt;h5>Heading 5&lt;/h5>" value="&lt;h5>" />
    </paragraphs>
    <classes>
    <class name="Red" value=".red" />
    <class name="Orange" value=".orange" />
    <class name="Blue" value=".blue" />
    <class name="Green" value=".green" />
    <class name="White" value=".white" />
    <class name="Black" value=".black" />
    <class name="xx-small" value=".xx-small" />
    <class name="small" value=".small" />
    <class name="medium" value=".medium" />
    <class name="large" value=".large" />
    <class name="xx-large" value=".xx-large" />
    </classes>

    <links/>
    <snippets/>
    <symbols/>
    <fontNames/>
    <fontSizes/>
    <colors/>
    <dialogParameters/>
    <languages/>
    <contextMenus/>
    </root>

    While we DO get the visual style cues in the dropdown for the classes, we DO NOT get any of the ACTUAL visual style cues in the "FormatBlock" dropdown for the h1,h2,h3 header tags. Please refer the already posted image above. That screenshot is a snapshot of a "Generic Content Control" that is not getting the visual cues in the "FormatBlock" dropdown.
Register for webinar
5 posts, 0 answered