• 郑州网站制作-郑州网页制作-郑州做网站-郑州网站设计公司

  • 电话:173-3718-2618 QQ:1045959463
  • www.wwebw.com 收藏本站
当前位置:首页 > 建站知识 > 网站设计技术 > 正文

kindeditor 4.x单独调用图片上传

发布时间:2014年09月23日 10:24 | 发布者:www.wwebw.com | 浏览次数:2340次

最近用php开发一个企业网站后台,涉及案例部分,由于编辑器不怎么会用,研究了许久,终于搞定。

现分享kindeditor使用调用图片上传按钮,一共3个样式。代码中红色的位置记得更换实际的路径。[代码亲祺网站建设亲测,放心使用吧同学!]

 

 


<!doctype html>
<html>
 <head>
 <meta charset="utf-8" />
 <title>ImageDialog Examples</title>
 <link rel="stylesheet" href="../themes/default/default.css" />
 <script src="../kindeditor.js"></script>
 <script src="../lang/zh_CN.js"></script>
 <script>
 KindEditor.ready(function(K) {
 var editor = K.editor({
 allowFileManager : true
 });
 K('#image1').click(function() {
 editor.loadPlugin('image', function() {
 editor.plugin.imageDialog({
 imageUrl : K('#url1').val(),
 clickFn : function(url, title, width, height, border, align) {
 K('#url1').val(url);
 editor.hideDialog();
 }
 });
 });
 });
 K('#image2').click(function() {
 editor.loadPlugin('image', function() {
 editor.plugin.imageDialog({
 showLocal : false,
 imageUrl : K('#url2').val(),
 clickFn : function(url, title, width, height, border, align) {
 K('#url2').val(url);
 editor.hideDialog();
 }
 });
 });
 });
 K('#image3').click(function() {
 editor.loadPlugin('image', function() {
 editor.plugin.imageDialog({
 showRemote : false,
 imageUrl : K('#url3').val(),
 clickFn : function(url, title, width, height, border, align) {
 K('#url3').val(url);
 editor.hideDialog();
 }
 });
 });
 });
 });
 </script>
 </head>
 <body>
 <p><input type="text" id="url1" value="" /> <input type="button" id="image1" value="选择图片" />(网络图片 + 本地上传)</p>
 <p><input type="text" id="url2" value="" /> <input type="button" id="image2" value="选择图片" />(网络图片)</p>
 <p><input type="text" id="url3" value="" /> <input type="button" id="image3" value="选择图片" />(本地上传)</p>
 </body>
</html>