本文共 6213 字，大约阅读时间需要 20 分钟。

-----------------------------------------------------------

在第一个魔改过程中，我们已经添加了两个按钮，文件上传和图片上传

现在，我们就对这两个按钮做一下事件处理

第一步：追加处理文件

在src\plugins文件夹中追加一个js文件，文件名自己定义即可

不过推荐文件名和按钮名一致，这样找起来方便

第二步：加载处理文件

在editor_api.js或自己指定的加载处理中，追加刚才的文件

scripts: [            'editor.js',            'core/browser.js',            'core/utils.js',            'core/EventBase.js',            'core/dtd.js',            'core/domUtils.js',            'core/Range.js',            'core/Selection.js',            'core/Editor.js',            'core/Editor.defaultoptions.js',            'core/loadconfig.js',            'core/ajax.js',            'core/filterword.js',            'core/node.js',            'core/htmlparser.js',            'core/filternode.js',            'core/plugin.js',            'core/keymap.js',            'core/localstorage.js',            'plugins/defaultfilter.js',            'plugins/inserthtml.js',            'plugins/autotypeset.js',            'plugins/adwordfilter.js',            'plugins/autosubmit.js',            'plugins/background.js',            'plugins/image.js',            'plugins/justify.js',            'plugins/font.js',            'plugins/link.js',            'plugins/iframe.js',            'plugins/scrawl.js',            'plugins/removeformat.js',            'plugins/blockquote.js',            'plugins/convertcase.js',            'plugins/indent.js',            'plugins/print.js',            'plugins/preview.js',            'plugins/selectall.js',            'plugins/paragraph.js',            'plugins/directionality.js',            'plugins/horizontal.js',            'plugins/time.js',            'plugins/rowspacing.js',            'plugins/lineheight.js',            'plugins/insertcode.js',            'plugins/cleardoc.js',            'plugins/anchor.js',            'plugins/wordcount.js',            'plugins/pagebreak.js',            'plugins/wordimage.js',            'plugins/dragdrop.js',            'plugins/undo.js',            'plugins/copy.js',            'plugins/paste.js',            'plugins/puretxtpaste.js',            'plugins/list.js',            'plugins/source.js',            'plugins/enterkey.js',            'plugins/keystrokes.js',            'plugins/fiximgclick.js',            'plugins/autolink.js',            'plugins/autoheight.js',            'plugins/autofloat.js',            'plugins/video.js',            'plugins/table.core.js',            'plugins/table.cmds.js',            'plugins/table.action.js',            'plugins/table.sort.js',            'plugins/contextmenu.js',            'plugins/shortcutmenu.js',            'plugins/basestyle.js',            'plugins/elementpath.js',            'plugins/formatmatch.js',            'plugins/searchreplace.js',            'plugins/customstyle.js',            'plugins/catchremoteimage.js',            'plugins/snapscreen.js',            'plugins/insertparagraph.js',            'plugins/webapp.js',            'plugins/template.js',            'plugins/music.js',            'plugins/autoupload.js',            'plugins/autosave.js',            'plugins/charts.js',            'plugins/section.js',            'plugins/simpleupload.js',            'plugins/serverparam.js',            'plugins/insertfile.js',            'plugins/xssFilter.js',            'ui/ui.js',            'ui/uiutils.js',            'ui/uibase.js',            'ui/separator.js',            'ui/mask.js',            'ui/popup.js',            'ui/colorpicker.js',            'ui/tablepicker.js',            'ui/stateful.js',            'ui/button.js',            'ui/splitbutton.js',            'ui/colorbutton.js',            'ui/tablebutton.js',            'ui/autotypesetpicker.js',            'ui/autotypesetbutton.js',            'ui/cellalignpicker.js',            'ui/pastepicker.js',            'ui/toolbar.js',            'ui/menu.js',            'ui/combox.js',            'ui/dialog.js',            'ui/menubutton.js',            'ui/multiMenu.js',            'ui/shortcutmenu.js',            'ui/breakline.js',            'ui/message.js',            'adapter/editorui.js',            'adapter/editor.js',            'adapter/message.js',            'adapter/autosave.js',            'plugins/formatcontent.js',            'plugins/imageupload.js',            'plugins/attachment.js'        ],

这里我们追加了adwordfilter、formatcontent、imageupload和attachment四个自定义文件，我们现在实现文件上传

第三步：实现按钮功能

先做图片上传吧，文件上传和图片上传其实是类似的，不过一个是超链接，一个是图片呈现，扩展名有点区别罢了

打开我们刚才创建的imageupload.js

UE.commands['imageupload'] = {    execCommand: function () {    }}

我们在这里追加一个和按钮同名的cmd，用来匹配对应的功能

第四步：实现文件上传

其实，百度编辑器里自带有文件上传、图片上传，为什么我们要自己实现呢？其实就是让用户偷懒，不用每次上传的时候点开浮层，再一个，就是不太想用编辑器自带的文件上传处理程序，想把上传处理独立到编辑器外边，毕竟一般情况下，我们都有自己已经写好的文件上传处理了

所以具体实现代码

UE.commands['imageupload'] = {    execCommand: function () {        var me = this;        var file = $('');        var el = file[0];        file.on('change', function (e) {            var files = $(this).get(0).files;            var formData = new FormData();            formData.append('target', 'image');            for (var i = 0; i < files.length; i++) {                if (files[i].size > 3 * 1024 * 1024) {                    alert('您选择的文件中有超出3M限制的文件，请重新选择并上传。');                    return;                }                if (!/^image\/[a-z]+$/gi.test(files[i].type)) {                    alert('您选择的文件中有不是图片的文件，请重新选择并上传。');                    return;                }                formData.append('fn' + i, files[i].name);                formData.append('file' + i, files[i]);            }            $.ajax({                url: window.UE_Define.url + '/upload.aspx'                , type: 'POST'                , data: formData                , cache: false                , contentType: false                , processData: false                , success: function (data) {                    var filepath = eval('(' + data + ')');                    var html = '';                    me.execCommand('insertHtml', html);                    me.execCommand('formatcontent');                }            });        });        el.click();    }}

在这里，我们使用js创建了一个file控件，并模拟点击，以达到文件选择的目的

至于扩展名，是否允许上传多个文件就都在控件里进行设置了

然后当文件控件值发生改变，即选中文件并确定的时候通过jquery将文件直接上传到我们指定的处理程序，并在上传成功后插入图片即可

嗯，success里的处理，按照自己家的返回格式处理，这个没通用的

转载地址：http://bxvxi.baihongyu.com/