Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

Editor 富文本框

将输入的文字转化为 html 代码片段

Editor 组件是对 Summernote 组件 的二次封装,如需使用本地化功能请自行官网下载相对应语言包,自行引用即可

基础用法

默认呈现为 div 点击后变为富文本编辑框

Demo

通过设置 IsEditor 属性值来控制组件默认是 div 还是 editor

我是一个普通的 div 点击无法编辑

自定义提示信息

通过设置 Placeholder 属性来设置空值时的提示消息

Demo

默认提示是 点击后进行编辑

默认显示为富文本编辑框

通过设置 IsEditor 属性来设置组件直接显示为富文本编辑框

Demo

自定义高度

通过设置 Height 属性来设置组件高度

Demo

双向绑定

实战中通过双向绑定到 Value 后台自动获取到客户端富文本框编辑内容

Demo

通过 bind-ValueEditorValue 后台属性进行双向绑定,编辑框内进行编辑后点击 完成 按钮,下方文本框内即可显示编辑后结果

自定义扩展编辑框按钮

通过设置 CustomerPluginItems 属性对编辑框工具栏进行自定义扩展, 通过设置 OnClickPluginItem 回调委托做功能

Demo

本例中通过扩展 CustomerPluginItems 属性在工具栏中增加了两个按钮,点击按钮弹出 SweetAlert 模态框,点击模态框确认按钮后文本框中插入一段内容

自定义工具栏的富文本编辑框

通过设置 ToolbarItems 属性自定义工具栏内容,目前支持的工具栏值请参见 Summernote 官网

Demo

本例中通过设置 ToolbarItems 属性,更改默认可用的工具栏按钮

Attributes

Loading...
@page "/editors"
@inject SwalService SwalService

<h3>Editor 富文本框</h3>

<h4>将输入的文字转化为 <code>html</code> 代码片段</h4>

<p><code>Editor</code> 组件是对 <a href="https://summernote.org/" target="_blank"><code>Summernote 组件</code></a> 的二次封装,如需使用本地化功能请自行官网下载相对应语言包,自行引用即可</p>

<Block Title="基础用法" Introduction="默认呈现为 <code>div</code> 点击后变为富文本编辑框">
    <p>通过设置 <code>IsEditor</code> 属性值来控制组件默认是 <code>div</code> 还是 <code>editor</code></p>
    <div class="form-control mb-3">我是一个普通的 <code>div</code> 点击无法编辑</div>
    <Editor></Editor>
</Block>

<Block Title="自定义提示信息" Introduction="通过设置 <code>Placeholder</code> 属性来设置空值时的提示消息">
    <p>默认提示是 <b>点击后进行编辑</b></p>
    <Editor Placeholder="自定义空值的提示信息"></Editor>
</Block>

<Block Title="默认显示为富文本编辑框" Introduction="通过设置 <code>IsEditor</code> 属性来设置组件直接显示为富文本编辑框">
    <Editor IsEditor="true"></Editor>
</Block>

<Block Title="自定义高度" Introduction="通过设置 <code>Height</code> 属性来设置组件高度">
    <Editor IsEditor="true" Height="400"></Editor>
</Block>

<Block Title="双向绑定" Introduction="实战中通过双向绑定到 <code>Value</code> 后台自动获取到客户端富文本框编辑内容">
    <p>通过 <code>bind-Value</code> 对 <code>EditorValue</code> 后台属性进行双向绑定,编辑框内进行编辑后点击 <b>完成</b> 按钮,下方文本框内即可显示编辑后结果</p>
    <Editor @bind-Value="@EditorValue" OnValueChanged="@OnValueChanged"></Editor>

    <label class="control-label mt-3">显示编辑内容:</label>
    <textarea class="form-control mt-3">@EditorValue</textarea>
    <div class="mt-3">
        <Button OnClick="SetValue">Reset</Button>
    </div>
</Block>

<Block Title="自定义扩展编辑框按钮" Introduction="通过设置 <code>CustomerPluginItems</code> 属性对编辑框工具栏进行自定义扩展, 通过设置 <code>OnClickPluginItem</code> 回调委托做功能">
    <p>本例中通过扩展 <code>CustomerPluginItems</code> 属性在工具栏中增加了两个按钮,点击按钮弹出 <code>SweetAlert</code> 模态框,点击模态框确认按钮后文本框中插入一段内容</p>
    <Editor IsEditor="true" OnClickButton="@PluginClick" CustomerToolbarButtons="@EditorPluginItems"></Editor>
</Block>

<Block Title="自定义工具栏的富文本编辑框" Introduction="通过设置 <code>ToolbarItems</code> 属性自定义工具栏内容,目前支持的工具栏值请参见 <a href='https://summernote.org/' target='_blank'>Summernote</a> 官网">
    <p>本例中通过设置 <code>ToolbarItems</code> 属性,更改默认可用的工具栏按钮</p>
    <Editor IsEditor="true" ToolbarItems="@ToolbarItems"></Editor>
</Block>

<SweetAlert />

<AttributeTable Items="@GetAttributes()" />
// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
// Website: https://www.blazor.zone or https://argozhang.github.io/

using BootstrapBlazor.Components;
using BootstrapBlazor.Shared.Common;
using System.Collections.Generic;
using System.Threading.Tasks;

namespace BootstrapBlazor.Shared.Pages
{
    /// <summary>
    /// 
    /// </summary>
    public sealed partial class Editors
    {
        private string EditorValue { get; set; } = "初始值 <b>Test</b>";

        private Task OnValueChanged(string val)
        {
            EditorValue = val;
            return Task.CompletedTask;
        }

        private void SetValue()
        {
            EditorValue = "更改后的值";
        }

        private List<EditorToolbarButton> EditorPluginItems { get; } = new List<EditorToolbarButton>()
        {
            new EditorToolbarButton()
            {
                IconClass = "fa fa-pencil",
                ButtonName = "plugin1",
                Tooltip = "这是 plugin1 的提示"
            },
            new EditorToolbarButton()
            {
                IconClass = "fa fa-home",
                ButtonName = "plugin2",
                Tooltip = "这是 plugin2 提示"
            }
        };

        private async Task<string> PluginClick(string pluginItemName)
        {
            var ret = "";
            if (pluginItemName == "plugin1")
            {
                var op = new SwalOption()
                {
                    Title = "点击plugin1按钮后弹窗",
                    Content = "点击插件按钮后弹窗并确认后才进行下一步处理",
                    IsConfirm = true
                };
                if (await SwalService.ShowModal(op))
                {
                    ret = "<div class='text-danger'>从plugin1返回的数据</div>";
                }
            }
            if (pluginItemName == "plugin2")
            {
                var op = new SwalOption()
                {
                    Title = "点击plugin2按钮后弹窗",
                    Content = "点击插件按钮后弹窗并确认后才进行下一步处理",
                    IsConfirm = true
                };
                if (await SwalService.ShowModal(op))
                {
                    ret = "从plugin2返回的数据";
                }
            }
            return ret;
        }

        private List<object> ToolbarItems { get; } = new List<object>
        {
            new List<object> {"style", new List<string>() {"style"}},
            new List<object> {"font", new List<string>() {"bold", "underline", "clear"}}
        };

        private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
        {
            // TODO: 移动到数据库中
            new AttributeItem() {
                Name = "Placeholder",
                Description = "空值时的提示信息",
                Type = "string",
                ValueList = " — ",
                DefaultValue = "点击后进行编辑"
            },
            new AttributeItem() {
                Name = "IsEditor",
                Description = "是否直接显示为富文本编辑框",
                Type = "bool",
                ValueList = "true|false",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "Height",
                Description = "组件高度",
                Type = "int",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem()
            {
                Name = "ToolbarItems",
                Description = "富文本框工具栏工具",
                Type = "IEnumerable<object>",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem()
            {
                Name = "CustomerToolbarButtons",
                Description = "自定义按钮",
                Type = "IEnumerable<EditorToolbarButton>",
                ValueList = " — ",
                DefaultValue = " — "
            }
        };
    }
}

B 站相关视频链接

暂无

交流群

QQ群:BootstrapAdmin & Blazor 795206915(满) 675147445 欢迎加群讨论
Themes
Bootstrap
Ant Design (完善中)
Bluma (完善中)
LayUI (完善中)
An error has occurred. This application may no longer respond until reloaded. Reload