zblog如何调用百度Ueditor编辑器的上传图片功能
今天做zblogphp的后台主题配置功能时,后台的幻灯片管理功能需要用到上传图片,正好整理一下解决方法:
需要达到的效果如下:
点击上传图片按钮调用百度编辑器上传图片功能,上传完成点击“确定”按钮后上图中的输入框内自动填充该图片的地址路径。
一、“上传图片”按钮并非按钮,而是一个strong标签。
<th class="uploadimg"> <input type="text" class="uplod_img w-75" name="img"> <strong>上传图片</strong> </th>
二、该按钮的样式:
.uplod_img {vertical-align: middle;} .uploadimg strong {cursor:pointer; background:#3A6EA5; width:15%; text-align:center; padding:3px 0; color:#fff; display:block; float:right;vertical-align: middle;}
三、调用百度编辑器:
if ($zbp->CheckPlugin('UEditor')) { //判断zblog当前是否使用了百度编辑器 echo '<script type="text/javascript" src="'.$zbp->host.'zb_users/plugin/UEditor/ueditor.config.php"></script>'; echo '<script type="text/javascript" src="'.$zbp->host.'zb_users/plugin/UEditor/ueditor.all.min.js"></script>'; echo "<script type=\"text/javascript\" src=\"style/js/lib.upload.js\"></script>"; //我们的调用代码写在这里 }
四、lib.upload.js的内容:
var container = document.createElement('script'); $(container).attr('type','text/plain').attr('id','img_editor'); $("body").append(container); _editor = UE.getEditor('img_editor'); _editor.ready(function () { _editor.hide(); $(".uploadimg strong").click(function(){ object = $(this).parent().find('.uplod_img'); _editor.getDialog("insertimage").open(); _editor.addListener('beforeInsertImage', function (t, arg) { object.attr("value", arg[0].src); }); }); });
完成。