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/SharedFolder, 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 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 embedded. But the editor-ck.js file is typically sufficient to add extra plugins or customize the toolbar.