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 ok even using the standard bootstrap styles, but to get the full benefit you would need to add some extra css and javascript to the page.

This can be done in the _Layout.cshtml file of your theme. For example you could add this within the head element:

<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>

Alternatively, instead of putting that in layout which would include it in all pages, you can add it only to blog posts by adding those items in BlogStylePartial, and BlogScriptsPartial respectively. And for pages you could add those items 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.

If you want to view or submit comments you must accept the cookie consent.