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 file - configure it via StylePath:

{
    "CKEditor": {
        "ScriptPath": "/ckeditor/ckeditor.js",
        "StylePath": "/ckeditor/ckeditor.css",
        "EditorClassName": "ClassicEditor"
    }
}

services.AddCKEditor(Configuration, options =>
{
    options.ScriptPath = "/ckeditor/ckeditor.js";
    options.StylePath = "/ckeditor/ckeditor.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"
    }
}