码迷,mamicode.com
首页 > 其他好文 > 详细

kindeditor使用

时间:2015-06-13 06:16:45      阅读:449      评论:0      收藏:0      [点我收藏+]

标签:

1)调用kindeditor图片上传:

技术分享
<script>
    //这里是编辑器
    var editor;
    KindEditor.ready(function (K) {
        editor = K.create(‘textarea[name="content"]‘, {
            allowFileManager: true,
            resiseMode: 1
        });


        //这里是监听按钮点击事件 然后在初始化点击按钮弹窗上传图片的基本配置
        K(‘#image‘).click(function () {
            editor.loadPlugin(‘image‘, function () {
                editor.plugin.imageDialog({
                    imageUrl: K(‘#url‘).val(),
                    clickFn: function (url, title, width, height, border, align) {
                        K(‘#url‘).val(url);
                        editor.hideDialog();
                    }
                });
            });
        });
    });
</script>

表单代码
         <tr>
                <td>图片:</td>
                <td>
                    <input type="text" id="url" name="img" readonly="readonly" value=""/>
                    <input type="button" id="image" value="选择图片"/>

                </td>
            </tr>
View Code

 

2)调用kindeditor编辑器:

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<script charset="utf-8" src="./ke/kindeditor.js"></script>
<script>
    var editor;
    KindEditor.ready(function (K) {
        editor = K.create(‘textarea[name="content"]‘, {
            allowFileManager: true
        });
    });
</script>
<body>
<form action="test.php" method="post">
    <table border="1px">
        <tr>
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td><textarea name="content" cols="5" rows="5"></textarea></td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="submit" name="submit" value="submit"/>
            </td>
        </tr>
    </table>
</form>
</body>
</html>

 

3)jQuery获取kindedit中的内容:

<script>
    $(function(){
       $(‘#btnOk‘).bind(‘click‘,function(){
            var name=$(‘#name‘).val();
            var remark=$(document.getElementsByTagName(‘iframe‘)[0].contentWindow.document.body).html();
            var data={
                name:name,
                remark:remark
            }
           $.post(‘__URL__/add‘,data,function(msg){
               if(msg==1){
                   alert(‘录入成功!‘);
                   $(‘#name‘).val("");
                   $(document.getElementsByTagName(‘iframe‘)[0].contentWindow.document.body).html("");  //获取编辑器内容
               }else{
                   alert(‘录入失败‘);
               }
           });//post结束
       });//click结束
    });
</script>

 

kindeditor使用

标签:

原文地址:http://www.cnblogs.com/gimin/p/4572849.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!