区块是在CMS插件模块中提供的。因此,我们延续前面已经创建的插件模块test-cmspluginhello,制作一个区块iframe

如何制作插件,请参见:开发篇 - 制作插件

1. 引用区块及Schema

在模块的meta中引用区块Schema

src/module/test-cmspluginhello/backend/src/meta.js

const blocks = require('./config/blocks.js');

module.exports = app => {
  const schemas = require('./config/validation/schemas.js')(app);
  const meta = {
    ...
    validation: {
      validators: {
        blockIFrame: {
          schemas: 'blockIFrame',
        },
      },
      keywords: {},
      schemas: {
        blockIFrame: schemas.blockIFrame,
      },
    },
    cms: {
      plugin: {
        blocks,
      },
    },
  };
  return meta;
};
名称 说明
cms.plugin.blocks 本模块所提供的区块清单
validation.validators.blockIFrame 区块所对应的validator
validation.schemas.blockIFrame 区块所对应的schema

2. 定义区块

src/module/test-cmspluginhello/backend/src/config/blocks.js

const iframe = require('./block/iframe.js');

module.exports = {
  iframe,
};

src/module/test-cmspluginhello/backend/src/config/block/iframe.js

module.exports = {
  meta: {
    name: 'iframe',
    title: 'Embed Page',
    validator: 'blockIFrame',
  },
  data: {
    default: {
      url: '',
      width: '',
      height: '',
    },
  },
  render({ md, options, block, token, index, content }) {
    const url = md.utils.escapeHtml(content.url);
    const width = md.utils.escapeHtml(content.width || '100%');
    const height = md.utils.escapeHtml(content.height || '300px');
    return `<div class="block block-iframe" style="width:${width};height:${height};"><iframe width="100%" height="100%" scrolling="auto" frameborder="0" src="${url}"></iframe></div>\n`;
  },
};
名称 说明
meta 区块的元信息
meta.name 区块的名称
meta.title 区块的标题
meta.validator 区块所对应的validator
data.default 区块属性的缺省值
render 区块的渲染函数
  • render参数
名称 说明
md MarkdownIt实例对象,参见: MarkdownIt
md.utils.escapeHtml 特别的,经常需要通过此方法对用户输入的内容进行安全转译,从而避免注入漏洞的发生
options 扩展参数
options.utils.text 通过此方法返回国际化字符串
options.blocks 所有区块清单
block 区块的对象定义
token MarkdownIt渲染参数
index MarkdownIt渲染参数
content 用户输入的内容

3. 定义Schema

JSON Schema用来验证用户输入的数据是否符合预期,如果不符合预期,就会有醒目的提示

关于JSON Schema,请参见:表单验证

src/module/test-cmspluginhello/backend/src/config/validation/schemas.js

module.exports = app => {
  const schemas = { };
  // block iframe
  schemas.blockIFrame = {
    type: 'object',
    properties: {
      url: {
        type: 'string',
        ebType: 'text',
        ebTitle: 'URL',
        format: 'uri',
        notEmpty: true,
      },
      width: {
        type: 'string',
        ebType: 'text',
        ebTitle: 'Width',
      },
      height: {
        type: 'string',
        ebType: 'text',
        ebTitle: 'Height',
      },
    },
  };

  return schemas;
};