名客技术网

简体
繁体
×警告!请输入搜索关键词(仅提示一次)
网站建设电话:15927179345(资深程序)

kindeditor编辑器图片上传自动加alt属性

作者:网站小编时间:2019-05-14 16:05:31
kindeditor上传本地图片图片说明是怎么添加到文本编辑器的alt里面的,程序员人生工程师为大家详细说明下,怎么实现这个功能。
目标分析:上传本地图片,可以默认直接将标题内容作为图片的title和alt属性,并且此时是可以修改图片说明属性的,效果图如下
修改前kindeditor编辑器图片上传效果图

kindeditor编辑器图片上传自动加alt属性1
    修改后kindeditor编辑器图片上传效果图


好了。废话不多说,现在直接告诉大家,怎么做。首页给大家说下原理。
如果是本地图片,先上传,上传完之后可以获得返回值,用返回值再插入代码。也就是说给图片说明加上title,然后点击确定后会上传到服务端,服务端把这个表单值拿到,放到返回数据的title字段。

第一步:插入图片说明input标签
打开kindeditorpluginsimageimages.js
在//local upload - start 和//local upload - end中间插入如下代码,注意插入的位置,大概在84行左右插入

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

第二步:服务器端处理表单值
打开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)); 

到这里就完成了。所修改的代码不多,就几行而已,但是要经过不断测试

名客技术网如果无意之中侵犯了您的版权,请联系站长,本站将在3个工作日内删除 QQ:175352796
Copyright 2011-2020 Powered by 121ASK.COM, All Rights Reserved.
备案号:鄂ICP备11013833号-3