
Editor 富文本框
将输入的文字转化为 html
代码片段
Editor
组件是对 Summernote 组件
的二次封装,如需使用本地化功能请自行官网下载相对应语言包,自行引用即可
基础用法
默认呈现为 div
点击后变为富文本编辑框
Demo
通过设置 IsEditor
属性值来控制组件默认是 div
还是 editor
我是一个普通的
div
点击无法编辑自定义提示信息
通过设置 Placeholder
属性来设置空值时的提示消息
Demo
默认提示是 点击后进行编辑
默认显示为富文本编辑框
通过设置 IsEditor
属性来设置组件直接显示为富文本编辑框
Demo
自定义高度
通过设置 Height
属性来设置组件高度
Demo
双向绑定
实战中通过双向绑定到 Value
后台自动获取到客户端富文本框编辑内容
Demo
通过 bind-Value
对 EditorValue
后台属性进行双向绑定,编辑框内进行编辑后点击 完成 按钮,下方文本框内即可显示编辑后结果
自定义扩展编辑框按钮
通过设置 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 = " — "
}
};
}
}