UEditor的word图片转存-UEditor篇
在UEditor中需要做两件事，第一，在一开始标记Img，为每一个需要转存的图片设置一个UUID，得到本地地址和UUID，第二，在上传结束后，根据UUID找到img元素，替换属性src
1.标记img
wordimage插件的inputRule中会对输入的数据流进行处理，这里默认会把src是本地的img转成一张图片（提示使用wordimage工具），
if (attrs['src'] && /^(?:(file:\/+))/.test(attrs['src'])) {
img.setAttr({ width:attrs.width,
height:attrs.height,
alt:attrs.alt,
word_img: attrs.src,
src:src,
'style':'background:url(' + ( flag ? opt.themePath + opt.theme + '/images/word.gif' : opt.langPath + opt.lang + '/images/localimage.png') + ') no-repeat center center;border:1px solid #ddd'
})}
在上边，真实的地址会被放入word_image属性中，在这里，需要增加一个参数id，用于表示特定图片。随便uuid函数即可。
2.wordimage命令改造
在这里需要返回图片的本地地址和图片的id
'wordimage'：{
execCommand:function () {
var images = domUtils.getElementsByTagName(me.body, "img");
var urlList = [];
for (var i = 0, ci; ci = images[i++];) {
var url = ci.getAttribute("word_img");
url && urlList.push(url);
}
return urlList;
},
这里实际上只返回了url，该属性位于word_img中，在该处修改为：
var url = ci.getAttribute("word_img");
var id = ci.getAttribute('id')
url && urlList.push({url, id});
增加id的返回，用于后边找到对应图片，替换图片属性
3.增加替换img属性的命令
在上边的wordimage命令下方增加一个命令，updatewordimageurl：
'updatewordimageurl':{
execCommand:function (cmdName, link, wordImageId) {
var img = me.document.getElementById(wordImageId);
if (img) {
img.setAttribute('src', link);
img.setAttribute('_src', link);
img.removeAttribute('id');
img.removeAttribute('word_img');
img.removeAttribute('style');
me.fireEvent('contentchange')
}
},
notNeedUndo:true
}
在这里，只是根据调用命令时，传回的网络地址和原先的id，进行相应替换即可。
4.自定义按钮
使用UE.registerUI注册一个按钮，
UE.registerUI(
'uiname',
function(editor, uiname) { //do something },
[index, [editorId]]
);
详细可见官方文档： UEditor二次开发
我们在这里需要做：
1.获取本地地址，得到url和对应的img的id
const imageInfo = _this.editor.execCommand('wordimage')
2.调用本地nodejs获得base64数据，上传，得到uploadUrl，
3. 替换img的url
_this.editor.execCommand('updateWordImageUrl', uploadUrl , id)
参考文章：http://blog.ncmem.com/wordpress/2023/09/15/ueditor%e7%9a%84word%e5%9b%be%e7%89%87%e8%bd%ac%e5%ad%98-ueditor%e7%af%87/
欢迎入群一起讨论
