Custom CSS in editor
When editing a page I'd like to see an option to apply custom styles to text. Is there a way to add a custom CSS selector to Sitefintity text editor?
Note: I have no problem using HTML view and wrapping text inside of a <span class="">, but the people who will manage this site are not HTML savy. They need an easy way to apply styles.
Any documentation you have on doing this would be really helpful for the Designer Guide too. Thanks.
Hi Justin,
Thank you for contacting Telerik Support.
You need to map the template for ContentBlock designer and then you can specify your CSS styles either in the template or in the tools file. Please follow the below steps.
1. Create a file, for example ContentBlockTmp.ascx in a directory, let's say Templates:
<%@ Control Language="C#" %>
<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI" TagPrefix="sf" %>
<%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.Fields" TagPrefix="sf" %>
<
sf:ResourceLinks
id
=
"resourcesLinks"
runat
=
"server"
>
<
sf:ResourceFile
Name
=
"CSS/myCSS.css"
/><%--Location of your CSS style file--%>
</
sf:ResourceLinks
>
<
sf:FormManager
ID
=
"formManager"
runat
=
"server"
/>
<
div
style
=
"width: 660px; overflow: hidden;"
>
<
sf:HtmlField
ID
=
"htmlEditor"
runat
=
"server"
Width
=
"99%"
Height
=
"370px"
EditorContentFilters
=
"DefaultFilters"
EditorStripFormattingOptions
=
"MSWord,Css,Font,Span,ConvertWordLists"
DisplayMode
=
"Write"
FixCursorIssue
=
"True"
EditorToolsConfiguration
=
"Custom"
EditorToolsConfigurationKey
=
"toolsFile"
> <%--This key has to be the same as the key you add in AppearanceConfig.config--%>
</
sf:HtmlField
>
</
div
>
<
script
type
=
"text/javascript"
>
$("body").addClass("sfContentBlockDesigner");
</
script
>
<
editorConfigurations
>
<
add
value
=
"~/Configuration/ERS Bruchwiese/EditorToolsFile.xml"
key
=
"toolsFile"
/> <!--This key has to be the same as in your template-->
</
editorConfigurations
>
</
appearanceConfig
>
<
style
type
=
"text/css"
>
<%--Put your CSS here--%>
</
style
>