CkEditor5.Blazor 10.48.1

This package, CKEditor5.Blazor, is a Blazor wrapper for CKEditor 5, a rich text editor. It allows seamless integration of CKEditor 5 into Blazor applications, providing various editor variants such as Classic, Inline, Balloon, and Document editors. The package includes necessary configurations and JavaScript interop to facilitate the use of CKEditor 5 within Blazor components.

Installation

Install the package

dotnet add package CkEditor5.Blazor

Add the stylesheet to your App.razor or index.html

<link rel="stylesheet" href="./_content/CkEditor5.Blazor/css/ckeditor5.css" />

Add the premium features stylesheet if you are using premium plugins:

<link rel="stylesheet" href="./_content/CkEditor5.Blazor/css/ckeditor5-premium-features.css" />

Add the source editing code-mirror stylesheet if you are using the SourceEditingCodeMirror plugin:

<link href="./_content/CkEditor5.Blazor/css/ckeditor5-sourceediting-codemirror.css" rel="stylesheet" />

Usage

For simple usage without data handling, use the component like this:

<CkEditor  />

To handle data changes, use the OnValueChange event handler:

<CkEditor OnValueChanged="HandleChangeMethod" />

You can also set initial data using the Value parameter:

<CkEditor Value="InitialData" OnValueChanged="HandleChangeMethod" />

Alternatively, use a ref on the component to get and set data with the GetData and SetData methods:

<CkEditor @ref="editor" />

@code {
    // The editor is a textarea element
    private ElementReference editor;

    private void HandleChangeMethod(string data)
    {
        // Handle the data
    }

    private void SetDataMethod()
    {
        editor.SetData("Some data");
    }
    
    private void GetSomeData()
    {
        string data = editor.GetData();
    }
}

Configuration

By default, the editor uses a default configuration. You can customize it by setting your own configuration:

<CkEditor5 Configuration="@MyConfiguration" />

@code {
    private CkEditorConfiguration MyConfiguration = new CkEditorConfiguration
    {
        ["toolbar"] = new
        {
            Items = new[]
            {
                "heading",
                "|",
                "bold",
                "italic",
                "link",
                "bulletedList",
                "numberedList",
                "|",
                "undo",
                "redo"
            }
        },
        ["plugins"] = new object[]
        {
            "Heading",
            "Bold",
            "Italic",
            "Link",
            "List",
            "Undo",
            "Redo"
        },
         ["fontFamily"] = new { supportAllValues = true },
         // ...etc 
    };
}

For a full list of configuration options, refer to the CKEditor5 documentation. You can also view the default configuration in the CkEditor5Configuration.cs file in the source code, which includes the full list of open-source configuration options used by default.

API

The component has the following parameters:

Versioning

The initial version is 9.44.1, which refers to .NET version 9, CKEditor5 major version 44, and the last number is reserved for work done in this project. This versioning scheme makes it easier to select the appropriate version for your project or so I think 😃

Premium Plugins

The premium plugins are imported and can be configured, but they have not been tested yet. Please note that some features require special configuration or additional JS files to function correctly. Refer to the CKEditor5 documentation for more information.

SaaS features

• Real-time collaboration
• CKBox
• Export to PDF
• Export to Word
• Import from Word

Standalone/offline plugins

• Asynchronous collaboration features, including:
• Track changes
• Comments
• Revision history
• AI Assistant
• Case change
• Document outline
• Format painter
• Merge fields
• Multi-level list
• Pagination
• Paste from Office enhanced
• Slash commands
• Table of contents
• Templates

Issues

In the CKEditor component, anything other than the ClassicEditor cannot use a textarea. Hence, when passing data, it has to be in a regular tag like a div. Unfortunately, you have to cast the data from a string to a MarkupString, which can cause errors when updating the field unless the markup @((MarkupString)Value) is surrounded by tags. I chose a non-existent tag like <x> in <x>@((MarkupString)Value)</x> because in tests it appears to disappear after the first load. If this is not done, the following errors may repeatedly appear in the console:

• TypeError: Cannot read properties of null (reading 'removeChild')
• TypeError: Cannot read properties of undefined (reading 'parentNode')

If you have a solution to this, let me know.

Third-party plugins

If you require a third-party plugin, please inform me, and I will add it to the project. Alternatively, you can create a pull request with the necessary changes, and I will review and merge it. Note the plugin must be compatible with the latest version of CKEditor5 in this project.

Currently added third-party plugins:

• CKEditor5 Source Editing CodeMirror