kindeditor使用

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)