烟台网站建设

编辑器单个上传的调用方法

2019/8/15 9:42:31
结合纯jQuery+CSS写成的,部署环境起来非常的简单方面快捷。在Kindeditor的官方网站上面供下载的Demo,但是里面的测试文件都是基于php方面的demo。而网上对asp的配置说明比较少

Kindeditor编辑器是一款非常强大的编辑器,轻量级的。结合纯jQuery+CSS写成的,部署环境起来非常的简单方面快捷。在Kindeditor的官方网站上面供下载的Demo,但是里面的测试文件都是基于php方面的demo。而网上对asp的配置说明比较少。


今天在配置用Kindeditor单独上传图片的时候总是不成功。经过查看说明和多次测试终于成功了。贴出来大家一起学习学习。


代码如下:


一、调用相关文件:

<link rel="stylesheet" href="../kindeditor/themes/default/default.css" />

<link rel="stylesheet" href="../kindeditor/plugins/code/prettify.css" />

<script charset="utf-8" src="../kindeditor/kindeditor.js"></script>

<script charset="utf-8" src="../kindeditor/lang/zh_CN.js"></script>

<script charset="utf-8" src="../kindeditor/plugins/code/prettify.js"></script>

charset="utf-8" 这句很重要,一定要写。这个可以解决gb2312编码问题。



二、配置说明:

<script>

KindEditor.ready(function (K) {

  var editor = K.editor({

    cssPath : '../kindeditor/plugins/code/prettify.css',

    uploadJson : '../kindeditor/asp/upload_json.asp',

    allowFileManager : true

  });

K('#insertfile').click(function() {

  editor.loadPlugin('image', function() {

    editor.plugin.imageDialog({

    imageUrl : K('#F_Main_Pic').val(),

    clickFn : function(url, title, width, height, border, align) {

       K('#F_Main_Pic').val(url);

       editor.hideDialog();

    }

   });

  });

});

});

</script>



三、文件调用:

<input name="F_Main_Pic" type="text" id="F_Main_Pic" value="" size="28" /> <input name="insertfile" type="button" id="insertfile" value="选择图片" />