KindEditor在thinkphp上的使用方法

KindEditor是一套开源的HTML可视化编辑器，主要用于让用户在网站上获得所见即所得编辑效果，且兼容主流浏览器。与ueditor这样的大块头相比，KindEditor的优点是不言而喻的--它体积小，加载速度快，功能也十分丰富。我在 WBlog主要应用了KindEditor的在线编辑功能和文件上传功能。下面是KindEditor在thinkphp模板上的使用方法。

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

kindeditor在线编辑器的使用方法
在需要使用编辑器的模板上引入kindeditor-min.js、zh_CN.js文件及运行相应的代码

     
    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文件及运行相应的代码

     
    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>

完整的实例可以参考WBlog后台文章添加模板。

本文首发网志博客,欢迎转载！转载请注明本文地址,谢谢。

本文地址:http://www.w3note.com/web/48.html

来源：oschina

链接：https://my.oschina.net/u/257940/blog/90478

标签

ThinkPHP

kindeditor