首页 > 其他分享 >贴代码框架PasteForm特性介绍之markdown和richtext

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

时间:2024-11-17 14:45:12浏览次数:1  
标签:markdown string get richtext set PasteForm public

简介

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

案例源码

案例源码在

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

不定期升级

AllInDto!

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

image

MarkDown

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

特性信息

如果是字符串,没有设置maxlength,默认就会变更成richtext,也可以手动强制配置,当前特性适用于richtext和markdown

字段 类型 示例 说明
args1 字符 500 配置高度,默认为500
args2 字符 txt 表示另外一个值存储在哪个字段,所以另外一个字段一般设置隐藏
args3 字符 /api/app/Upload/Image 图片上传的地址

以上信息同样适用于richtext

案例UI

image

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

Dto对应代码

    /// <summary>
    /// 
    /// </summary>
    public class StringDto
    {
        ///<summary>
        ///姓名 模拟短文本输入
        ///</summary>
        [MaxLength(32)]
        [Required]
        public string Name { get; set; }

        ///<summary>
        ///文本区域 模拟文本区域的输入
        ///</summary>
        [MaxLength(128)]
        public string Desc { get; set; }

        ///<summary>
        ///文本区域 长度大于128则自动为textarea
        ///</summary>
        [MaxLength(256)]
        public string Text { get; set; }

        /////<summary>
        /////文本区域 可以手动指定为textarea,同理你也可以指定为html,text
        /////</summary>
        //[MaxLength(128)]
        //[ColumnDataType("textarea")]
        //public string Mark { get; set; }

        ///<summary>
        ///富文本 模拟富文本,前端HTML的是使用wangEditv5,默认不配置maxlength的就是html
        ///</summary>
        public string Blog { get; set; }

        /////<summary>
        /////MarkDown1 
        /////</summary>
        //[ColumnDataType("markdown")]
        //public string Mark1 { get; set; }

        ///<summary>
        ///MarkDown2 有默认值的
        ///</summary>
        [ColumnDataType("markdown")]
        public string Mark2 { get; set; } = "## 今日成果";

    }

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

提交信息

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

image

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

符合预期!

注意

由于markdown和richtext的特殊性,关于字段长度的设置需要按照实际来填写!
看特性信息args2,这个字段如何配置了,则需要对这个字段的特性标注为hidden
这样在UI上args2的字段是不显示的,而提交数据给后台,则可以接收到!

我们下期将介绍select和reload的巧妙结合案例... .. .

标签:markdown,string,get,richtext,set,PasteForm,public
From: https://www.cnblogs.com/pastespider/p/18550547

相关文章

  • Markdown使用教程
    :smile:表情:结构......
  • 鸿蒙 next 使用并封装富文本 hp-richtext
    鸿蒙next使用并封装富文本hp-richtext使用鸿蒙第三方富文本(https://ohpm.openharmony.cn/#/cn/detail/@ohasasugar%2Fhp-richtext),并再将其包一层实现自己的富文本组件,这样的好处是以后可以自己再里面添加一下逻辑,或者以后可以更换成其他的富文本组件。import{HPRichTe......
  • CSDN批量导出文章为markdown,(给我文章自动转成vip可看。。。直接润)
    >我真服了。。。。太久没登,回来一看自个写的公开文章变vip文章了。。。。。。>  好活  #准备整个脚本把文章下载导出markdown找了一下,发现之前的的方法挺多都修复了。。。还加了反爬机制,自带的导出pdf文档,里面的代码无法完全显示>找了下是最新的方法:[CSDN文章......
  • 如何把markdown文件导出为pdf
    1.下载Prince[下载小工具]下载后直接安装即可。2.添加环境变量先找到小工具的可执行文件Prince.exe的路径。.\Prince\engine\bin把Prince.exe的路径的添加到环境变量中,然后重启vscode。3.在vscode中把md文件转换成pdfa.先保证自己有MarkdownPreviewEnhanced......
  • markdown下载所有图片并保存
    markdown下载所有图片并保存importrefromdatetimeimportdatetimeimportrequests#读取txt文件内容withopen('d:\Profile\Downloads\Verilog基础语法(7)之generate块.md','r',encoding='utf-8')asf:content=f.read()#使用......
  • markdown学习
    一级标题ctrl+1文章地址:https://blog.csdn.net/qq_41261251/article/details/102817673二级标题+2最多六级斜体用两个*扩起,或者ctrl+i加粗用两个**括起,或者ctrl+b粗斜体用***括起,或者ctrl+b+i哈哈哈分割线三个-或*或+删除线用~~括起,或者alt+shift+5下划线ctrl+u第一......
  • Markdown 学习笔记 (基于Typora)
    Markdown学习笔记(基于Typora)目录Markdown学习笔记(基于Typora)基础语法进阶语法基础语法标题:###某三级标题(一级到六级)。加粗:**要加粗的部分**,或者Ctrl+B。斜体:*要斜体的部分*,或者Ctrl+I。删除线:~~要删除的部分~~。高亮(扩展语法):==要高亮的部分==单行代码:`......
  • MarkDown语法
    MarkDown语法标题:一级标题二级标题三级标题四级标题,最多到六级标题加粗斜体加粗斜体废弃引用Maxwell分割线图片超链接http://www.baidu.com2024-11-0623:20:49列表ABC表格名字性别生日张三男1997-1-1代码select*fromdict_item;......
  • Markdown编辑入门
    Markdown编辑入门标题三级标题四级标题字体Hello,worldHello,worldHello,worldHello,world引用十步杀一人,千里不留行。分割线图片列表ABC123链接百度表格姓名年龄性别张三18男代码<html>......
  • 使用Markdown编写适用于GitHub的README.md文件的目录结构
    文章目录@[toc]顶部1.使用`[TOC]`自动生成2.VSCode中的插件3.手搓目录目录相关资料本文相关代码一、概述1.1基本概念1.2两种处理模型(1)微批处理(2)持续处理1.3StructuredStreaming和SparkSQL、SparkStreaming关系二、编写StructuredStreaming程序的基本步骤三......