Bootstrap Blazor中的富文本编辑器（Editor）如何禁用？

原创已于 2023-12-15 17:47:27 修改 · 1k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #前端 #html

于 2023-12-13 17:53:33 首次发布

ASP.NET Core Blazor 同时被 2 个专栏收录

32 篇文章

订阅专栏

9 篇文章

订阅专栏

本文介绍了如何在BootstrapBlazor的Editor组件中，由于官方未提供disable功能，通过JavaScript自定义函数实现富文本编辑器的禁用，以便在预览模式下只显示内容，不支持编辑。

Bootstrap Blazor是一套件balzor开源的控件（组件）库。

Bootstrap Blazor的富文本编辑器（Editor）没有直接提供disable功能，不能在“仅预览”富文本。

下面是实践如何禁用的方法：

1）在javascript中创建函数，具体说明见注释部分：

/**
 * 禁用summernote的编辑功能和toolbar
 */
function disableSummernote() {
    /*清空toolbar*/
    $('#summernote').summernote({
        toolbar: [
            // [groupName, [list of button]]
            //['style', ['bold', 'italic', 'underline', 'clear']],
            //['font', ['strikethrough', 'superscript', 'subscript']],
            //['fontsize', ['fontsize']],
            //['color', ['color']],
            //['para', ['ul', 'ol', 'paragraph']],
            //['height', ['height']]
        ]
    });
    /*禁用summernote编辑*/
    $('#summernote').summernote('disable');
}

2）在Editor控件（组件）中的定义id和鼠标经过事件：

<Editor @ref="_editor" ToolbarItems="@ToolbarItems" ShowSubmit="false" PlaceHolder="" IsEditor="false" onmouseover="disableSummernote()" onmousedown="disableSummernote()" Id="summernote" />

我同时定义了οnmοuseοver="disableSummernote()" οnmοusedοwn="disableSummernote()"两个。

注意也要指定一下ID。

不知道还有没有其它办法。