在UEditor编辑器的工具栏上加一行文字或按钮
微wx笑
2022-01-23【网页网站】
3
0关键字：
UEditor 编辑器
有时候我们可能需要在UEditor编辑器的工具栏上加一行文字或按钮，用来提示一些信息，当前一些耗时操作的状态，比如远程图片的抓取。
之前遇到一个问题：百度UEditor粘贴内容包含大量远程图片抓取失败的问题
问题虽然解决了，但是并不完美，很多状态提示信息是通过控制台输出的，不打开开发者工具根本看不到，使用体验比较差，于是就想到在工具栏上添加一个输出提示信息的功能。
完成后的效果：
示例代码：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title></title>
<script type="text/javascript" charset="utf-8" src="../ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="editor_api.js"></script>
<script type="text/javascript" charset="utf-8" src="../../js/jquery-1.9.1.min.js"></script>
</head>
<body>
<h1>UEditor简单功能</h1>
<!--style给定宽度可以影响编辑器的最终宽度-->
<script type="text/plain" id="myEditor">
<p>这里我可以写一些输入提示</p>
</script>
<script type="text/javascript">
var ue = UE.getEditor('myEditor',{
//这里可以选择自己需要的工具按钮名称,此处仅选择如下五个
toolbars:[['insertimage']],
//focus时自动清空初始化时的内容
autoClearinitialContent:true,
//关闭字数统计
wordCount:false,
//关闭elementPath
elementPathEnabled:false,
//默认的编辑区域高度
initialFrameHeight:300
//更多其他参数，请参考ueditor.config.js中的配置项
});
ue.ready(function () {
$(".edui-toolbar").append('<div style="float:left;">请点击按钮上传图片</div>');
});
</script>
</body>
</html>有时候可能不只是需要添加文字的提示信息，还需要添加按钮操作，以下代码是写在UEditor代码内部的：
function catchremoteimageGetTip(){
var upload_tip = $("#edui_upload_tip");
if (upload_tip.length == 0){
$(".edui-toolbar").append('<div id="edui_upload_tip" class="edui-box edui-default" style="padding: 5px;"></div>');
upload_tip = $("#edui_upload_tip");
}
return upload_tip;
}
function catchremoteimageRetry(){
var upload_tip = catchremoteimageGetTip();
if (upload_tip.length > 0){
var retry = $("<a>重试</a>");
$(retry).click(function(){ me.fireEvent("catchRemoteImage"); });
upload_tip.append(" ");
upload_tip.append(retry);
}else{
console.log("catchremoteimageTip，无法获取或创建edui_upload_tip引用");
}
}代码的功能是在工具栏的后面添加一个id="edui_upload_tip"的div用于显示提示信息，
如果调用“catchremoteimageRetry()”，还可以在后面添加一个重试的按钮，功能是重新调用远程图片的抓取。
下面的代码是提示信息的处理：
function catchremoteimageTip(tipStr, callbackInfo) {
//本方法用于在工具栏上显示抓取远程图片的提示信息
if (typeof tipStr == 'undefined'){ return; }
var upload_tip = catchremoteimageGetTip();
if (upload_tip.length > 0){
if (typeof callbackInfo == 'undefined'){
upload_tip.text(tipStr);
}else{
if (tipStr.length > 0){
tipStr += "，";
}
if (callbackInfo.state && callbackInfo.state == 'SUCCESS'){
var listCount = 0;
for (var i = 0; i < callbackInfo.list.length; i++){
if (callbackInfo.list[i].state == "SUCCESS"){
listCount++;
}
}
remoteImagesLength -= listCount;
if (listCount == callbackInfo.list.length){
if (remoteImagesLength < 1){
upload_tip.text(tipStr+ "本次成功" + listCount + "张，全部抓取完成");
}else{
upload_tip.text(tipStr+ "本次成功" + listCount + "张，剩余" + remoteImagesLength + "张");
}
}else{
upload_tip.text(tipStr+ "本次成功" + listCount + "张，失败" + (callbackInfo.list.length - listCount) + "张");
}
}else{
upload_tip.text(tipStr+ "服务器返回失败，详情请查看控制台输出");
}
}
}else{
console.log("catchremoteimageTip，无法获取或创建edui_upload_tip引用");
}
}抓取事件处理函数
me.addListener("catchRemoteImage", function () {
var catcherLocalDomain = me.getOpt('catcherLocalDomain'),
catcherActionUrl = me.getActionUrl(me.getOpt('catcherActionName')),
catcherUrlPrefix = me.getOpt('catcherUrlPrefix'),
catcherFieldName = me.getOpt('catcherFieldName');
var remoteImages = [],
imgs = domUtils.getElementsByTagName(me.document, "img"),
test = function (src, urls) {
if (src.indexOf(location.host) != -1 || /(^\.)|(^\/)/.test(src)) {
return true;
}
if (urls) {
for (var j = 0, url; url = urls[j++];) {
if (src.indexOf(url) !== -1) {
return true;
}
}
}
return false;
};
for (var i = 0, ci; ci = imgs[i++];) {
if (ci.getAttribute("word_img")) {
continue;
}
var src = ci.getAttribute("_src") || ci.src || "";
if (/^(https?|ftp):/i.test(src) && !test(src, catcherLocalDomain)) {
remoteImages.push(src);
}
}
catchremoteimageTip(remoteImages.length + " 张图片待抓取");
if (remoteImages.length) {
console.log("remoteImages.length",remoteImages.length);
console.log("开始分段抓取远程图片......");
if (remoteImagesLength == 0){
catchremoteimageTip("开始分段抓取，总计" + remoteImages.length + "张");
remoteImagesLength = remoteImages.length;
}else{
catchremoteimageTip("分段抓取中，剩余" + remoteImages.length + "张");
}
var pk = 0;
//while (pk < remoteImages.length){
var imgPart = [],pkBegin = pk;
for (var k = 0; k < 5; k++){
if (pk < remoteImages.length){
imgPart.push(remoteImages[pk]);
pk++;
}
}
console.log("imgPartBegin", pkBegin, "End", pk);
if (imgPart.length) {
console.log("imgPart", imgPart);
catchremoteimage(imgPart, {
//成功抓取
success: function (r) {
try {
var info = r.state !== undefined ? r:eval("(" + r.responseText + ")");
console.log("info", info);
catchremoteimageTip("", info);
} catch (e) {
catchremoteimageTip("r.responseText转换json对象失败");
catchremoteimageRetry();
console.log(e);
return;
}
/* 获取源路径和新路径 */
var i, j, ci, cj, oldSrc, newSrc, list = info.list,succecsCount = 0;
for (i = 0; ci = imgs[i++];) {
oldSrc = ci.getAttribute("_src") || ci.src || "";
for (j = 0; cj = list[j++];) {
if (oldSrc == cj.source.replace(/&/ig, "&") && cj.state == "SUCCESS") { //抓取失败时不做替换处理
succecsCount++;
newSrc = catcherUrlPrefix + cj.url;
domUtils.setAttributes(ci, {
"src": newSrc,
"_src": newSrc
});
break;
}
}
}
me.fireEvent('catchremotesuccess');
if (succecsCount == 0){
catchremoteimageTip("本次抓取全部失败");
catchremoteimageRetry();
}else{
setTimeout(function(){
me.fireEvent("catchRemoteImage");
},2000);
}
},
//回调失败，本次请求超时
error: function () {
me.fireEvent("catchremoteerror");
catchremoteimageTip("图片抓取失败，请求超时");
catchremoteimageRetry();
}
});
}
//}
}else{
remoteImagesLength = 0;
}
本文由 微wx笑 创作，采用 署名-非商业性使用-相同方式共享 4.0 许可协议，转载请附上原文出处链接及本声明。
原文链接：https://www.ivu4e.cn/blog/web/2022-01-23/966.html
