富文本 (RichText)

基于wangEditor.js实现。

概述

基于wangEditor.js实现
编辑器配置通过Option参数设置
配置选项参考：wangEditor文档
图片和视频默认上传本地服务器
图片和视频也可上传至云，需在index.html中应用OSS或COS的sdk
阿里OSS设置参考：OSS-SDK
腾讯COS设置参考：COS-SDK

代码演示

1.默认示例

内容：

namespace WebSite.Docus.Inputs.RichTexts;

class RichText1 : BaseComponent
{
    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        builder.Field<RichText>("内容：", "RichText1").Value("<h1>孙膑是辅助和法师。</h1>")
               .Set(f => f.Option, new
               {
                   Height = 200,
                   Placeholder = "请输入通知内容"
               })
               .Build();
    }
}

2.事件示例

内容：

namespace WebSite.Docus.Inputs.RichTexts;

class RichText2 : BaseComponent
{
    private string? message;

    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        builder.Field<RichText>("内容：", "RichText2")
               .ValueChanged(OnValueChanged)
               .Set(f => f.Option, new
               {
                   Placeholder = "请输入通知内容",
                   UploadImgShowBase64 = true //支持贴图
               }).Build();
        builder.Div("tips", message);
    }

    private void OnValueChanged(string value)
    {
        message = value;
        StateChanged();
    }
}

3.控制示例

可见

可用

只读

内容：

namespace WebSite.Docus.Inputs.RichTexts;

class RichText3 : BaseComponent
{
    private RichText? richText;

    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        builder.Component<FieldControl>()
               .Set(c => c.OnVisibleChanged, OnVisibleChanged)
               .Set(c => c.OnEnabledChanged, OnEnabledChanged)
               .Set(c => c.OnReadOnlyChanged, OnReadOnlyChanged)
               .Set(c => c.SetValue, SetValue)
               .Set(c => c.GetValue, GetValue)
               .Build();

        builder.Field<RichText>("内容：", "RichText3").Build(value => richText = value);
    }

    private void OnVisibleChanged(bool value) => richText?.SetVisible(value);
    private void OnEnabledChanged(bool value) => richText?.SetEnabled(value);
    private void OnReadOnlyChanged(bool value) => richText?.SetReadOnly(value);
    private void SetValue() => richText?.SetValue("<h1>孙膑</h1>");
    private string? GetValue() => richText?.Value;
}

4.自定义上传

内容：

namespace WebSite.Docus.Inputs.RichTexts;

class RichText4 : BaseComponent
{
    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        builder.Field<RichText>("内容：", "RichText4")
               .Set(f => f.Option, new
               {
                   Height = 200,
                   Placeholder = "请输入通知内容"
               })
               .Set(f => f.Storage, new StorageOption
               {
                   Type = StorageType.Server,//默认本地服务器，支持阿里云OSS和腾讯云COS
                   KeyId = "accessKeyId",
                   KeySecret = "accessKeySecret",
                   Region = "your region",
                   Bucket = "your bucket name"
               })
               .Build();
    }
}