Customizing the Sitefinity WYSIWYG Editor

Posted by Community Admin on 03-Aug-2018 00:10

Customizing the Sitefinity WYSIWYG Editor

All Replies

Posted by Community Admin on 30-Aug-2011 00:00
I trying to add new button (insert code snippet) to the editor regarding following article:
www.sitefinity.com/.../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.
Posted by Community Admin on 01-Sep-2011 00:00
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 >>

Posted by Community Admin on 02-Sep-2011 00:00
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...
Posted by Community Admin on 03-Sep-2011 00:00
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 >>

Posted by Community Admin on 07-Sep-2011 00:00
Thank you, Boyan.
I made path shorter and it worked.
This thread is closed