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>

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

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

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

   1. 在 package.json 文件中添加 NPM 软件包：

      添加 NPM 软件包

      npm install @kie-tools/kie-editors-standalone

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

      导入每个编辑器

      import * as DmnEditor from "@kie-tools/kie-editors-standalone/dist/dmn"
      import * as BpmnEditor from "@kie-tools/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("")
         }
       ]
     ])
   });

   在 editor API 中使用以下参数：

   表 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 编辑器提供包含的模型，或为 BPMN 编辑器提供工作项目定义。映射中的每个条目都包含一个资源名称和一个对象，它由 content -type （文本 或二进制 ）和内容组成（与 初始Content 参数类似）。

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

   表 11.2. 返回的对象方法

   方法	描述
   getContent（）: Promise<string>	返回包含编辑器内容的保证。
   setContent(path: string, content: string): void	设置编辑器的内容。
   getPreview（）: Promise<string>	返回包含当前图表的 SVG 字符串的保证。
   subscribeToContentChanges（callback:(isDirty: boolean)IFL void）:(isDirty: boolean)void	当编辑器中的内容更改并返回用于 unsubscription 的回调时，设置要调用的回调。
   subscribe toContentChanges（callback:(isDirty: boolean)IFL void）: void	当内容在编辑器中更改时，取消订阅传递的回调。
   markAsSaved(): void	重置编辑器状态，这表示已保存编辑器中的内容。另外，它会激活与内容更改相关的订阅回调。
   undo（）: void	在编辑器中取消上次更改。另外，它会激活与内容更改相关的订阅回调。
   redo（）: void	在编辑器中恢复最近一次撤消的更改。另外，它会激活与内容更改相关的订阅回调。
   close（）: void	关闭编辑器。
   getElementPosition(selector: string): Promise<Rect>	提供了一种替代方式，可以在可清空或视频组件中的元素中时扩展标准查询选择器。选择器 参数必须遵循 <targetNamespaces >:::<SELECT > 格式，如 Canvas:::MySquare 或 Video:::PresenterHand。此方法返回一个代表元素位置的 Rect。
   envelopeApi: MessageBusClientApi<KogitoEditorEnvelopeApi>	这是高级编辑器 API。有关高级编辑器 API 的更多信息，请参阅 MessageBusClientApi 和 KogitoEditorEnvelopeApi。