KindEditor编辑器使用_kindeditor-min.js-优快云博客

转载：http://www.cnblogs.com/gimin/p/4572849.html

KindEditor使用

1）kindeditor默认模式调用

<link rel="stylesheet" href="./KindEditor/themes/default/default.css" />
<script charset="utf-8" src="./KindEditor/kindeditor-min.js"></script>
<script charset="utf-8" src="./KindEditor/lang/zh_CN.js"></script>
<script>
    var editor,editor1;
    KindEditor.ready(function(K) {
        editor = K.create('textarea[name="content"]', {
            allowFileManager : true
        });
        editor1 = K.create('textarea[name="content1"]', {
            allowFileManager : true
        });
　　　　  //取得HTML
　　　　　K('input[name=getHtml]').click(function(e) {  
　　　　　　　　alert(editor1.html());  
　　　　  });
　　　　　//取得文本(包含img,embed)
　　　　　K('input[name=getText]').click(function(e) {  
　　　　　　　　alert(editor.text());  
　　　　　　});
　　　　　//清空内容
　　　　 K('input[name=clear]').click(function(e) {  
　　　　　　editor.html('');  
　　　　　});

    });
</script>
<body>
<form method="post" action="sub.php" id="myform">
    <textarea name="content" style="width:800px;height:400px;visibility:hidden;"></textarea>
    <textarea name="content1" style="width:800px;height:400px;visibility:hidden;"></textarea>
    <input type="submit" value="提交"/>
</form>
</body>

效果如图：

2）简单模式

<link rel="stylesheet" href="./KindEditor/themes/default/default.css" />
<script charset="utf-8" src="./KindEditor/kindeditor-min.js"></script>
<script charset="utf-8" src="./KindEditor/lang/zh_CN.js"></script>
<script>
    var editor;
    KindEditor.ready(function(K) {
        editor = K.create('textarea[name="content"]', {
            resizeType : 1,
            allowPreviewEmoticons : false,
            allowImageUpload : false,
            items : [
                'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
                'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
                'insertunorderedlist', '|', 'emoticons', 'image', 'link']
        });
    });
</script>
<body>
<form method="post" action="sub.php" id="myform">
    <textarea name="content" style="width:800px;height:400px;visibility:hidden;"></textarea>
    <input type="submit" value="提交"/>
</form>

效果如图：

3）QQ风格

<!--<link rel="stylesheet" href="./KindEditor/themes/default/default.css" />-->
<script charset="utf-8" src="./KindEditor/kindeditor-min.js"></script>
<script charset="utf-8" src="./KindEditor/lang/zh_CN.js"></script>
<script>
    KindEditor.ready(function(K) {
        K.each({
            'plug-align' : {
                name : '对齐方式',
                method : {
                    'justifyleft' : '左对齐',
                    'justifycenter' : '居中对齐',
                    'justifyright' : '右对齐'
                }
            },
            'plug-order' : {
                name : '编号',
                method : {
                    'insertorderedlist' : '数字编号',
                    'insertunorderedlist' : '项目编号'
                }
            },
            'plug-indent' : {
                name : '缩进',
                method : {
                    'indent' : '向右缩进',
                    'outdent' : '向左缩进'
                }
            }
        },function( pluginName, pluginData ){
            var lang = {};
            lang[pluginName] = pluginData.name;
            KindEditor.lang( lang );
            KindEditor.plugin( pluginName, function(K) {
                var self = this;
                self.clickToolbar( pluginName, function() {
                    var menu = self.createMenu({
                        name : pluginName,
                        width : pluginData.width || 100
                    });
                    K.each( pluginData.method, function( i, v ){
                        menu.addItem({
                            title : v,
                            checked : false,
                            iconClass : pluginName+'-'+i,
                            click : function() {
                                self.exec(i).hideMenu();
                            }
                        });
                    })
                });
            });
        });
        K.create('#contentqq', {
            themeType : 'qq',
            items : [
                'bold','italic','underline','fontname','fontsize','forecolor','hilitecolor','plug-align','plug-order','plug-indent','link'
            ]
        });
    });
</script>
<body>
<form method="post" action="sub.php" id="myform">
    <textarea id="contentqq" name="content" style="width:800px;height:400px;visibility:hidden;"></textarea>
    <input type="submit" value="提交"/>
</form>
</body>

效果如图：

4）使用其它类库

　　a）使用jQuery

<link rel="stylesheet" href="./KindEditor/themes/default/default.css" />
<script charset="utf-8" src="./KindEditor/kindeditor-min.js"></script>
<script charset="utf-8" src="./KindEditor/lang/zh_CN.js"></script>
<script charset="utf-8" src="./jquery.js"></script>
<script>
    $(function() {
        var editor = KindEditor.create('textarea[name="content"]');
    });
</script>
<body>
<form method="post" action="sub.php" id="myform">
    <textarea name="content" style="width:800px;height:200px;"></textarea>
    <input type="submit" value="提交"/>
</form>

　　b）在jQuery UI Dialog里打开编辑器

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>With jQuery UI</title>
    <style>
        textarea {
            display: block;
        }
        #J_editorDialog {
            display: none;
        }
    </style>
    <link rel="stylesheet" href="./KindEditor/jquery-ui/css/smoothness/jquery-ui-1.9.2.custom.css" />
    <link rel="stylesheet" href="./KindEditor/themes/default/default.css" />
    <script charset="utf-8" src="./KindEditor/jquery-ui/js/jquery-ui-1.9.2.custom.js"></script>
    <script charset="utf-8" src="./KindEditor/kindeditor-all-min.js"></script>
    <script charset="utf-8" src="./KindEditor/lang/zh_CN.js"></script>
    <script charset="utf-8" src="jquery.js"></script>

    <script>
        var editor;     //定义全局editor，防止变量未定义
        $(function() {
            $('#J_openDialog').click(function() {
                $('#J_editorDialog').dialog({
                    title : '提交相关资料',
                    width : 750,
                    open : function(event, ui) {
                        // 打开Dialog后创建编辑器
                      editor=KindEditor.create('textarea[name="content"]', {
                            resizeType : 1
                        });
                    },
                    beforeClose : function(event, ui) {
                        // 关闭Dialog前移除编辑器
                        KindEditor.remove('textarea[name="content"]');
                    }
                });
            });
            //用button的submit()方法提交，虽然有提交动作到处理程序，但无法获取textarea中输入的值
            $('#sub').click(function(){
                if(editor.html()==""){
                    alert("内容不能为空！");
                    return false;
                }
            });
        });
    </script>
</head>
<body>
<h3>在jQuery UI Dialog里打开编辑器</h3>
<div id="J_editorDialog">
    <form action="sub.php" method="post" id="myform">
        <textarea name="content" style="width:100%;height:200px;">文本原来内容</textarea>
        <input type="submit" id="sub" value="确定" />
    </form>
</div>
<button type="button" id="J_openDialog">打开Dialog</button>
</body>
</html>

效果如图：

5）单独调用组件

　　a）文件上传按钮

<html>
<head>
    <meta charset="utf-8" />
    <title>Upload Button Examples</title>
    <link rel="stylesheet" href="./KindEditor/themes/default/default.css" />
    <script src="./KindEditor/kindeditor-all-min.js"></script>
    <script>
        KindEditor.ready(function(K) {
            var uploadbutton = K.uploadbutton({
                button : K('#uploadButton')[0],
                fieldName : 'imgFile',
                url : './KindEditor/php/upload_json.php?dir=file',
                afterUpload : function(data) {
                    if (data.error === 0) {
                        var url = K.formatUrl(data.url, 'absolute');
                        K('#url').val(url);
                    } else {
                        alert(data.message);
                    }
                },
                afterError : function(str) {
                    alert('自定义错误信息: ' + str);
                }
            });
            uploadbutton.fileBox.change(function(e) {
                uploadbutton.submit();
            });
        });
    </script>
</head>
<body>
<div class="upload">
    <form action="sub.php" method="post">
        <input class="ke-input-text" name="filename" type="text" id="url" value="" readonly="readonly" />
        <input type="button" id="uploadButton" value="Upload" />
        <input type="submit" value="提交"/>
    </form>
</div>
</body>
</html>

　　b）文件上传弹出框（显示文件说明和文件空间查看）

<html>
<head>
    <meta charset="utf-8" />
    <title>fileDialog Examples</title>
    <link rel="stylesheet" href="./KindEditor/themes/default/default.css" />
    <script src="./KindEditor/kindeditor.js"></script>
    <script src="./KindEditor/lang/zh_CN.js"></script>
    <script src="./jquery.js"></script>
    <script>
        KindEditor.ready(function(K) {
            var editor = K.editor({
                allowFileManager : true
            });
            K('#insertfile').click(function() {
                editor.loadPlugin('insertfile', function() {
                    editor.plugin.fileDialog({
                        fileUrl : K('#url').val(),
                        clickFn : function(url, title) {
                            K('#url').val(url);         //上传文件的路径
                            K('#filerealname').val(title);     //指定上传文件的说明信息
                            editor.hideDialog();
                        }
                    });
                });
            });
        });
        $(function(){
            $('#sub').click(function(){
                $('#myform').submit();
            });
        });

    </script>
</head>
<body>
<form action="sub.php" method="post" id="myform">
    <input type="text" id="url" name="filename" value="" />
    <input type="hidden" id="filerealname" name="filerealname" value="" />
    <input type="button" id="insertfile" value="选择文件" /><br/>
    <input type="button" id="sub" value="上传"/>
</form>
</body>
</html>

效果如图：

　　c）弹出对话框

<html>
<head>
    <meta charset="utf-8" />
    <title>Dialog Examples</title>
    <link rel="stylesheet" href="./KindEditor/themes/default/default.css" />
    <script src="./KindEditor/kindeditor.js"></script>
    <script src="./jquery.js"></script>
    <script>
        KindEditor.ready(function(K) {
            K('#create1').click(function() {
                var dialog = K.dialog({
                    width : 500,
                    title : '测试窗口',
                    body : '<div style="margin:10px;"><strong>内容内容内容内容内容内容内容内容</strong></div>',
                    closeBtn : {
                        name : '关闭',
                        click : function(e) {
                            dialog.remove();
                        }
                    },
                    yesBtn : {
                        name : '确定',
                        click : function(e) {
                            alert(this.value);
                        }
                    },
                    noBtn : {
                        name : '取消',
                        click : function(e) {
                            dialog.remove();
                        }
                    }
                });
            });
        });
    </script>
</head>
<body>
<input type="button" id="create1" value="打开弹出框" />
</body>
</html>

效果如图：

　　d）上传图片弹出框

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>ImageDialog Examples</title>
    <link rel="stylesheet" href="./KindEditor/themes/default/default.css" />
    <script src="./KindEditor/kindeditor.js"></script>
    <script src="./KindEditor/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);
                            K('#filename_').val(title);     //获取文件原名
                            editor.hideDialog();
                        }
                    });
                });
            });
        });
    </script>
</head>
<body>
<form action="sub.php" method="post">
<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" name="url"  value="" />
    <input type="text" id="filename_" name="filename_"/> <input type="button" id="image3" value="选择图片" />（本地上传）
</p>
    <input type="submit" value="提交"/>
</form>
</body>
</html>

　　e）批量上传图片

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>MultiImageDialog Examples</title>
    <link rel="stylesheet" href="./KindEditor/themes/default/default.css" />
    <script src="./KindEditor/kindeditor.js"></script>
    <script src="./KindEditor/lang/zh_CN.js"></script>
    <script>
        KindEditor.ready(function(K) {
            var editor = K.editor({
                allowFileManager : true
            });
            K('#J_selectImage').click(function() {
                editor.loadPlugin('multiimage', function() {
                    editor.plugin.multiImageDialog({
                        clickFn : function(urlList) {
                            var div = K('#J_imageView');
                            div.html('');
                            K.each(urlList, function(i, data) {
//                                div.append('<img src="' + data.url + '">');
                                div.append('<span>图片路径:</span>');
                                div.append('<input value= "' + data.url + '"'+'name="images['+ i +'][url]'+'"'+'>');
                                div.append('<span> alt属性:</span>');
                                div.append('<input value= "' + data.origin_name + '"'+'name="images['+ i +'][alt]'+'"'+'>');
                                div.append('<br/>');

                            });
                            editor.hideDialog();
                        }
                    });
                });
            });
        });
    </script>
</head>
<body>
<input type="button" id="J_selectImage" value="批量上传" />

<form action="sub.php" method="post">
    <div id="J_imageView"></div>
    <br/>
    <input type="submit" value="确定上传"/>
</form>
</body>
</html>

效果如图：