2.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>

      Copy to Clipboard Toggle word wrap

      您的 HTML 页面的脚本标签

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

      Copy to Clipboard Toggle word wrap

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

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

      添加 NPM 软件包

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

      Copy to Clipboard Toggle word wrap

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

      导入每个编辑器

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

      Copy to Clipboard Toggle word wrap

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("")
         }
       ]
     ])
   });

   Copy to Clipboard Toggle word wrap

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

   Expand

   表 2.1. 参数示例

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

   Show more

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

   Expand

   表 2.2. 返回的对象方法

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

   Show more