通过前面的介绍,我们了解到使用Markdown富文本编辑器组件非常便捷。在实际业务当中,我们往往是在表单中使用Markdown富文本编辑器组件。为了支持表单渲染场景,CabloyJS还提供了一组更加便捷的字段渲染组件

ebType: markdown

模块test-party演示了如何在表单中使用Markdown渲染组件,只需要配置表单对应的JSON Schema即可:

src/module-vendor/test-party/backend/src/config/validation/schema/formTest.js

  1. 1 // formTest
  2. 2 schemas.formTest = {
  3. 3 type: 'object',
  4. 4 properties: {
  5. 5 ...
  6. 6 selfIntroduction: {
  7. 7 type: 'string',
  8. 8 ebType: 'markdown',
  9. 9 ebTitle: 'SelfIntroduction',
  10. 10 },
  11. 11 },
  12. 12 };
名称 说明
type 字段类型
ebType 字段渲染类型,用于标示前端渲染组件类型。markdown是系统内置的组件
ebTitle 字段标题,用于前端渲染,支持国际化

ebType: markdown-content

对于一般的表单,使用ebType: 'markdown'即可。而对于原子类型的表单,则需要使用ebType: 'markdown-content'markdown-content渲染字段在markdown的基础上额外传递了一些原子数据,从而增加编辑器的能力。比如,在编辑便签正文时,如果上传了图片,系统就可以自动将图片便签一一对应起来,并存入数据库中

下面以模块test-note的原子类型便签为例:

src/module-vendor/test-note/backend/src/config/validation/schema/note.js

  1. 1 // note
  2. 2 schemas.note = {
  3. 3 type: 'object',
  4. 4 properties: {
  5. 5 ...
  6. 6 content: {
  7. 7 type: 'string',
  8. 8 ebType: 'markdown-content',
  9. 9 ebTitle: 'Content',
  10. 10 },
  11. 11 },
  12. 12 };
名称 说明
type 字段类型
ebType 字段渲染类型,用于标示前端渲染组件类型。markdown-content是系统内置的组件
ebTitle 字段标题,用于前端渲染,支持国际化

ebType: markdown-content-cms

我们知道,CabloyJS提供了一套通用的CMS静态渲染引擎,可以把任何原子类型的业务数据渲染成静态站点,从而既实现了SEO优化,也提升了站点的访问性能。对于这类原子类型,我们需要在编辑页面显示预览按钮,从而实现编辑当中的预览功能。针对这类场景,CabloyJS还提供了markdown-content-cms渲染字段

下面以模块a-cms的原子类型文章为例:

src/module-system/a-cms/backend/src/config/validation/schemas.js

  1. 1 // article
  2. 2 schemas.article = {
  3. 3 type: 'object',
  4. 4 properties: {
  5. 5 ...
  6. 6 content: {
  7. 7 type: 'string',
  8. 8 ebType: 'markdown-content-cms',
  9. 9 ebTitle: 'Content',
  10. 10 },
  11. 11 ...
  12. 12 },
  13. 13 };
名称 说明
type 字段类型
ebType 字段渲染类型,用于标示前端渲染组件类型。markdown-content-cms是系统内置的组件
ebTitle 字段标题,用于前端渲染,支持国际化