场景

针对文档首次使用的图片数据或未保存到XML中的图片数据,需按如下方式设置图片数据源,图片方可正常显示。

  • 应用结合自己的业务系统灵活选择设计方案

方式一:在解析文档[过程中]加载

在ParseDoc()或其它解析文档片段过程中,如果图片对象缺少图片数据,则会产生 imageResource.request 事件。应用可在该事件中加载图片数据。

事件数据格式

{
    "handle": "request",
    "type": "imageResource",
    "id": "",
    "name": "",
    "width": "0.00",
    "height": "0.00",
    "has_source": 0,
    "file": "839ff029-cca7-9a68-8445-6ad98a4edd97",
    "md5": "b3aa75a6c69fb17ec3cc4290bbea8a57"
}
字段名 必填 类型 说明 备注
id string 图片对象ID
name string 图片对象Name
width float 图片对象显示宽度 单位:cm
height float 图片对象显示高度 单位:cm
has_source bool 是否存在图片数据源 true: 存在 false: 不存在
not_save bool 图片数据是否保存到XML中 注意:没有图片数据源时没有该字段。关联信息详见:imageResource.event
file float 图片数据源对应file 由应用灵活定义,可以是图片名,也可以是图片数据在文件服务器中的图片句柄ID
md5 string 图片数据MD5值,图片数据唯一标识 编辑器优先使用file+md5作为条件查找图片数据源,如果没有匹配则使用md5值查找图片数据源
  • 注意图片数据源只与not_save、file、md5有关
  • id、name、width、height、has_source只用于标识当前图片对象的信息
  • 多个图片对象可能对应相同的图片数据源

示例代码

step1: 设置监听

 async mounted () {  
     ThinkEditor.addEventListener("imageResource", this.OnImageResource);
}

step2: 按需加载图片数据

methods: {
  OnImageResource(e){
        console.log(e);
        var allow=true;
        var data = e.data;
        if(data.handle=="request")
        {    /*
                应用根据事件中提供的信息,去业务系统的文件系统或数据库中找到对应的数据加载编辑器中使用
                最终目的是调用SetImageResource设置图片数据供编辑器使用
            */
            if(data.file == "当前医师电子签名.jpg" 
                && data.md5 == "a04cfa91f403f799ce07252e85bda12b")
            {//也可以只匹配md5值来找到对应的图片
                var dangqian_yishi = "**b64**";
                var json_cfg={};
                  json_cfg.not_save = false;
                console.log("OnImageResource->SetImageResource:" + data.file);
                var md5 = ThinkEditor.SetImageResourceBase64("当前医师电子签名.jpg", dangqian_yishi, dangqian_yishi.length,json_cfg);
           }
           else if(data.file == "审核医师电子签名.jpg" 
                && data.md5 == "b3aa75a6c69fb17ec3cc4290bbea8a57")
            {
                var shenhe_yishi = "**b64**";
                var json_cfg={};
                json_cfg.not_save = false;
                console.log("OnImageResource->SetImageResource:" + data.file);
                var md5 = ThinkEditor.SetImageResourceBase64("审核医师电子签名.jpg", shenhe_yishi, shenhe_yishi.length,json_cfg);
            }
        }

        return allow;
    }
}

方式二[过时]:在解析文档[之前]加载

在ParseDoc()之前使用SetImageResource()/SetImageResourceBase64()加载图片数据

  • 未保存到XML中的图片数据,需使用加载图片资源接口加载图片数据
  • 应用打开文档前就能自行确定当前文档需要哪些图片数据
  • 注意如果该图片数据资源没有被使用,会被定时清理掉,所以支持方式一的图片数据加载模式是必要的

示例代码

 var img_data = "**image_data_b64**";
 var file= "检查报告1";
 md5 = thinkEditor.SetImageResourceBase64(file, img_data, img_data.length,"");
 thinkEditor.ParseDoc(cluster_name, data, E_DOCS_ORGANIZE_MODE.Single); 
文档更新时间: 2022-05-09 18:42   作者:admin