KindEditor編輯器使用

原創 冷雨0412 2018-09-05 04:34

轉載：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>
複製代碼

 

效果如圖：

 


發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

基於PHP的電子電工試驗教學網站設計

        基於PHP的電子電工試驗教學網站設計 Design of Electrical and Electronic Lib Center Website on the Basis of Php                  

简斯易达 2020-07-05 19:45:42

MySql中添加用戶,新建數據庫,用戶授權,刪除用戶,修改密碼，root密碼丟失

root密碼丟失目前來說只有兩種解決辦法：１、跳過授權表啓動MYSQL:   WINDOWS或者LINUX下都可以用    MYSQLD --SKIP-GRANT-TABLES    來啓動　MYSQL。    這個時候你對所有的表都具有

MrHhong 2020-06-30 05:00:46

在Win7下將Sphinx安裝成windows服務時碰到如下錯誤及服務器操作

在Win7下將Sphinx安裝成windows服務時碰到如下錯誤： Install the searchd system as a Windows service: C:\Sphinx\bin> C:\Sphinx\bin\sear

MrHhong 2020-06-30 05:00:46

php出現如下錯誤： Parse error: syntax error, unexpected end of file in

如果你使用了標籤, 那在你的 php.ini 裏的這一項, 把 `off` 改成 `on` 1 short_open_tag = Off

see4917 2020-06-29 05:26:53

IP地址查詢網站的建立（基於qqwry數據庫建立）

一、需要的工具：QQWry最新版（ip地址數據庫） 二、數據庫的導入 1、下載qqwry後導出txt格式的數據庫，命名爲ip.txt 2、在mysql數據庫中建立名爲ipdb的數據庫 3、在ipdb數據庫中建立表ip，sql語句如下 CR

heavenopener 2020-06-28 23:16:58

PHP驗證碼生成腳本（5位數字png格式）

<?php header("Content-Type:image/png"); srand((double)microtime()*1000000); $img_height=20; $img_width=60; $im=@i

heavenopener 2020-06-28 23:16:58

php檢測函數集

 <? // 【文件名】: c_check.inc // 【作 用】: 通用檢測函數集 // 【作 者】: 天灰 // 【最後修改日期】： 2001/05/11[cxx] // 【變量定義規則】：‘C_'=字符型,‘I_'=整型,‘N_'

fangyuan303687320 2020-06-28 21:38:59

php上傳加水印

 PHP實例:實現給上傳圖片加水印圖案用PHP給上傳圖片加水印的程序是通過判斷文件類型建立圖形，然後把其複製到原建立的圖形上，填充並建立rectangle，以備寫入imagestring()或是原已經定好的圖像程序當中判斷水印類型：一是字

fangyuan303687320 2020-06-28 21:38:59

fastadmin後臺開發完整過程 2019.11.13

一、新建數據表 二、後臺插件命令行，進行普通模型及關聯模型操作 1）、分類模型，做以下設置，並立即執行 2）、關聯模型，做以下設置並立即執行 3)、生成菜單 4）提示以下錯誤 修改：將app\admin\model\Zhaosha

Robin罗兵 2020-06-28 17:05:52

fastadmin cms小程序前端權限控制設置問題

會員規則設置 會員分組默認組設置 控制器設置 addons/cms/controller/wxapp/user.php 小程序調試反饋提示無權限   以上步驟操作正確，但提示“沒有權限訪問”，後仔細閱讀代碼，以下是分析過程： 1、

Robin罗兵 2020-06-28 17:05:52

fastadmin後臺開發步驟

一、新建數據表 二、後臺命令行生成CURD 三、需求：文章有歸屬分類，我們在列出數據時需要同時列表文章分類名稱。（以官網的test表爲例，需要做以下操作） 控制器類添加 protected $relationSearch = true;

Robin罗兵 2020-06-28 17:05:52

小程序開發2019.11.16日誌

1、onLoad: function(options)：小程序頁面加載的時候，可以通過options獲取到上一個頁面標籤的屬性以及屬性值；參考：https://www.cnblogs.com/guaguaerhao/p/7856063.h

Robin罗兵 2020-06-28 17:05:52

fastadmin的cms小程序前端消息提醒流程機制分析

  這種消息提醒，有些是小程序裏面執行的，比如這個“個人資料修改”的profile.js   有些是後端程序發回的消息提醒，比如文章的消息評論addons\cms\controller\wxapp\Archives.php中的以下代碼

Robin罗兵 2020-06-28 17:05:52

採用PHP+MySQL，語言優勢及特點

採用PHP+MySQL，語言優勢及特點 時間：2013-05-31 11:52 瀏覽: 2136 次 PHP+MySQL，LAMP模式 　　採用PHP+MySQL進行開發，基於Web開發的最佳組合“LAMP模式”——（Linu

冷雨0412 2020-06-23 04:10:42

分表實戰一

現在單表超過一千萬記錄，雖然索引完全使用，依舊會出現慢查詢。日增平均40萬。 數據庫要重新設計，目的提高查詢速度，只查詢熱數據。 設計思路 根據熱數據時效性，保持在近三個月內，計劃一年生成6張表。 利用union來查詢，當前

何忧非喜{傲娇的程序媛} 2020-06-23 01:17:57