适用场景

适用于基于浏览器使用javascript和html开发web应用的场景。
适用于VUE2、VUE3、React等各类web开发框架。
支持360浏览器、QQ浏览器、Chrome、firefox、Edge等主流浏览器。

说明

• 适用于任何框架的最小代码
• 使用的是编辑器直接接口，详见《信译(ThinkEditor)全结合化电子病历编辑器-开发手册V2》

var thinkEditor = new ThinkEditor(editorParam);

await thinkEditor.InitAsync();

/********************************************************************/
thinkEditor.ParseDoc(docName, docXml, E_DOCS_ORGANIZE_MODE.Single);
/********************************************************************/

thinkEditor.SetViewMode(E_VIEW_MODE.Edit);

thinkEditor.Load(document.querySelector("#container"));

在前端框架中设计编辑器显示位置

基于element-ui tabs组件的参考代码。

• 完整代码参考VUE demo 工程

<template>
  <el-main>
    <div class="Instance">
      <!--Instance是依赖内部大小的，所以预设1个空间 指定长宽尺寸-->
      <div @contextmenu.prevent="handleContextMenu" class="main-box">
        <el-tabs style="width: 100%; height: 100%" :closable="true" v-model="selectedDocName" type="card" @tab-click="tabSelected" @tab-remove="tabRemove" @tab-add="tabAdd">
          <el-tab-pane style="width: 100%; height: 100%" :label="item.showName" :name="item.docName" :key="item.docName" v-for="(item, index) in this.instanceHelper.docEditors">
            <component :is="item.editorView" :docEditor="item" />
          </el-tab-pane>
        </el-tabs>
        <RightClick />
      </div>
    </div>
  </el-main>
</template>

打开文档

//新建文档编辑器
var thinkEditor = new ThinkEditor({
        lib: '/js/', //库文件在服务器上路径
        editorId: docName + '_' + GetRandStr() //文档编辑器Id，用于区分不同的文档编辑器
      });
/**************************
 * 用户可以不使用DocEditor，可结合自己的应用系统 直接在thinkEditor上附加文档信息、用户信息等业务信息
 *示例：
  thinkEditor.userDefined = {
  docName:'文档名',
  docShowName:'文档UI tab显示名',
  docNo:'文档在业务系统标识',
  userNo:'用户、患者标识'
  };
  * ****************************/

//初始化编辑器
await thinkEditor.Init();

//显示文档-指定编辑器在containerDiv中显示
thinkEditor.Load(containerDiv);

//获取文档数据 note:第三方应用应当是从数据库中获取的docData
var docData = await fetch("/static/system/emr/AdmissionRecord.xml").then((res) => res.arrayBuffer());

var docName='新文档';
//创建文档
thinkEditor.CreateDoc(docName);

//解析文档
thinkEditor.ParseDoc(docName, docData, { organizeMode: E_DOCS_ORGANIZE_MODE.Single });

//设置显示模式
thinkEditor.SetViewMode(E_VIEW_MODE.Edit);

隐藏文档

• 文档不直接在浏览器显示时调用，比如父级containerDiv隐藏或关闭时
• 编辑器不再与containerDiv关联
• 文档不再实时绘制

thinkEditor.UnLoad();

显示文档

• 文档恢复在浏览器显示时调用
• 编辑器再次和containerDiv关联（每次Load的containerDiv可以不同）
• 文档恢复实时绘制

thinkEditor.Load(containerDiv);

关闭文档

• 关闭文档，编辑器停止工作，内存即刻释放。比如UI文档tab页签被关闭，或点击了文档关闭按钮
• 该thinkEditor一般不再给其他新文档使用

//关闭文档
thinkEditor.CloseDoc(docName);
或
thinkEditor.CloseAllDoc();

//释放编辑器
thinkEditor.UnInit();