Customizing the Editor

SimpleContent consumes the CKeditor from cloudscribe.Web.Common, for information about how to use custom configurations and toolbars see the article Using CKeditor in the documentation for cloudscribe.Web.Common.

Note that we now include the CodeSnippet plugin by default in our editor configuration. This is really useful for technical articles or blog posts for styling code elements. It looks good even using the standard styles, but to there are other style sheets available.

Example Usage:

<link href="~/cr/js/ckeditor461/plugins/codesnippet/lib/highlight/styles/atelier-forest.light.css" rel="stylesheet">

and add this at the bottom in the scripts section:

<script src="~/cr/js/ckeditor461/plugins/codesnippet/lib/highlight/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

By default we are including it in blog posts by adding those items in BlogStylePartial, and BlogScriptsPartial respectively, and in pages by adding them to StylePartial, and PageScriptsPartial. To learn how to customize views, see the Themes and Web Design article in cloudscribe Core documentation.

The urls above point to our embedded resource copies of the files but you could also have them in your local wwwroot/css and wwwroot/js folders. There are multiple themes available that correspond to the css file names, you can preview the themes is the sample page for the plugin.

Comments