11.2. 配置 Red Hat Process Automation Manager 独立编辑器

流程

1. 使用以下方法之一安装独立编辑器：

   手动下载每个 JavaScript 文件 ：对于此方法，请按照以下步骤操作：

   1. 下载 JavaScript 文件。
   2. 将下载的 Javascript 文件添加到您托管的应用程序中。

   3. 将以下 &lt ;script& gt; 标签添加到 HTML 页面中：

      DMN 编辑器的 HTML 页面的脚本标签

      <script src="https://<YOUR_PAGE>/dmn/index.js"></script>

      FDO 编辑器的 HTML 页面的脚本标签

      <script src="https://<YOUR_PAGE>/bpmn/index.js"></script>

   使用 NPM 软件包 ：对于此方法，请按照以下步骤操作：

   1. 将 NPM 软件包添加到您的 package.json 文件中：

      添加 NPM 软件包

      npm install @kogito-tooling/kie-editors-standalone

   2. 将每个编辑器库导入到您的 TypeScript 文件中：

      导入每个编辑器

      import * as DmnEditor from "@kogito-tooling/kie-editors-standalone/dist/dmn"
      import * as BpmnEditor from "@kogito-tooling/kie-editors-standalone/dist/bpmn"

2. 安装独立编辑器后，使用提供的编辑器 API 打开所需的编辑器，如下例所示以打开 DMN 编辑器。每个编辑器的 API 相同。

   打开 DMN 独立编辑器

   const editor = DmnEditor.open({
     container: document.getElementById("dmn-editor-container"),
     initialContent: Promise.resolve(""),
     readOnly: false,
     origin: "",
     resources: new Map([
       [
         "MyIncludedModel.dmn",
         {
           contentType: "text",
           content: Promise.resolve("")
         }
       ]
     ])
   });

   在编辑器 API 中使用以下参数：

   Expand

   表 11.1. 参数示例

   参数	描述
   container	附加编辑器的 HTML 元素。
   initialContent	对 DMN 模型内容的承诺.这个参数可以为空，如下例所示： Promise.resolve("") Promise.resolve("<DIAGRAM_CONTENT_DIRECTLY_HERE>") fetch("MyDmnModel.dmn").then(content ⇒ content.text())
   ReadOnly （可选）	允许您允许编辑器中的更改。设置为 false （默认）以允许在编辑器中为只读模式进行内容编辑和 true。
   origin （可选）	存储库的来源。默认值为 window.location.origin。
   资源 （可选）	编辑器的资源映射。例如，此参数用于为 DMN 编辑器提供包括的模型，或为 FDO 编辑器的工作项目定义。映射中的每个条目都包含一个资源名称，以及一个由 content-type (text 或 binary) 和 content (与 initialContent 参数类似) 组成的对象。

   Show more

   返回的对象包含操作编辑器所需的方法。

   Expand

   表 11.2. 返回的对象方法

   方法	描述
   getContent(): Promise<string>	返回包含编辑器内容的承诺。
   setContent(path: string, content: string): void	设置编辑器的内容。
   getPreview(): Promise<string>	返回包含当前图表 SVG 字符串的承诺。
   subscribeToContentChanges(callback: (isDirty: boolean) ⇒ void): (isDirty: boolean) ⇒ void	将回调设置为在编辑器中的内容更改时，并返回相同的回调以用于取消订阅。
   unsubscribeToContentChanges(callback: (isDirty: boolean) ⇒ void): void	在编辑器中的内容更改时取消订阅传递的回调。
   markAsSaved(): void	重置编辑器状态，指示编辑器中的内容已保存。另外，它还激活与内容更改相关的订阅回调。
   undo(): void	撤销编辑器中的最后更改。另外，它还激活与内容更改相关的订阅回调。
   redo(): void	在编辑器中执行最近一次撤消的更改。另外，它还激活与内容更改相关的订阅回调。
   close(): void	关闭编辑器。
   getElementPosition (selector: string): Promise<Rect>	提供了在可组合或视频组件内存在元素时扩展标准查询选择器的替代选择。selector 参数必须遵循 < PROVIDER>:::<SELECT& gt; 格式，如 Canvas:::MySquare 或 video:::PresenterHand。此方法返回一个代表元素位置的 Rect。
   envelopeApi: MessageBusClientApi<KogitoEditorEnvelopeApi>	这是高级编辑器 API。有关高级编辑器 API 的更多信息，请参阅 MessageBusClientApi 和 KogitoEditorEnvelopeApi。

   Show more