
CherryMarkdown 腾讯富文本框
基于 CherryMarkdown 的富文本框组件
基础用法
使用双向绑定获取对应的 html
和 markdown
内容
Demo
自行处理文件上传事件
使用OnFileUpload
事件处理文件上传事件,支持直接粘贴图片到浏览器
Demo
自定义内容
通过ToolbarSettings
自定义工具栏,通过EditorSettings
自定义编辑器样式
Demo
浏览模式
纯浏览模式,没有编辑器
Demo
外部控制组件
使用CherryMarkdown的Api在外部控制内容
Demo
Attributes
Loading...
@page "/cherry-markdowns"
<h3>CherryMarkdown 腾讯富文本框</h3>
<h4>基于 CherryMarkdown 的富文本框组件</h4>
<DemoBlock Title="基础用法" Introduction="使用双向绑定获取对应的 <code>html</code> 和 <code>markdown</code> 内容">
<CherryMarkdown @bind-Value="MarkdownString" @bind-Html="HtmlString" style="height: 400px"></CherryMarkdown>
<div class="mt-3">
<textarea class="form-control" rows="6" disabled="disabled">
@MarkdownString
</textarea>
</div>
<div class="mt-3">
<textarea class="form-control" rows="6" disabled="disabled">
@HtmlString
</textarea>
</div>
</DemoBlock>
<DemoBlock Title="自行处理文件上传事件" Introduction="使用<code>OnFileUpload</code>事件处理文件上传事件,支持直接粘贴图片到浏览器">
<CherryMarkdown OnFileUpload="OnFileUpload"></CherryMarkdown>
</DemoBlock>
<DemoBlock Title="自定义内容" Introduction="通过<code>ToolbarSettings</code>自定义工具栏,通过<code>EditorSettings</code>自定义编辑器样式">
<CherryMarkdown ToolbarSettings="@ToolbarSettings" EditorSettings="@EditorSettings"></CherryMarkdown>
</DemoBlock>
<DemoBlock Title="浏览模式" Introduction="纯浏览模式,没有编辑器">
<CherryMarkdown @bind-Value="MarkdownString" @bind-Html="HtmlString" style="height: 400px" IsViewer="true"></CherryMarkdown>
</DemoBlock>
<DemoBlock Title="外部控制组件" Introduction="使用CherryMarkdown的Api在外部控制内容">
<CherryMarkdown @ref="@MarkdownElement"></CherryMarkdown>
<Button OnClick="@(async () => { await MarkdownElement.DoMethodAsync("toolbar.toolbarHandlers.insert", "checklist");})">插入一个CheckList</Button>
<Button OnClick="@(async () => { await MarkdownElement.DoMethodAsync("insert", "", false, false, true);})">插入一张图片</Button>
</DemoBlock>
<AttributeTable Items="GetAttributes()"></AttributeTable>
// 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 Microsoft.AspNetCore.Components;
using Microsoft.Extensions.Options;
namespace BootstrapBlazor.Shared.Samples;
/// <summary>
///
/// </summary>
public partial class CherryMarkdowns
{
private string? MarkdownString { get; set; }
private string? HtmlString { get; set; }
[NotNull]
private CherryMarkdown? MarkdownElement { get; set; }
private EditorSettings EditorSettings { get; set; } = new EditorSettings() { DefaultModel = "editOnly" };
private ToolbarSettings ToolbarSettings { get; set; } =
new ToolbarSettings() { Toolbar = new List<object> { "italic", new { insert = new List<string>() { "image" } } }, Bubble = new List<string>() { "bold" }, Float = new List<string>() { "h1" } };
[Inject]
[NotNull]
private IOptionsMonitor<WebsiteOptions>? SiteOptions { get; set; }
/// <summary>
/// OnInitialized
/// </summary>
protected override void OnInitialized()
{
base.OnInitialized();
MarkdownString = "# test";
}
private async Task<string> OnFileUpload(CherryMarkdownUploadFile arg)
{
var url = Path.Combine("images", "uploader",
$"{Path.GetFileNameWithoutExtension(arg.FileName)}-{DateTimeOffset.Now:yyyyMMddHHmmss}{Path.GetExtension(arg.FileName)}");
var fileName = Path.Combine(SiteOptions.CurrentValue.WebRootPath, url);
var ret = await arg.SaveToFile(fileName);
return ret ? url : "";
}
private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
{
new AttributeItem(){
Name = "EditorSettings",
Description = "编辑器设置",
Type = "EditorSettings",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem(){
Name = "ToolbarSettings",
Description = "工具栏设置",
Type = "ToolbarSettings",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem(){
Name = "Value",
Description = "组件值",
Type = "string",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem(){
Name = "Html",
Description = "组件 Html 代码",
Type = "string",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem(){
Name = "OnFileUpload",
Description = "文件上传回调方法",
Type = "Func<CherryMarkdownUploadFile, Task<string>>",
ValueList = " — ",
DefaultValue = " — "
},
new AttributeItem(){
Name = "IsViewer",
Description = "组件是否为浏览器模式",
Type = "bool",
ValueList = "true/false",
DefaultValue = "false"
}
};
}