图片的alt属性会对网站的SEO产生影响。但是ueditor 1.3.6 版本并不支持图片alt属性。
下面,通过简单的几个步骤实现此功能。最终效果图如下:
添加完后,查看HTML就会发现alt属性出现在了代码中。例:<img src="xxx" alt="xxx" title="xxx" />
修改image.html
打开ueditor/dialogs/image/image.html。并找查找 lang_input_title,在该 tr 后面加上我们新的代码。
<tr> <td class="label"><label for="title"><var id="lang_input_title"></var></label></td> <td><input type="text" id="title"/></td> </tr> <!-- 下面是新的代码 --> <tr> <td class="label"><label for="alt"><var id="lang_input_alt"></var></label></td> <td><input type="text" id="alt"/></td> </tr>
增加本地化支持
打开ueditor/lang,在该目录下找到 en/en.js 和 zh-cn.js,添加对lang_input_alt的支持。
lang_input_title: "描 述:", lang_input_alt: "属 性:",
zh-cn.js
'lang_input_title': "Title", 'lang_input_alt': "Alt",
en.js
修改 image.js
打开 ueditor/dialogs/image/image.js
A、修改insertSingle方法
function insertSingle() { var url = g("url"), width = g("width"), height = g("height"), border = g("border"), vhSpace = g("vhSpace"), title = g("title"), alt = g("alt"),//新增对alt的支持 align = findFocus("remoteFloat", "name"), imgObj = {}; if (!url.value) return; if (!flagImg) return; //粘贴地址后如果没有生成对应的预览图,可以认为本次粘贴地址失败 if (!checkNum([width, height, border, vhSpace])) return false; imgObj.src = url.value; imgObj._src = url.value; imgObj.width = width.value; imgObj.height = height.value; imgObj.border = border.value; imgObj.floatStyle = align; imgObj.vspace = imgObj.hspace = vhSpace.value; imgObj.title = title.value; imgObj.alt = alt.value;//新增对alt的支持 imgObj.style = "width:" + width.value + "px;height:" + height.value + "px;"; insertImage(imgObj); editor.fireEvent("catchRemoteImage"); hideFlash(); }
B、修改 createPreviewImage 方法
function createPreviewImage(url) { if (!url) { flagImg = null; g("preview").innerHTML = ""; g("width").value = ""; g("height").value = ""; g("border").value = ""; g("vhSpace").value = ""; g("title").value = ""; g("alt").value = "";//新增对alt的支持 $focus(g("url")); return; }
C、修改 showImageInfo 方法
function showImageInfo(img) { if (!img.getAttribute("src") || !img.src) return; var wordImgFlag = img.getAttribute("word_img"); g("url").value = wordImgFlag ? wordImgFlag.replace("&", "&") : (img.getAttribute('_src') || img.getAttribute("src", 2).replace("&", "&")); g("width").value = img.width || 0; g("height").value = img.height || 0; g("border").value = img.getAttribute("border") || 0; g("vhSpace").value = img.getAttribute("vspace") || 0; g("title").value = img.title || ""; g("alt").value = img.alt || "";//新增对alt的支持 var align = editor.queryCommandValue("imageFloat") || "none"; updateAlignButton(align); //保存原始比例,用于等比缩放 var percent = (img.width / img.height).toFixed(2); addSizeChangeListener(percent); }
就是这么简单,希望下一个版本的ueditor能直接增加对此的设置。