KindEditor在thinkphp上的使用方法

時間 2019-11-06

原文原文鏈接

KindEditor是一套開源的HTML可視化編輯器，主要用於讓用戶在網站上得到所見即所得編輯效果，且兼容主流瀏覽器。與ueditor這樣的大塊頭相比，KindEditor的優勢是不言而喻的--它體積小，加載速度快，功能也十分豐富。我在 WBlog主要應用了KindEditor的在線編輯功能和文件上傳功能。下面是KindEditor在thinkphp模板上的使用方法。

kindeditor版本：kindeditor-4.1.1
kindeditor的位置：根目錄\Public\kindeditor php

kindeditor在線編輯器的使用方法
在須要使用編輯器的模板上引入kindeditor-min.js、zh_CN.js文件及運行相應的代碼 css

     
       01  
           <scriptcharset="UTF-8"src="/Public/kindeditor/kindeditor-min.js"></script>   
     
       02  
       <scriptcharset="UTF-8"src="/Public/kindeditor/lang/zh_CN.js"></script>   
     
       03  
       <script>   
     
       04  
             
       05  
           var editor;   
     
       06  
           KindEditor.ready(function(K) {   
     
       07  
           editor = K.create('textarea[name="content"]', {   
     
       08  
                           allowFileManager : true   
     
       09  
                       });   
     
       10  
                             
       11  
                   });   
     
       12  
       </script>   
     
       13  
                 
       14  
       <tr>   
     
       15  
            <tdwidth="50"align="center">內容：</td>   
     
       16  
            <tdalign="left">   
     
       17  
             <textareaname="content"id="content" style="width:800px;height:250px;visibility:hidden;"class="required"></textarea>   
     
       18  
            </td>    
     
       19  
        </tr>

kindeditor獨立文件上傳功的使用方法
在須要使用編輯器的模板上引入default.css、kindeditor-min.js和zh_CN.js文件及運行相應的代碼 html

     
       01  
           <linkrel="stylesheet"href="/Public/kindeditor/themes/default/default.css"/>       
     
       02  
        <scriptcharset="UTF-8"src="/Public/kindeditor/kindeditor-min.js"></script>   
     
       03  
       <scriptcharset="UTF-8"src="/Public/kindeditor/lang/zh_CN.js"></script>   
     
       04  
       <script>   
     
       05  
                   KindEditor.ready(function(K) {   
     
       06  
                       var editor = K.editor({   
     
       07  
                           allowFileManager : true   
     
       08  
                       });   
     
       09  
                       K('#image').click(function() {   
     
       10  
                           editor.loadPlugin('image', function() {   
     
       11  
                               editor.plugin.imageDialog({   
     
       12  
                                   imageUrl : K('#thumb').val(),   
     
       13  
                                   clickFn : function(url, title, width, height, border, align) {   
     
       14  
                                       K('#thumb').val(url);   
     
       15  
                                       editor.hideDialog();   
     
       16  
                                   }   
     
       17  
                               });   
     
       18  
                           });   
     
       19  
                       });   
     
       20  
                   });   
     
       21  
       </script>   
     
       22  
                           
       23  
        <tr>   
     
       24  
                   <tdwidth="50"align="center">縮略圖：</td>   
     
       25  
                   <tdalign="left">   
     
       26  
                  <inputtype="text"name="thumb"id="thumb"value=""size="50"/>  &nbsp;<inputtype="button"id="image"value="上傳圖片"/>   
     
       27  
                   </td>    
     
       28  
        </tr>