Customizing The Editor

SimpleContent uses CKEditor, which is easy to customize and has a large ecosystem of custom plugins.

By default the scripts are used as embedded resources as are the Views. To get started customizing you just need to copy the EditorScriptsPartial.cshtml file into your Views/Shared folder, and also copy the editor-ck.js file into your local wwwroot/js folder.

The contents of EditorScriptsPartial.cshtml looks like this:

<environment names="Development">
    <script src="~/csscsr/jqueryhotkeys"></script> 
    <script src="~/csscsr/momentwithlocalesjs"></script>
    <script src="~/csscsr/bootstrapdatetimepickerjs"></script>
    <script src="~/csscsr/jquerycookie"></script>
    <script src="~/ckjs/ckeditor.js"></script>
    <script src="~/csscsr/editorjs"></script>
</environment>
<environment names="Staging,Production">
    <script src="~/csscsr/jqueryhotkeysmin"></script>
    <script src="~/csscsr/momentwithlocalesjsmin"></script>
    <script src="~/csscsr/bootstrapdatetimepickerjsmin"></script>
    <script src="~/csscsr/jquerycookiemin"></script>
    <script src="~/ckjs/ckeditor.js"></script>
    <script src="~/csscsr/editorjsmin"></script>
</environment>

The urls shown above all point to embedded resources. You just need to change the last script in each environment to point to your local copy of the script like this:

<environment names="Development">
    <script src="~/csscsr/jqueryhotkeys"></script> 
    <script src="~/csscsr/momentwithlocalesjs"></script>
    <script src="~/csscsr/bootstrapdatetimepickerjs"></script>
    <script src="~/csscsr/jquerycookie"></script>
    <script src="~/ckjs/ckeditor.js"></script>
    <script src="~/js/editor-ck.js" asp-append-version="true"></script>
</environment>
<environment names="Staging,Production">
    <script src="~/csscsr/jqueryhotkeysmin"></script>
    <script src="~/csscsr/momentwithlocalesjsmin"></script>
    <script src="~/csscsr/bootstrapdatetimepickerjsmin"></script>
    <script src="~/csscsr/jquerycookiemin"></script>
    <script src="~/ckjs/ckeditor.js"></script>
    <script src="~/js/editor-ck.min.js" asp-append-version="true"></script>
</environment>

Note that after customizing the script you need to create the minified production version yourself.

The second to last script is the main CKEditor script, you can override that one as well if you want to install your own copy of CKEditor itself or use a different or newer version than the one we have included as embedded resoiurces. But the editor-ck.js file is typically sufficient to add extra plugins or customize the toolbar.

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="~/ckjs/plugins/codesnippet/lib/highlight/styles/atelier-forest.light.css" rel="stylesheet">

and add this at the bottom in the scripts section:

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

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.