kindeditor上传本地图片图片说明是怎么添加到文本编辑器的alt里面的,程序员人生工程师为大家详细说明下,怎么实现这个功能。 目标分析:上传本地图片,可以默认直接将标题内容作为图片的title和alt属性,并且此时是可以修改图片说明属性的,效果图如下 修改前kindeditor编辑器图片上传效果图
修改后kindeditor编辑器图片上传效果图 好了。废话不多说,现在直接告诉大家,怎么做。蛋糕网
给大家说下原理。 如果是本地图片,先上传,上传完之后可以获得返回值,用返回值再插入代码。也就是说给图片说明加上title,然后点击确定后会上传到服务端,服务端把这个表单值拿到,放到返回数据的title字段。第一步:插入图片说明input标签 打开kindeditor\plugins\image\images.js在//local upload - start 和//local upload - end中间插入如下代码,注意插入的位置,大概在84行左右插入
- //title’<divclass=“ke-dialog-row”>’,
- ’<labelfor="remoteTitle"style=“width:60px;”>’+lang.imgTitle+‘ label>’,’<inputtype="text"id="remoteTitle"class="ke-input-text"name=“title"value=”’+$(’#title’).val()+’"style=“width:200px;”/>’,
- ‘ div>’,‘ div>’,
第二步:服务器端处理表单值 打开kindeditor\php\upload_json.php 在第132行左右,将代码echo $json->encode(array(‘error’ => 0, ‘url’ => f i l e u r l ) ) ; 修 改 为 下 面 的 代 码 < / p > < b l o c k q u o t e > < o l c l a s s = " d p − c " > < l i c l a s s = " a l t " > file_url));修改为下面的代码</p><blockquote><ol class="dp-c"><li class="alt"> fileurl));修改为下面的代码</p><blockquote><olclass="dp−c"><liclass="alt">img_title=KaTeX parse error: Expected 'EOF', got '&' at position 7: _POST[&̲#39;title']…json->encode(array(‘error’=>0,‘url’=>KaTeX parse error: Expected 'EOF', got '&' at position 16: file_url,title=&̲gt;img_title));
到这里就完成了。所修改的代码不多,就几行而已,但是要经过不断测试,耗费了程序员人生网站站长不少心血。