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/

欢迎入群一起讨论