wangEditor-3.1.1 自己扩展的， 扩展图片添加alt标签 原创

wangEditor-3.1.1 扩展图片添加alt标签，

原本功能是，上传图片后，选中图片，在工具栏上传图片的位置会高亮，点击就就会出现下面的页面

由于SEO标签Alt属性值最好有，毕竟搜索引擎不知道图片的内容。

我们进行扩展手动添加alt的功能。

最终效果图

在wangEditor.js 中搜索width-100 也就是下图的位置

1、生成一个按钮的id

/*扩展 添加alt*/
var addAltBtn = getRandom('del-btn');

2、添加文本框和按钮

在tpl:最后追加，下面代码，添加界面（文本框和按钮）

<div class="w-e-button-container" style="border-bottom:1px solid #f1f1f1;padding-bottom:5px;margin-bottom:5px;">

3、添加事件

复制收展JavaScript, {
                selector: '#' + addAltBtn,
                type: 'click',
                fn: function fn() {
                    var $img = editor._selectedImg;
                    if ($img) {
                        //给图片加alt和title
                        $img.attr("alt", $("#alt").val());
                        $img.attr("title", $("#alt").val());
                    }
                    // 返回 true，表示该事件执行完之后，panel 要关闭。否则 panel 不会关闭
                    return true;
                }
            }
1
2
3
4
5
6
7
8
9
10
11
12
13
14

4、在最后回显alt数据

复制收展JavaScript/*回显alt, 等组件加载完才能回显*/
var $img = editor._selectedImg;
if ($img) {
document.getElementById("alt").value = $img.attr('alt');
//console.log($img.attr('alt'))
}
1
2
3
4
5
6

5、最后美化一下，放到wangEditor.css

复制收展CSS#alt {
float: left;
background: #fff;
border-radius: 5px;
border: 1px solid #9b9b9b;
height: 30px;
width: 80%;
padding-left: 5px;
margin-left: 10px;
}
1
2
3
4
5
6
7
8
9
10

如果要想黑给图片alt属性默认的值。

可以这么做。操作过程中没有感觉会被百度认为作弊嫌疑。但最好不重复。可以长尾关键词+其他