kindeditor編輯器圖片上傳自動加alt屬性

kindeditor上傳本地圖片圖片說明是怎么添加到文本編輯器的alt里面的，為大家詳細(xì)說明下，怎么實現(xiàn)這個功能。

目標(biāo)分析：上傳本地圖片，可以默認(rèn)直接將標(biāo)題內(nèi)容作為圖片的title和alt屬性，并且此時是可以修改圖片說明屬性的，效果圖如下

修改前kindeditor編輯器圖片上傳效果圖

修改后kindeditor編輯器圖片上傳效果圖

廢話不多說，現(xiàn)在直接告訴大家，怎么做。首頁給大家說下原理。

如果是本地圖片，先上傳，上傳完之后可以獲得返回值，用返回值再插入代碼。也就是說給圖片說明加上title，然后點擊確定后會上傳到服務(wù)端，服務(wù)端把這個表單值拿到，放到返回數(shù)據(jù)的title字段。

第1步：插入圖片說明input標(biāo)簽

打開kindeditorpluginsimageimages.js

在//local upload - start 和//local upload - end中間插入如下代碼，注意插入的位置，大概在84行左右插入

1. //title
2. '<pclass="ke-dialog-row">'，
3. '<labelfor="remoteTitle"style="width:60px;">'+lang.imgTitle+'label>'，
4. '<inputtype="text"id="remoteTitle"class="ke-input-text"name="title"value="'+$('#title').val()+'"style="width:200px;"/>'，
5. 'p>'，
6. 'p>'，

第二步：服務(wù)器端處理表單值

打開kindeditorphpupload_json.php

在第132行左右，將代碼echo $json->encode(array('error' => 0， 'url' => $file_url));修改為下面的代碼

1. $img_title=$_POST['title'];
2. echo$json->encode(array('error'=>0，'url'=>$file_url，title=>$img_title));

到這里就完成了。所修改的代碼不多，就幾行而已，但是要經(jīng)過不斷測試，耗費(fèi)了程序員人生網(wǎng)站站長不少心血。來自程序員人生網(wǎng)。

標(biāo)簽：