Blazor Ckeditor Component

//[doc-params]
{
    "UI": ["Blazor", "BlazorServer"]
}

The Blazor version of Ckeditor is suitable for both Blazor Server and Blazor WebAssembly.

Installation

• Install the Dignite.Abp.AspNetCore.Components.CkEditor NuGet package in your Blazor project.

Usage

Import the following namespace at the top of your page:

@using Dignite.Abp.AspNetCore.Components.CkEditor

Basic Usage

<CkEditor @bind-Content="Content">
</CkEditor>

public partial class TestCkEditor
{
    // Get or set the content of the Ckeditor
    public string Content { get; set; } = "CkEditor Default Content";
}

Upload Images

First, set the container for storing images. For specific steps, please refer to ABP BlobStoring and Dignite Abp Files.

In this example, it's assumed that a container named TestPicStore has already been created.

<CkEditor @bind-Content="Content" ImagesContainerName="TestPicStore">
</CkEditor>

Click the Insert Image tool, select a local file to upload it to the container named TestPicStore, and insert it into the editing area.

Insert Video Media

In addition to the media supported by Ckeditor by default, this component also supports Tencent Video, Youku Video, and Xigua Video.

Video Media Parsing

Since Ckeditor converts inserted media into code like the following:

<figure class="media"><oembed url="https://www.youtube.com/watch?v=Xf3ZUfESLeo"></oembed></figure>

You need to parse the video media from Ckeditor in the output page. Here's a sample code:

/**
 * Parse videos inserted from ckeditor
 */
$(function () {
    // Select all <figure> elements with class "media"
    var figureElements = document.querySelectorAll('figure.media');
    var mediaEmbedProviders = [
        {
            name: 'ixigua',
            url: /^https:\/\/www\.ixigua\.com\/(\d+)(\?logTag=[\w\d]+)?/,
            html: match => {
                return `<iframe src='https://www.ixigua.com/iframe/${match[1]}?autoplay=0' title="Ixigua video player" allowFullScreen></iframe>`;
            }
        },
        {
            name: 'youtube',
            url: /https:\/\/www\.youtube\.com\/watch\?v=([^"']+)?/,
            html: match => {
                return `<iframe src="https://www.youtube.com/embed/${match[1]}" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>`;
            }
        }
    ];

    // Loop through each <figure> element
    figureElements.forEach(function (figure) {
        var oembedElement = figure.firstChild;
        mediaEmbedProviders.forEach(function (provider) {
            var match = oembedElement.getAttribute('url').match(provider.url);
            if (match && match.length > 1) {
                var videoContainer = document.createElement('div');
                videoContainer.classList.add('ratio', 'ratio-16x9');
                videoContainer.innerHTML = provider.html(match);
                figure.appendChild(videoContainer);
            }
        });
    });
});