简单三步让ueditor支持图片alt属性

图片的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能直接增加对此的设置。