ToB企服应用市场:ToB评测及商务社交产业平台

标题: 贴代码框架PasteForm特性介绍之markdown和richtext [打印本页]

作者: 笑看天下无敌手    时间: 2024-11-17 17:21
标题: 贴代码框架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; }
  12.         ///<summary>
  13.         ///文本区域 模拟文本区域的输入
  14.         ///</summary>
  15.         [MaxLength(128)]
  16.         public string Desc { get; set; }
  17.         ///<summary>
  18.         ///文本区域 长度大于128则自动为textarea
  19.         ///</summary>
  20.         [MaxLength(256)]
  21.         public string Text { get; set; }
  22.         /////<summary>
  23.         /////文本区域 可以手动指定为textarea,同理你也可以指定为html,text
  24.         /////</summary>
  25.         //[MaxLength(128)]
  26.         //[ColumnDataType("textarea")]
  27.         //public string Mark { get; set; }
  28.         ///<summary>
  29.         ///富文本 模拟富文本,前端HTML的是使用wangEditv5,默认不配置maxlength的就是html
  30.         ///</summary>
  31.         public string Blog { get; set; }
  32.         /////<summary>
  33.         /////MarkDown1
  34.         /////</summary>
  35.         //[ColumnDataType("markdown")]
  36.         //public string Mark1 { get; set; }
  37.         ///<summary>
  38.         ///MarkDown2 有默认值的
  39.         ///</summary>
  40.         [ColumnDataType("markdown")]
  41.         public string Mark2 { get; set; } = "## 今日成果";
  42.     }
复制代码
由上面代码可知,只要在对应的字段上配置
[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的巧妙结合案例... .. .

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。




欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4