';
var contentHtmlArr = [];
// 拼接数据
$.each(happyUrlArr, function (key, value) {
contentHtmlArr.push(
itemTpl.replace(/#{imgUrl}/ig, value)
);
});
$modal.append(contentHtmlArr.join(''));
// 渲染到页面中
$body.append($modal);
// 定位
var width = $modal.width();
$modal.css('margin-left', (0 - width)/2);
// 绑定表情图标的事件
$modal.on('click', '.command-link', function (e) {
// 屏蔽click事件的默认行为
e.preventDefault();
});
$modal.on('singleTap', '.command-link', function (e) {
if (self.checkTapTime(e, 'happy command-link') === false) {
return;
}
var $commandLink = $(e.currentTarget);
var commandValue = $commandLink.attr('commandValue');
// 执行命令
self.command('InsertImage', false, commandValue, e);
// 隐藏 modal
menuData.hideModal();
});
},
// 显示 $modal
showModal: function () {
var menuData = this;
var $modal = menuData.$modal;
var scrollTop = $body.get(0).scrollTop;
// 显示 modal
$modal.show();
// 确定 modal 位置
$modal.css({
'margin-top': (scrollTop + 50) + 'px'
});
// 点击编辑区域隐藏modal
var hideModalFn = function (e) {
menuData.hideModal();
// 隐藏modal之后，接着取消事件绑定
$txt.off('singleTap', hideModalFn);
};
// 绑定事件
$txt.on('singleTap', hideModalFn);
},
// 隐藏 $modal
hideModal: function () {
this.$modal.hide();
},
// 绑定事件
bindEvent: function (editor) {
var menuData = this;
var $trigger = menuData.$trigger;
var $modal = menuData.$modal;
function commandFnForOneEvent() {
menuData.renderModal();
menuData.showModal();
}
function commandFnForOnEvent() {
menuData.showModal();
}
// one绑定的方法只执行一次
// 用于渲染 modal 元素并显示
$trigger.one('singleTap', function (e) {
if (self.checkTapTime(e, 'happy one') === false) {
return;
}
// 渲染modal并显示
self.customCommand(true, commandFnForOneEvent, e);
});
// on 绑定的方法每次都执行
// 用于每次显示和隐藏modal
$trigger.on('singleTap', function (e) {
if (self.checkTapTime(e, 'happy on') === false) {
return;
}
// 显示modal
self.customCommand(true, commandFnForOnEvent, e);
});
},
// 更新样式
updateStyle: function () {
// 暂时不需要
}
};
};
});
// 上传图片
window.___E_mod(function (E, $) {
E.fn.addMenuImg = function (menuId) {
var self = this;
var $body = self.$body;
var $txt = self.$txt;
var menus = self.menus;
var isAndroid = E.isAndroid;
var isUC = E.isUC;
var idDebugger = false; // 默认为 false，下文可能修改
// 针对 test 地址，打印信息
function log(info) {
if (!idDebugger) {
return;
}
E.log(info);
}
// 用随机数生成input 的 id
var inputFileId = 'inputfile' + Math.random().toString().slice(2);
menus[menuId] = {
// 选中状态
selected: false,
// 触发器
$trigger: (function () {
// 不同os、不同browser的情况不一样
if (isAndroid || isUC) {
return $('');
} else {
return $('');
}
})(),
// 包裹触发器的容器
$wrap: $('
'),
// 渲染 form
renderForm: function () {
var fromHtml = [
'',
' ',
''
].join('');
var $container = $('');
// var $container = $('');
$container.html(fromHtml);
// 渲染到页面中
$body.append($container);
},
// 绑定菜单事件
bindEvent: function (editor) {
var menuData = this;
var $trigger = menuData.$trigger;
// 将 form 渲染到页面上
menuData.renderForm();
// 获取 form input-file 对象
var $inputFlie = $('#' + inputFileId);
// 将以base64的图片url数据转换为Blob
function convertBase64UrlToBlob(urlData, filetype){
//去掉url的头，并转换为byte
var bytes=window.atob(urlData.split(',')[1]);
//处理异常,将ascii码小于0的转换为大于0
var ab = new ArrayBuffer(bytes.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
}
// 类型
if (filetype === '' || !filetype) {
filetype = 'image/png';
}
return new Blob([ab], {type : filetype});
}
// input 有文件选中时，显示预览图，提交 form
$inputFlie.on('change', function (e) {
// 获取配置项内容
var config = self.config;
var uploadImgUrl = config.uploadImgUrl || '';
var testHostname = config.testHostname || 'localhost';
var loadingImgUrl = config.loadingImg;
var timeout = config.uploadTimeout || 10000;
idDebugger = testHostname === window.location.hostname;
// 判断改浏览器是否支持 FormData 和 fileReader
if (!window.FileReader || !window.FormData) {
alert('当前浏览器不支持html5中的 FileReader 和 FormData，无法上传图片');
return;
}
if (uploadImgUrl === '') {
// 没有配置上传图片的url
alert(
'没有配置 uploadImgUrl ，wangEditor 将无法上传图片。\n\n' +
'想要配置上传图片，请参见文档说明。\n\n' +
'不想要图片上传，可通过配置 menus 隐藏该功能。'
);
return;
}
var files = $inputFlie[0].files || [];
if (files.length === 0) {
return;
}
var file = files[0];
var fileType = file.type || '';
var reader = new FileReader();
var $focusElem = self.$focusElem;
log('选中的文件为：' + file.name);
log('服务器端上传地址为：' + uploadImgUrl);
reader.onload = function(e){
var base64 = e.target.result || this.result,
prevImgSrc,
prveImgContainerId = 'div' + Math.random().toString().slice(2),
prevImgInfoId = 'info' + Math.random().toString().slice(2),
xhr,
formData,
timeoutId;
// ---------- 显示预览 ----------
if (window.URL && window.URL.createObjectURL) {
// 如果浏览器支持预览本地图片功能，则预览本地图片
prevImgSrc = window.URL.createObjectURL(file);
// 生成预览图片，设置半透明
$focusElem.after(
'
<\/\1>$/.test(html)) { e.preventDefault(); } }); // longtap doubletap 隐藏菜单 $txt.on('longTap, doubleTap', function () { // 隐藏菜单 self.hideMenuContainer(); }); // blur时，隐藏菜单栏 // 存储源代码 $txt.on('blur', function (e) { // 记录编辑区域已经 blur self.isFocus = false; var explicitOriginalTarget = e.explicitOriginalTarget; if (menuContainer.contains(explicitOriginalTarget)) { // firefox 中，点击菜单会导致 $txt blur // e.explicitOriginalTarget 有值，并且包含在菜单容器中，证明是 ff 点击菜单所致的 blur e.preventDefault(); return; } else { // 其他浏览器，点击菜单，都不会出现 blur 的情况 // 这是正常情况下的 blur // 存储源码代码 self.saveSourceCode(); // 隐藏菜单 fn self.hideMenuContainer(); } }); // $txt-blur end }; }); // 绑定菜单容器事件 window.___E_mod(function (E, $) { // ----------------- 绑定menucontiner事件 E.fn.bindMenuContainerEvent = function () { // tap时focus $text var self = this; var $menuContainer = self.$menuContainer; //tap时，阻止冒泡，因为上层的 $txt 会监测 tap 事件 $menuContainer.on('tap', function (e) { e.preventDefault(); e.stopPropagation(); }); }; }); // 绑定菜单按钮的事件 window.___E_mod(function (E, $) { E.fn.bindMenuBtnEvent = function () { var self = this; var menus = self.menus; // 遍历菜单配置项，执行bindEvent事件 $.each(menus, function (key, menu) { var bindEvent = menu.bindEvent; if (bindEvent && typeof bindEvent === 'function') { bindEvent.call(menu, self); } }); }; }); // $txt api window.___E_mod(function (E, $) { // focus API // 暂时没人用 // E.fn.focusTxt = function () { // var self = this; // var $txt = self.$txt; // if (!self.isFocus) { // $txt.focus(); // } // }; // 保存、获取 $txt tap时event对象的target元素 E.fn.eventTarget = function ($elem) { var self = this; if ($elem == null) { return self.$eventTargetElem; } else { self.$eventTargetElem = $elem; } }; // 保存源代码 E.fn.saveSourceCode = function () { var self = this; var $txt = self.$txt; var $textarea = self.$textarea; var sourceCode = ''; var $txtClone = $txt.clone(); var $focusElem1 = $txtClone.find('.focus-elem'); // 将当前的 $focusElem 清除样式 $focusElem1.removeClass('focus-elem'); // 获取源码 sourceCode = $txtClone.html(); sourceCode = sourceCode.replace(/\s?class=""/g, ''); $textarea.val(sourceCode); }; // 在编辑区域最后插入空行 E.fn.insertEmpltyLink = function () { var self = this; var $txt = self.$txt; var $children = $txt.children(); if ($children.length === 0) { $txt.append($('
') { $txt.append($('
' +
' 
' +
'
'
);
} else {
// 如果浏览器不支持预览本地图片，则复制为一个配置的图片地址
prevImgSrc = loadingImgUrl;
// 生成预览图片
$focusElem.after(
'上传中...
' + '' +
' ' +
'
'
);
}
log('生成预览图片，src是：' + prevImgSrc);
// ---------- 上传到服务器 ----------
xhr = new XMLHttpRequest();
formData = new FormData();
// 访问超时
function timeoutCallback() {
log('访问超时（配置的超时事件是：'+ timeout +'）');
var $prevImgContainer = $('#' + prveImgContainerId);
$prevImgContainer.remove();
if (xhr.abort) {
xhr.abort();
}
alert('上传超时，请重试');
if (location.hostname.toLowerCase() === 'wangeditor.github.io') {
// 官网demo的特殊提示
alert('提示：wangEditor官网demo没有后台服务，因此超时（该alert在实际项目中不会出现）');
}
}
log('准备上传文件...');
xhr.open('POST', uploadImgUrl, true);
// 计时开始
timeoutId = setTimeout(timeoutCallback, timeout);
xhr.onload = function () {
// 得到消息之后，清除计时
clearTimeout(timeoutId);
var resultSrc = xhr.responseText; //服务器端要返回图片url地址
var erroInfo;
var $prevImgContainer = $('#' + prveImgContainerId);
var loadImg;
var $loadImg;
log('服务器端的返回数据为：' + resultSrc);
// 返回数据错误
if (resultSrc.indexOf('error|') === 0) {
erroInfo = resultSrc.split('|')[1];
log('很遗憾，后台返回error，错误信息为：' + erroInfo);
// 提示错误
alert('上传图片错误: \n' + erroInfo);
// 移除预览图片
$prevImgContainer.remove();
} else {
// 返回正确的图片地址
log('请确认以上图片是否有效，无效将无法显示在页面中');
log('准备下载该图片...');
// 下载图片，下载完成后赋值到编辑器中
$('#' + prevImgInfoId).text('加载中...');
loadImg = document.createElement('img');
loadImg.src = resultSrc;
loadImg.onload = function () {
log('下载完成，正式呈现在编辑区域');
$loadImg = $(loadImg);
$loadImg.css('max-width', '100%');
$prevImgContainer.after($loadImg);
$prevImgContainer.remove();
// 保存内容
self.saveSourceCode();
};
loadImg.onerror = function () {
log('图片加载失败，请确定这个url是否能成功得到图片：' + resultSrc);
alert('图片加载失败');
$prevImgContainer.remove();
// 保存内容
self.saveSourceCode();
};
}
};
// 添加图片数据
// 1. 图片数据要经过 convertBase64UrlToBlob 转换
// 2. wangEditorMobileFile 要和后台一致
formData.append('wangEditorMobileFile', convertBase64UrlToBlob(base64, fileType));
xhr.send(formData);
};
//读取文件
reader.readAsDataURL(file);
});
// 点击菜单，触发 input 事件
$trigger.on('singleTap', function (e) {
// singleTap需要验证
if (self.checkTapTime(e, 'img') === false) {
return;
}
function fn() {
$inputFlie.trigger('click');
}
self.customCommand(true, fn, e);
});
},
// 更新样式
updateStyle: function () {
// 暂时不需要
}
};
};
});
// 渲染编辑器区域
window.___E_mod(function (E, $) {
E.fn.renderTxt = function () {
var self = this;
var $textarea = self.$textarea;
var $txt = self.$txt;
var $modalContainer = self.$modalContainer;
var $body = self.$body;
$textarea.after($txt);
$textarea.hide();
$body.append($modalContainer);
};
});
// 渲染菜单栏
window.___E_mod(function (E, $) {
E.fn.renderMenu = function () {
var self = this;
var menus = self.menus;
var $menuContainer = self.$menuContainer;
var $menuItemContainer = self.$menuItemContainer;
var $txt = self.$txt;
var $gap = $('');
var $body = self.$body;
// 配置文件中的菜单配置
var configMenus = self.config.menus;
// 遍历菜单配置集合，渲染菜单
$.each(configMenus, function (key, menuId) {
var menu = menus[menuId];
if (menu == null) {
return;
}
var $trigger = menu.$trigger;
var $wrap = menu.$wrap;
if ($trigger) {
// 渲染菜单
if ($wrap) {
$wrap.append($trigger);
$menuItemContainer.append($wrap);
} else {
$menuItemContainer.append($trigger);
}
// 菜单之间的间隙
// 之所以需要加 clone 是因为 append 由一种『单例移动』的特性！！需注意！！
$menuItemContainer.append($gap.clone());
}
});
// 删除最后一个间隙（即最后一个子元素）
$menuItemContainer.children().last().remove();
// 默认隐藏
$menuContainer.hide();
// 变量记录菜单容器的显示与隐藏
self.menuDisplayShow = false;
$body.append($menuContainer);
};
});
// 绑定document事件
window.___E_mod(function (E, $) {
E.fn.bindDocumentEvent = function () {
var $document = $(document);
var self = this;
var $txt = self.$txt;
var srollTime = Date.now();
// 滚动时隐藏菜单栏
$document.on('scroll', function (e) {
// 给滚动事件增加一个时间间隔的限制
if (Date.now() - srollTime <= 50) {
return;
} else {
srollTime = Date.now();
}
// 隐藏菜单
self.hideMenuContainer();
});
};
});
// 绑定编辑区域事件
window.___E_mod(function (E, $) {
E.fn.bindTxtEvent = function () {
var self = this;
var $txt = self.$txt;
var $menuContainer = self.$menuContainer;
var menuContainer = $menuContainer.get(0);
var srollTime = Date.now();
// 处理点击 $txt 的选区
// $txt 的 tap 事件中调用
function selectionHeadle () {
var focusElem;
var $focusElem;
// 保存选中区域
self.saveSelection();
// 获取当前选中的元素，并设置一个高亮样式
focusElem = self.getWrapRangeElem();
if (focusElem) {
$focusElem = $(focusElem);
// 增加样式
$focusElem.addClass('focus-elem');
self.$focusElem = $focusElem;
}
// 更新菜单样式
self.updateMenuStyle();
} // 处理点击 $txt 的选区
// tap时，记录选区，并显示菜单
$txt.on('focus', function () {
// 记录编辑器区域已经focus
self.isFocus = true;
});
$txt.on('singleTap', function (e) {
if (self.checkTapTime(e, '$txt') === false) {
return;
}
// 如果当前不是focus状态，则返回
if (!self.isFocus) {
return;
}
// 获取 target 并保存
var $target = $(e.target);
self.eventTarget($target);
if ($target.hasClass('focus-elem')) {
// 如果当前点击的就是上一次点击的元素，则隐藏菜单栏，返回
self.hideMenuContainer();
return;
}
if ($target.get(0).nodeName === 'IMG') {
// 点击图片时，隐藏菜单，返回
self.hideMenuContainer();
return;
}
if ($target.get(0) === $txt.get(0)) {
// 如果当前选中的编辑区域，则隐藏菜单，返回
self.hideMenuContainer();
return;
}
// 根据点击的位置，对菜单栏进行定位
self.setMenuContainerPosition();
// 如果有上一次选中的元素，则清除样式
var $focusElem = self.$focusElem;
if ($focusElem) {
$focusElem.removeClass('focus-elem');
}
// 等待 xxx ms 处理点击 $txt 的选区
setTimeout(selectionHeadle, self.txtTapDelay);
self.txtTapDelay = 100;
// 最后，阻止冒泡，阻止document接收到（document的tap事件要隐藏菜单）
e.stopPropagation();
});
// 滚动时隐藏菜单栏
$txt.on('scroll', function (e) {
// 给滚动事件增加一个时间间隔的限制
if (Date.now() - srollTime <= 50) {
return;
} else {
srollTime = Date.now();
}
// 隐藏菜单
self.hideMenuContainer();
// 阻止冒泡
e.stopPropagation();
});
// 打字时隐藏菜单栏
$txt.on('keydown', function (e) {
// 隐藏菜单
self.hideMenuContainer();
// 删除并且没有内容的时候，就禁止再删除了
var html = $txt.html();
if (e.keyCode === 8 && /^<(\w+)[^<>]*><\/\1>$/.test(html)) { e.preventDefault(); } }); // longtap doubletap 隐藏菜单 $txt.on('longTap, doubleTap', function () { // 隐藏菜单 self.hideMenuContainer(); }); // blur时，隐藏菜单栏 // 存储源代码 $txt.on('blur', function (e) { // 记录编辑区域已经 blur self.isFocus = false; var explicitOriginalTarget = e.explicitOriginalTarget; if (menuContainer.contains(explicitOriginalTarget)) { // firefox 中，点击菜单会导致 $txt blur // e.explicitOriginalTarget 有值，并且包含在菜单容器中，证明是 ff 点击菜单所致的 blur e.preventDefault(); return; } else { // 其他浏览器，点击菜单，都不会出现 blur 的情况 // 这是正常情况下的 blur // 存储源码代码 self.saveSourceCode(); // 隐藏菜单 fn self.hideMenuContainer(); } }); // $txt-blur end }; }); // 绑定菜单容器事件 window.___E_mod(function (E, $) { // ----------------- 绑定menucontiner事件 E.fn.bindMenuContainerEvent = function () { // tap时focus $text var self = this; var $menuContainer = self.$menuContainer; //tap时，阻止冒泡，因为上层的 $txt 会监测 tap 事件 $menuContainer.on('tap', function (e) { e.preventDefault(); e.stopPropagation(); }); }; }); // 绑定菜单按钮的事件 window.___E_mod(function (E, $) { E.fn.bindMenuBtnEvent = function () { var self = this; var menus = self.menus; // 遍历菜单配置项，执行bindEvent事件 $.each(menus, function (key, menu) { var bindEvent = menu.bindEvent; if (bindEvent && typeof bindEvent === 'function') { bindEvent.call(menu, self); } }); }; }); // $txt api window.___E_mod(function (E, $) { // focus API // 暂时没人用 // E.fn.focusTxt = function () { // var self = this; // var $txt = self.$txt; // if (!self.isFocus) { // $txt.focus(); // } // }; // 保存、获取 $txt tap时event对象的target元素 E.fn.eventTarget = function ($elem) { var self = this; if ($elem == null) { return self.$eventTargetElem; } else { self.$eventTargetElem = $elem; } }; // 保存源代码 E.fn.saveSourceCode = function () { var self = this; var $txt = self.$txt; var $textarea = self.$textarea; var sourceCode = ''; var $txtClone = $txt.clone(); var $focusElem1 = $txtClone.find('.focus-elem'); // 将当前的 $focusElem 清除样式 $focusElem1.removeClass('focus-elem'); // 获取源码 sourceCode = $txtClone.html(); sourceCode = sourceCode.replace(/\s?class=""/g, ''); $textarea.val(sourceCode); }; // 在编辑区域最后插入空行 E.fn.insertEmpltyLink = function () { var self = this; var $txt = self.$txt; var $children = $txt.children(); if ($children.length === 0) { $txt.append($('
') { $txt.append($('