step1: 外部应用结合自己框架，配置拖拽起始位置组件

示例，拖拽一个按钮插入配置好的元素

<el-button id="draggerAndInsertElement" size="mini" type="primary" draggable="true">拖拽插入元素</el-button>         

step2: 拖拽起始时，向拖拽事件写入 功能数据

• 注意：浏览器”dragstart”事件处理不支持async异步写法
• 拖拽的输入参数param完全由用户自定义，但必需是个对象。属性名draggerType本身也是可以自定义的。
• 相关param对应在step4 解析使用

draggerWidget = document.getElementById('draggerAndInputFragment');
draggerWidget.addEventListener('dragstart', function (event) {
  let param = { draggerType: 'InputFragment' };/*注意：参数完全有用户自定义，格式和内容可以附加其他信息*/
  event.dataTransfer.setData('data', JSON.stringify(param));
});

step3: 外部应用注册向编辑器注册拖拽结束处理事件

示例，拖拽一个按钮插入配置好的元素

   import {E_EVENT_KEY } from '@/components/editor/ThinkEditor.Defined';

   thinkEditor.addEventListener(E_EVENT_KEY.drop, this.OnDrop);      

step4: 在拖拽结束处理事件中，编写对应功能代码

   async OnDrop(event /*ThinkEditorEvent*/) {
      let data = event.data.data; //用户自定义的数据，对应step2
      editorLogger.LogEvent('OnDrop:', data);

      if (data.draggerType == 'InsertElement') {
        this.InsertElementTest(event.data);
      } else if (data.draggerType == 'InputFragment') {
        await this.InputFragmentTest(event.data);
      }
    }

• 如下示例：在同步方法中向拖拽松开位置插入一个元素

    InsertElementTest(data) {
      let thinkEditor = data.editor;//拖拽松开位置编辑器

      thinkEditor.InsertElement({});
    }

• 如下示例：在异步方法中向拖拽松开位置插入一个片段

    async InputFragmentTest(data) {
      let thinkEditor = data.editor;//拖拽松开位置编辑器

      var fragment_file = 'BingChengFragment.xml';
      var url = '/system/fragment/' + fragment_file;
      let response = await fetch(url, {
        credentials: 'same-origin'
      });
      let xmlArray = await response.arrayBuffer();
      const decoder = new TextDecoder('utf-8');
      const xmlStr = decoder.decode(xmlArray);
      thinkEditor.InputFragment(xmlStr, {});
    }

拖拽插入任意对象或内容

请联系技术人员对接