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

Forums / General Discussions / Customizing the Sitefinity WYSIWYG Editor

Customizing the Sitefinity WYSIWYG Editor

5 posts, 2 answered
  1. Denis
    Denis avatar
    105 posts
    Registered:
    27 Feb 2009
    30 Aug 2011
    Link to this post
    I trying to add new button (insert code snippet) to the editor regarding following article:
    http://www.sitefinity.com/blogs/grishakaranikolov/posts/11-07-25/customizing_the_sitefinity_wysiwyg_editor.aspx

    I would like use current standard tools files as template. But I don't have this file in the solution. I guess tools files are stored as embedded resource. I tried to extract resources and didn't find tools files there.

    Can you please post StandardEditorConfiguration and MinimalEditorConfiguration somewhere?
    Or let me know where and how I can extract this files.

    Thanks!
    Denis.
  2. Boyan Barnev
    Boyan Barnev avatar
    1429 posts
    Registered:
    16 Aug 2017
    01 Sep 2011
    Link to this post
    Hi Denis,

    Please find below the default StandardToolsFile and MinimalToolsFile. Please note that the MinimalToolsFile configuration is used only for the Comments module, so I believe you won't need to modify that one. Concerning the code snippets functionality you want to implement, I'd recommend you to take a look at this article form our online Documentation, I believe you might find it useful.

    StandardToolsFile.xml
    <?xml version="1.0" encoding="utf-8" ?>
    <root>
        <modules>
            <module name="RadEditorStatistics" dockingZone="Bottom" visible="false" />
            <module name="RadEditorDomInspector" visible="false" />
            <module name="RadEditorNodeInspector" visible="false" />
            <module name="RadEditorHtmlInspector" visible="false" />
        </modules>
        <tools name="MainToolbar">
        <tool name="ToggleAdvancedToolbars"/>
        <tool name="Bold" shortcut="CTRL+B"/>
        <tool name="Italic" shortcut="CTRL+I"/>
        <tool separator="true"/>
        <tool name="InsertOrderedList" />
        <tool name="InsertUnorderedList" />
        <tool separator="true"/>
        <tool name="LinkManager" shortcut="CTRL+K"/>
        <tool name="Unlink" shortcut="CTRL+SHIFT+K"/>
        <tool name="ImageManager" shortcut="CTRL+G"/>
        <tool separator="true"/>
        <tool name="AjaxSpellCheck"/>
        <tool separator="true"/>
        <tool name="PasteFromWord" />
        </tools>
      <tools>
        <tool separator="true"/>
        <tool name="JustifyLeft" />
        <tool name="JustifyRight" />
        <tool name="JustifyCenter" />
        <tool name="JustifyFull" />
        <tool separator="true"/>
        <tool name="Indent" />
        <tool name="Outdent" />
      </tools>
      <tools>
        <tool name="FontName" shortcut="CTRL+SHIFT+F"/>
        <tool separator="true"/>
        <tool name="RealFontSize"/>
        <tool separator="true"/>
        <tool name="FormatBlock"/>
        <tool separator="true"/>
        <tool name="ForeColor"/>
        <tool name="BackColor"/>
        <tool separator="true"/>
        <tool name="MediaManager" />
        <tool name="FlashManager" />
        <tool name="DocumentManager" />
      </tools>
      <tools>
        <tool name="InsertParagraph" />
        <tool name="InsertTable" />
        <tool name="InsertSymbol"/>
        <tool name="InsertHorizontalRule" />
        <tool separator="true"/>
        <tool name="Superscript" />
        <tool name="Subscript" />
        <tool separator="true"/>
        <tool name="FormatStripper"/>
        <tool separator="true"/>
        <tool name="FindAndReplace" shortcut="CTRL+F"/>
        <tool name="Print" shortcut="CTRL+P"/>
        <tool name="ToggleScreenMode" />
      </tools>
    </root>
    MinimalToolsFile.xml
    <?xml version="1.0" encoding="utf-8" ?>
    <root>
      <modules>
        <module name="RadEditorStatistics" dockingZone="Bottom" visible="false" />
        <module name="RadEditorDomInspector" visible="false" />
        <module name="RadEditorNodeInspector" visible="false" />
        <module name="RadEditorHtmlInspector" visible="false" />
      </modules>
      <tools name="MainToolbar">
        <tool name="ToggleAdvancedToolbars" text="Toggle advanced mode"/>
      </tools>
      <tools>
        <tool name="Bold" shortcut="CTRL+B"/>
        <tool name="Italic" shortcut="CTRL+I"/>
        <tool separator="true"/>
        <tool name="LinkManager" shortcut="CTRL+K"/>
        <tool name="Unlink" shortcut="CTRL+SHIFT+K"/>
        <tool separator="true"/>
        <tool name="AjaxSpellCheck"/>
      </tools>
    </root>


    Regards,
    Boyan Barnev
    the Telerik team

    Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

    Answered
  3. Denis
    Denis avatar
    105 posts
    Registered:
    27 Feb 2009
    02 Sep 2011
    Link to this post
    Thank you I was able to add insert snippet button.

    I'm facing another issue. Html snippets I add have css classes in it. All classes applied as expected everywhere (from theme) besides content editor (RadEditor). I extracted all CSS classes that relate to snippets to the separate CSS file. How can I apply this css file to the Editor's content area?

    I tried to use Settings->Appearance->EditorContentAreaCssFile setting. I set it up to something like this:
    App_Data\Sitefinity\WebsiteTemplates\WebbyWellTemplates\App_Themes\General\Content\ContentMain.css

    But nothing changes...
  4. Boyan Barnev
    Boyan Barnev avatar
    1429 posts
    Registered:
    16 Aug 2017
    03 Sep 2011
    Link to this post
    Hi Denis,

    Can you please make sure you have specified the correct application relative path to your custom CSS flie? I'm attaching a short video demonstrating how to set this up, and the styles applied to the content editor. Please do not hesitate to let us know if any problems persist.

    Kind regards,
    Boyan Barnev
    the Telerik team

    Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

    Answered
  5. Denis
    Denis avatar
    105 posts
    Registered:
    27 Feb 2009
    07 Sep 2011
    Link to this post
    Thank you, Boyan.
    I made path shorter and it worked.
5 posts, 2 answered