场景一: 插入图片时

应用调用 插入图片接口(InsertImage/InsertImageBase64) 插入图片时,可以直接设置图片是否保存到XML中。

示例代码

var file = "文件服务器中图像句柄ID";
var img_data = "**img_b64**";
var json_cfg ={};
json_cfg.notSave = true;
ThinkEditor.InsertImageBase64("", 2.0, 2.0, file, img_data, img_data.length, json_cfg);

场景二:粘贴外源图片

粘贴外源图片(编辑器自动处理)完成后,会产生imageResource.event事件,该事件会告知应用新图片的信息。

  • 粘贴外源图片默认是不保存到xml中的,可在imageResource.event事件中设置相关参数

插入图片完成后事件

应用调用 插入图片接口(InsertImage/InsertImageBase64)粘贴外源图片完成后,都会产生imageResource.event事件

事件数据格式

{
    "handle": "event",
    "type": "imageResource",
    "id": "",
    "name": "",
    "width": "2.00",
    "height": "2.00",
    "has_source": 1,
    "not_save": 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中 0:保存 1:不保存
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: 按需修改图片对象或图片数据是否保存到XML参数

  • 可修改图片对象显示大小
  • 可设置图片数据是否保存到XML中
    methods: {
      OnImageResource(e){
          var data = e.data;
          if(data.handle=="event"
              && data.has_resouce==true)
          {//产生的imageResource.event的has_resouce肯定等于true,因为插入图片或粘贴外源图片成功后才会产生本事件
              var json_cfg ={};
              json_cfg.width = 1.5; //示例1:修改图片对象显示大小
              json_cfg.not_save = true;//示例2:设置图片数据不保存到XML中
              ThinkEditor.SetImageConfig("",json_cfg);
          }
      }
    }
文档更新时间: 2022-09-18 16:55   作者:admin