Customizing the Sitefinity WYSIWYG Editor
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.
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
>
<?
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
>
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 >>
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...
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 >>
Thank you, Boyan.
I made path shorter and it worked.