V1.0.0
WinDesign A2UI Vue

PangoEditor 编辑器 ​

编辑器组件，基于 PangoEditor 封装。

通过 new PangoEditor(container, options) 实例化，使用 editor.postmessage({ type, param }) 发送命令。

基础用法 ​

processMessages2（后端 API） ​

属性 ​

属性名类型默认值说明
idstring-组件唯一标识（必填），用于 processor 注册实例
componentstringPangoEditor组件类型（必填）
domIdstring'pango-editor-default'挂载容器 ID，组件自动创建对应 DIV
optionsobject{ workMode: 'App' }编辑器构造函数配置，与默认值合并
typestring-命令类型，如 FileOpen。变化时自动重新发送
paramarray[]命令参数，与 type 配合

以上属性均支持 A2UI 数据绑定 { path: '/xxx' }，通过 data 节点动态注入值。

options ​

属性名类型默认值说明
workModestringAppApp / Browse / Design

常用命令 ​

typeparam说明
FileOpen[{ srcstr: xml, eleInfoList: [], docId: string }]加载文档
FileSave[{ docId: string }]保存文档
SetValue[{ conceptId, value, valueType, type, docId }]按概念ID设置/追加元素值
InsertTableWithContent[{ CptID, content }]插入表格
InsertDoc[{ CptID, content }]插入文档片段
SetWorkMode_Browse[]切换浏览模式
SetWorkMode_Design[]切换设计模式

formParams 自动收集数据 ​

组件挂载时自动注册到 processor。提交表单时 processor 遍历所有编辑器实例，调用 FileSave 收集数据，结果存入 formParams.pangoEditorParams。

processor 方法 ​

方法说明
getPangoEditorInstance(domId?)传入 domId 获取单个实例；不传返回所有实例的 Map
getPangoEditorParams(domId?)传入 domId 获取单个实例的 FileSave XML 结果；不传返回所有结果的数组
getPangoEditorTitleList(domId?)传入 domId 获取单个实例的段落信息（GetXMLListWithTitle，含概念ID、名称、内容）；不传返回所有结果数组
resetPangoEditorInstance(domId?)传入 domId 重置指定编辑器；不传重置所有编辑器（用初始数据重新渲染）

以上方法均通过 window 事件（win-design-a2ui-surface-created 等）暴露，外部可直接调用。 详细 API 说明参见 Processor API - 编辑器操作。

getPangoEditorInstance ​

获取编辑器原始实例，用于手动操作（如发送命令）。

typescript
getPangoEditorInstance(domId?: string): any
调用方式返回类型说明
getPangoEditorInstance(domId)any | undefined传入 domId 返回对应编辑器实例
getPangoEditorInstance()Map<string, any>不传返回所有实例的 Map
javascript
// 获取单个实例
const editorInstance = processor.getPangoEditorInstance('my-editor-001');

// 获取所有实例
const allEditors = processor.getPangoEditorInstance();

getPangoEditorParams ​

获取编辑器 XML 数据，内部调用 FileSave 返回结果。

typescript
getPangoEditorParams(domId?: string): any
调用方式返回类型说明
getPangoEditorParams(domId)any传入 domId 返回对应实例的 FileSave 结果
getPangoEditorParams()any[]不传返回所有实例结果的数组
javascript
// 获取单个编辑器 XML 数据
const xmlResult = processor.getPangoEditorParams('my-editor-001');

// 获取所有编辑器 XML 数据
const allXmlResults = processor.getPangoEditorParams();

getPangoEditorTitleList ​

获取编辑器段落信息，内部调用 GetXMLListWithTitle 返回结果。 返回文档中所有标题及其对应段落的详细信息（概念ID、名称、展示名称、内容等）。

typescript
getPangoEditorTitleList(domId?: string): any
调用方式返回类型说明
getPangoEditorTitleList(domId)any传入 domId 返回对应实例的段落信息数组
getPangoEditorTitleList()any[]不传返回所有实例的段落信息结果数组

返回数据结构中每个对象包含：

字段说明
CptID段落（标题）的概念ID
text段落（标题）的名称
paragraphXml该标题下的段落内容 XML
javascript
// 获取单个编辑器段落信息
const titleList = processor.getPangoEditorTitleList('my-editor-001');

// 获取所有编辑器段落信息
const allTitleList = processor.getPangoEditorTitleList();

resetPangoEditorInstance ​

重置编辑器，清空当前编辑内容，用初始数据重新渲染（恢复到初始打开状态）。

typescript
resetPangoEditorInstance(domId?: string): void
调用方式说明
resetPangoEditorInstance(domId)重置指定编辑器
resetPangoEditorInstance()重置所有编辑器
javascript
// 重置指定编辑器（清空编辑内容，恢复初始状态）
processor.resetPangoEditorInstance('my-editor-001');

// 重置所有编辑器
processor.resetPangoEditorInstance();

渲染后插入数据（eleInfoList） ​

FileOpen 的 param 支持 eleInfoList 字段，可在加载 XML 模板的同时向指定元素插入数据。

渲染器会在 FileOpen 命令执行后自动检测 eleInfoList，并在 XML 渲染完成后逐个发送 SetValue 命令将数据插入编辑器，无需手动调用：

注意

eleInfoList 中每条记录的 docId 必须与 FileOpen param 中创建的文档 docId 一致，否则 SetValue 无法找到目标文档，数据不会插入。

javascript
// processMessages 用法
processor.processMessages([
  // ... createSurface ...
  {
    version: 'v0.9',
    updateComponents: {
      surfaceId: 'main',
      components: [
        {
          id: 'editor_inner',
          component: 'PangoEditor',
          domId: 'my-editor-001',
          type: 'FileOpen',
          param: [
            {
              srcstr: sampleXml,
              eleInfoList: [
                {
                  conceptId: '399001268',
                  value: '插入的数据',
                  valueType: 'text',
                  docId: 'test-00000001',
                },
              ],
              docId: 'test-00000001',
            },
          ],
        },
      ],
    },
  },
]);

通过 getPangoEditorTitleList 可获取模板中所有段落的 cptId（概念ID），用于构建 eleInfoList：

javascript
const titleList = processor.getPangoEditorTitleList('my-editor-001');
// titleList 包含每个段落的 cptId、elementName 等信息
// 用 cptId 作为 conceptId 构建 eleInfoList

eleInfoList 中每个元素的结构：

字段类型默认值说明
conceptIdstring-目标元素的概念ID（对应 cptId）
valuestring-要插入的数据
valueTypestring'text'值类型：'text' 或 'xml'
typestring'normal'操作类型：'normal'（设置）或 'append'（追加）
docIdstring继承父级文档ID，不传时使用 FileOpen param 中的 docId

Design by UED