@bpmn-io/form-js-编辑器

一个编辑器,用于创建可随显示的窗体 窗体- js 查看器。 。 。 .

安装

npm install @bpmn-io/form-js-editor

使用量

import { FormEditor } from '@bpmn-io/form-js-editor';

const schema = {
  type: 'default',
  components: [
    {
      key: 'creditor',
      label: 'Creditor',
      type: 'textfield',
      validate: {
        required: true,
      },
    },
  ],
};

const formEditor = new FormEditor({
  container: document.querySelector('#form-editor'),
});

await formEditor.importSchema(schema);

检查出来 一个完整的例子。 。 。 .

样式

适当的样式包括必要的样式表和使用的字体:

<link
  href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,600;1,400&display=swap"
  rel="stylesheet" />

<link rel="stylesheet" href="https://unpkg.com/@bpmn-io/[email protected]/dist/assets/form-js.css" />
<link rel="stylesheet" href="https://unpkg.com/@bpmn-io/[email protected]/dist/assets/form-js-editor.css" />

API 密码

FormEditor

创建带有选项的新窗体编辑器 { container?: HTMLElement }。 。 。 .

import { FormEditor } from '@bpmn-io/form-js-editor';

const formEditor = new FormEditor({
  container: document.querySelector('#form-editor'),
});

FormEditor#importSchema(schema: Schema) => Promise<Result, Error>

显示和编辑通过窗体图示表示的窗体.

try {
  await formEditor.importSchema(schema);
} catch (err) {
  console.log('importing form failed', err);
}

FormEditor#saveSchema() => Schema

导出表单图案 .

const schema = formEditor.saveSchema(schema);

console.log('exported schema', schema);

FormEditor#attachTo(parentNode: HTMLElement) => void

将窗体编辑器附加到父节点.

FormEditor#detach() => void

将窗体编辑器从父节点中分离出来 .

FormEditor#on(event, fn) => void

订阅 事件。 。 。 .

FormEditor#destroy() => void

从文档编辑器中删除窗体.

活动

selection.changed :: { selection }

属性面板事件

• propertiesPanel.focusin
• propertiesPanel.focusout
• propertiesPanel.showEntry :: { id }
• propertiesPanel.updated :: { formField }

形成生命周期事件

• detach
• attach
• rendered
• form.init
• form.clear
• form.destroy
• diagram.clear
• diagram.destroy
• dragula.created
• dragula.destroyed
• editorActions.init :: { editorActions }

拖动事件

• drag.start :: { element, source }
• drag.end :: { element }
• drag.drop :: { element, target, source, sibling }
• drag.hover :: { element, container, source }
• drag.out :: { element, container, source }
• drag.cancel :: { element, container, source }

外地活动形式

• formField.add :: { formField }
• formField.remove :: { formField }
• formField.updateId :: { formField, newId }

许可证

B. 《公约》条款之下的使用 bpmn.io 许可证。 。 。 .