效果如图:
我添加了两个按钮,所以下例中全都加了两个按钮对应的东西
1. 在ueditor.config.js文件里的toolbars的数组中添加一个你需要新增的按钮功能名称
我这里添加了两个 ‘customvideo’, ‘customaudio’
2.zh-cn.js 中找到labelMap并添加第一步新增的按钮对应的提示内容,主要是用于鼠标放置上去显示的文字提示内容
3. 在图标雪碧图中加入需要的图标,如果雪碧图中已有想用的图标可忽略这一步
4.在 _css/buttonicon.css添加图标样式
.edui-default .edui-for-customvideo .edui-icon {
background-position: -725px -100px;
}
.edui-default .edui-for-customaudio .edui-icon {
background-position: -755px -100px;
}
5. ueditor.all.js 文件中的"btnCmds"添加, ‘customvideo’, 'customaudio’
6. 添加自定义按钮的功能 ,在ueditor.all.js中添加如下代码,并加入你需要的功能
/**
* 用户自定义插入视频
* @command customvideo
* @method execCommand
* @param { String } cmd 命令字符串
* @example
* ```javascript
* //editor是编辑器实例
* editor.execCommand( 'customvideo' );
* ```
*/
UE.commands['customvideo'] = {
execCommand : function( cmdName) {
// 自定义功能代码
}
};
上传音频和视频是一样的逻辑,下面我就只贴上上传视频的代码
UE.commands['customvideo'] = {
execCommand : function( cmdName) {
console.log("customvideo...")
var me = this,
eventDom = event.currentTarget,
inputDom;
inputDom = $('<input type="file" accept=".mp4, .ogg, .webm" id="edui_input_' + (+new Date()).toString(36) + '" class="edui_input_video" style="display: none;">');
if ($(eventDom).next(".edui_input_video").length > 0) {
$(eventDom).next(".edui_input_video").remove();
}
$(eventDom).after(inputDom);
$(inputDom).click(function(evt) {
evt.stopPropagation();
})
$(inputDom).change(function() {
if(!this.value) return;
var fieldName, urlPrefix, maxSize, allowFiles, actionUrl,
loadingHtml, errorHandler, successHandler,
file = this.files[0],
filetype = 'file',
loadingId = 'loading_' + (+new Date()).toString(36);
fieldName = me.getOpt(filetype + 'FieldName');
urlPrefix = me.getOpt(filetype + 'UrlPrefix');
maxSize = me.getOpt(filetype + 'MaxSize');
// maxSize =
allowFiles = me.getOpt(filetype + 'AllowFiles');
actionUrl = me.getActionUrl(me.getOpt(filetype + 'ActionName'));
errorHandler = function(title) {
var loader = me.document.getElementById(loadingId);
loader && domUtils.remove(loader);
me.fireEvent('showmessage', {
'id': loadingId,
'content': title,
'type': 'error',
'timeout': 4000
});
};
loadingHtml = '<p>' +
'<img class="loadingclass" id="' + loadingId + '" src="' +
me.options.themePath + me.options.theme +
'/images/spacer.gif" title="' + (me.getLang('autoupload.loading') || '') + '" >' +
'</p>';
successHandler = function(data) {
var link = urlPrefix + data.url,
loader = me.document.getElementById(loadingId);
var filePath = link.split('?')[0];
var index= filePath.lastIndexOf(".");
var ext = filePath.substr(index+1);
$(loader).after('<video controls><source src="' + link + '" type="video/' + ext +'">您的浏览器不支持 HTML5 video 标签。</video>');
$(loader).remove();
};
/* 插入loading的占位符 */
me.execCommand('inserthtml', loadingHtml);
/* 判断后端配置是否没有加载成功 */
if (!me.getOpt(filetype + 'ActionName')) {
errorHandler(me.getLang('autoupload.errorLoadConfig'));
return;
}
/* 判断文件大小是否超出限制 */
if(file.size > maxSize) {
alert(file.size);
alert(maxSize);
errorHandler(me.getLang('autoupload.exceedSizeError'));
return;
}
/* 判断文件格式是否超出允许 */
var fileext = file.name ? file.name.substr(file.name.lastIndexOf('.')):'';
if ((".mp4.ogg.webm" + '.').indexOf(fileext.toLowerCase() + '.') == -1) {
errorHandler(me.getLang('autoupload.exceedTypeError'));
return;
}
/* 创建Ajax并提交 */
var xhr = new XMLHttpRequest(),
fd = new FormData(),
params = utils.serializeParam(me.queryCommandValue('serverparam')) || '',
url = utils.formatUrl(actionUrl + (actionUrl.indexOf('?') == -1 ? '?':'&') + params);
fd.append(fieldName, file, file.name || ('blob.' + file.type.substr('image/'.length)));
fd.append('type', 'ajax');
xhr.open("post", url, true);
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
xhr.addEventListener('load', function (e) {
try{
var json = (new Function("return " + utils.trim(e.target.response)))();
if (json.state == 'SUCCESS' && json.url) {
successHandler(json);
} else {
errorHandler(json.state);
}
}catch(er){
errorHandler(me.getLang('autoupload.loadError'));
}
});
xhr.send(fd);
})
$(inputDom).click();
}
};