CKEditor Blazor 集成

Question

我正在尝试将 CKeditor 与 Blazor 一起使用。我使用 Online 构建器使用 ImageUpload 和 Base64UploadAdapter 创建自定义构建，并将其集成到 BlazorApp 中。

我可以成功地将它显示在页面上，并从中放入/获取 HTML 内容。Blazor 应用程序工作版本的来源位于https://gitlab.com/dn-misc/BlazorCKEditor1/

但由于我想直接在 HTML 内容中将图像作为 Base64 编码字符串插入，当我尝试上传图像时，出现以下错误：断言失败：输入参数不是 HTMLInputElement (来自 content-script.js)

Answer 1

我已经成功实施了克里斯普拉特的实施。看一下这个：

重要提示：这仅适用于 ClassicEditor。

Blazor 组件，我将其命名为InputCKEditor.razor。是的，我知道，不是很原创。

@namespace SmartApp.Components

@inherits InputTextArea
@inject IJSRuntime JSRuntime

<textarea @attributes="AdditionalAttributes"
          id="@Id"
          class="@CssClass"
          value="@CurrentValue"></textarea>

@code {
    string _id;
    [Parameter]
    public string Id
    {
        get => _id ?? $"CKEditor_{_uid}";
        set => _id = value;
    }

    readonly string _uid = Guid.NewGuid().ToString().ToLower().Replace("-", "");

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
            await JSRuntime.InvokeVoidAsync("CKEditorInterop.init", Id, DotNetObjectReference.Create(this));

        await base.OnAfterRenderAsync(firstRender);
    }

    [JSInvokable]
    public Task EditorDataChanged(string data)
    {
        CurrentValue = data;
        StateHasChanged();
        return Task.CompletedTask;
    }

    protected override void Dispose(bool disposing)
    {
        JSRuntime.InvokeVoidAsync("CKEditorInterop.destroy", Id);
        base.Dispose(disposing);
    }
}

然后，你必须将其放入你的interop.js中

CKEditorInterop = (() => {
    var editors = {};

    return {
        init(id, dotNetReference) {
            window.ClassicEditor
                .create(document.getElementById(id))
                .then(editor => {
                    editors[id] = editor;
                    editor.model.document.on('change:data', () => {
                        var data = editor.getData();

                        var el = document.createElement('div');
                        el.innerHTML = data;
                        if (el.innerText.trim() === '')
                            data = null;

                        dotNetReference.invokeMethodAsync('EditorDataChanged', data);
                    });
                })
                .catch(error => console.error(error));
        },
        destroy(id) {
            editors[id].destroy()
                .then(() => delete editors[id])
                .catch(error => console.log(error));
        }
    };
})();

现在是时候使用它了：

<form>
    <label class="col-xl-3 col-lg-3 col-form-label text-sm-left text-lg-right">Description</label>
    <div class="col-lg-9 col-xl-6">
        <InputCKEditor @bind-Value="_model.Description" class="form-control form-control-solid form-control-lg"></InputCKEditor>
        <ValidationMessage For="@(() => _model.Description)" />
    </div>
</form>