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...
An error has occurred. This application may no longer respond until reloaded. Reload