CKEditor Blazor 集成答案

【问题标题】：CKEditor Blazor integrationCKEditor Blazor 集成
【发布时间】：2020-12-29 08:41:27
【问题描述】：

我正在尝试将 CKeditor 与 Blazor 一起使用。我使用 Online builder 创建了一个自定义构建，带有 ImageUpload 和 Base64UploadAdapter，它集成在 BlazorApp 中。

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

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

【问题讨论】：

嗨 Dino 我只是在查看您的来源。除了无法验证您的脚本外，我看不出任何错误。 Index.html 在哪里？我在这里工作的来源几乎相同。
这是 Blazor，所以 index.html 页面是从 /pages/Index.razor 生成的。站点的布局是从 /shared/MainLayout.razor 创建的 CKEditor 脚本位于 /wwwroot/ckeditor/
Index html 加载应用程序和应用程序所需的脚本。通常在他的 www 文件夹中有一个 Index.html。然后，应用程序会加载通常在 Index.razor 中按惯例定义的路由“/”。我在找：
此 repo 具有 base 64 图像选项 github.com/BrianLParker/BlazorCkEditor5 。不过它在预览版 8 中。
所有脚本包含在/Pages/_Host.cshtml中。

标签： html file-upload ckeditor blazor

【解决方案1】：

我已经成功实现了Chris Pratt 的实现。看看这个：

重要提示：这仅适用于 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>

【讨论】：

以上代码导致运行时错误：处理请求时发生未处理的异常。 NullReferenceException：对象引用未设置为对象的实例。 Blog.Web.Pages.Article.b__9_0(RenderTreeBuilder __builder2)
因为我们要绑定输入，所以需要用 Blazor 包装 InputCKEditor。祝你好运。