Sitko.Blazor.CKEditor

CKEditor component for Blazor Applications

Installation

dotnet add package Sitko.Blazor.CKEditor

Register in DI and configure in Program.cs

builder.Services.AddCKEditor(builder.Configuration);

and appsettings.json:

{
    "CKEditor": {
        "ScriptPath": "https://cdn.ckeditor.com/ckeditor5/28.0.0/classic/ckeditor.js",
        "EditorClassName": "ClassicEditor"
    }
}

Or in code:

services.AddCKEditor(Configuration, options =>
{
    options.ScriptPath = "https://cdn.ckeditor.com/ckeditor5/28.0.0/classic/ckeditor.js";
    options.EditorClassName = "ClassicEditor";
});

If you have custom build or separate css files - configure it via StylePaths:

{
    "CKEditor": {
        "ScriptPath": "/ckeditor/ckeditor.js",
        "StylePaths": {
            "base": "/ckeditor/ckeditor.css",
            "dark": "/ckeditor/ckeditor.dark.css"
        },
        "EditorClassName": "ClassicEditor"
    }
}

services.AddCKEditor(Configuration, options =>
{
    options.ScriptPath = "/ckeditor/ckeditor.js";
    options.StylePaths = new Dictionary<string, string>
        {
            { "base", "/ckeditor/ckeditor.css" }, { "dark", "/ckeditor/ckeditor.dark.css" },
        };
    options.EditorClassName = "ClassicEditor";
});

It is recommended to use separate css file with new blazor navigation and Auto render mode.

Add to App.razor

<script src="_content/Sitko.Blazor.CKEditor/ckeditor.js"></script>

Don't forget to link ckeditor js/css files

Add to _Imports.razor

@using Sitko.Blazor.CKEditor

Usage

<CKEditor @bind-Value="@Model.Field"></CKEditor>

Sitko.Blazor.CKEditor.Bundle

This package includes basic ckeditor build with light and dark themes. Install:

dotnet add package Sitko.Blazor.CKEditor.Bundle

Instead of AddCKEditor use:

builder.Services.AddCKEditorBundle(builder.Configuration);

and to appsettings.json

{
    "CKEditorBundle": {
        "Theme": "Dark"
    }
}