贴代码框架PasteForm特性介绍之markdown和richtext

安驿

简介

PasteForm是贴代码推出的 “新一代CRUD” ，基于ABPvNext，目的是通过对Dto的特性的标注，从而实现管理端的统一UI，借助于配套的PasteBuilder代码生成器，你可以快速的为自己的项目构建后台管理端！目前管理端只有Html+js版本的，后续将支持小程序，Vue等
案例源码

案例源码在

1. https://gitee.com/pastecode/paste-template

复制代码

不定期升级
AllInDto!

通过引入PasteForm，一个项目哪怕100个数据表，一般的管理页面也才不到10个，除非有非常多的特殊功能，否则都能用PasteForm中的表格和表单来实现！

MarkDown

在开发管理端过程中，有时候也需要使用用到Markdown，之前已经接入了Richtext,本次升级也一并把这个带进去了！
首先你需要从案例项目的PasteTemplate的前端模块
PasteTemplate.HttpApi.Host/wwwroot/page/lib/editor.md/
注意这个里面就是Markdown用到的组件，用的是三方的！
特性信息

如果是字符串，没有设置maxlength，默认就会变更成richtext，也可以手动强制配置,当前特性适用于richtext和markdown
字段类型示例说明args1字符500配置高度,默认为500args2字符txt表示另外一个值存储在哪个字段，所以另外一个字段一般设置隐藏args3字符/api/app/Upload/Image图片上传的地址以上信息同样适用于richtext
案例UI

以上是我用双屏截图的，其实是一个完整的页面，注意看页面的表单中包含了text,textarea,richtext,markdown
那么他对应的dto是如何写的？
Dto对应代码

1.     /// <summary>
2.     ///
3.     /// </summary>
4.     public class StringDto
5.     {
6.         ///<summary>
7.         ///姓名 模拟短文本输入
8.         ///</summary>
9.         [MaxLength(32)]
10.         [Required]
11.         public string Name { get; set; }
13.         ///<summary>
14.         ///文本区域 模拟文本区域的输入
15.         ///</summary>
16.         [MaxLength(128)]
17.         public string Desc { get; set; }
19.         ///<summary>
20.         ///文本区域 长度大于128则自动为textarea
21.         ///</summary>
22.         [MaxLength(256)]
23.         public string Text { get; set; }
25.         /////<summary>
26.         /////文本区域 可以手动指定为textarea,同理你也可以指定为html,text
27.         /////</summary>
28.         //[MaxLength(128)]
29.         //[ColumnDataType("textarea")]
30.         //public string Mark { get; set; }
32.         ///<summary>
33.         ///富文本 模拟富文本，前端HTML的是使用wangEditv5,默认不配置maxlength的就是html
34.         ///</summary>
35.         public string Blog { get; set; }
37.         /////<summary>
38.         /////MarkDown1
39.         /////</summary>
40.         //[ColumnDataType("markdown")]
41.         //public string Mark1 { get; set; }
43.         ///<summary>
44.         ///MarkDown2 有默认值的
45.         ///</summary>
46.         [ColumnDataType("markdown")]
47.         public string Mark2 { get; set; } = "## 今日成果";
49.     }

复制代码

由上面代码可知，只要在对应的字段上配置
[ColumnDataType("markdown")]即可
或者你也可以配置特性为[PasteMarkDown]
他们两个是等效的，可以说ColumnDataTypeAttribute是所有贴代码框架特性的基础属性
像PasteClass,PasteHidden,PasteButton等最终都是为了转化成ColumnDataTypeAttribute
提交信息

上面的UI中，我们是随便填写点东西后，提交，看到的提交信息如下

暂时先忽略mark2mdeditor-html-code和mark2mdeditor-markdown-doc字段，这个是markdown框架里面带了name被parseform来了，后续再考虑去掉他！
从上面的提交可以看到mark2是有内容的！
符合预期！
注意

由于markdown和richtext的特殊性，关于字段长度的设置需要按照实际来填写！
看特性信息args2，这个字段如何配置了，则需要对这个字段的特性标注为hidden
这样在UI上args2的字段是不显示的，而提交数据给后台，则可以接收到！
我们下期将介绍select和reload的巧妙结合案例... .. .

来源:https://www.cnblogs.com/pastespider/p/18550547
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！