Using CKeditor

cloudscribe.Web.Common has everything you need to easily wire up CKEditor declaratively. In your .cshtml view file you need this:

@using cloudscribe.Web.Common.Models
@using cloudscribe.Web.Common.Components
@using Microsoft.Extensions.Options
@inject ICkeditorOptionsResolver editorOptionsResolver
@{
    var ckOptions = await editorOptionsResolver.GetCkeditorOptions();
}

<textarea class="form-control" rows="5" asp-for="YourEditableViewModelProperty"
  data-ckeditor-unobtrusive="" 
  data-ckeditor-config-url="@ckOptions.CustomConfigPath"
  data-ckeditor-config-language="@ckOptions.LanguageCode"
  data-ckeditor-config-dropfileuploadurl="@ckOptions.DropFileUrl"
  data-ckeditor-config-filebrowserurl="@ckOptions.FileBrowseUrl"
  data-ckeditor-config-imagebrowseurl="@ckOptions.ImageBrowseUrl"
  ></textarea>
  
@{ await Html.RenderPartialAsync("_UnobtrusiveEditorScriptsPartial"); }

The _UnobtrusiveEditorScriptsPartial can be copied locally if you need to override the scripts there.

By default the CustomConfigPath points to a minified version of cloudscribe-ckeditor-config.js, but you can easily point it to another url if you need to customize the CKeditor configuration from appsettings.json like this:

 "CkeditorOptions": {
    "CustomConfigPath": "relativeurltoyourcustomconfig.js"
  }

You can also use cloudscribe.FileManager.Web to support image upload and server browsing, and even drag/drop images right into the editor and they will be automatically uploaded and resized if needed. If using cloudscribe.Core the filemanager is wired up to the settings for you automatically, but if you need to use cloudscribe.FileManager without cloudscribe.Core you could wire them up from appsettings.json like this:

CkeditorOptions": {
    "CustomConfigPath": "/cr/js/cloudscribe-ckeditor-config.min.js",
    "FileBrowseUrl": "/filemanager/filedialog?type=file",
    "ImageBrowseUrl": "/filemanager/filedialog?type=image",
    "DropFileUrl": "/filemanager/dropfile"
  }

Of course you don't have to always use ICkeditorOptionsResolver, you can just hard code the data- attributes, especially if a particular editor instance needs very different configuration and features than other editors in use in other places. There are also more data- attributes that are supported by the javascript, you can specify a toolbar for example using data-ckeditor-config-toolbar="yourtoolbarname" but it must be a named toolbar included in the config file. To see what other data- attributes are supported you can read the javascript cloudscribe-ckeditor-unobtrusive.js