专注于WEB技术的IT博客

KindEditor在thinkphp上的使用方法

时间:2012-11-19分类: Thinkphp浏览:9230
分享到:

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


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

     

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

<script charset="UTF-8" src="/Public/kindeditor/kindeditor-min.js"></script> 
<script charset="UTF-8" src="/Public/kindeditor/lang/zh_CN.js"></script> 
<script> 
  
    var editor; 
    KindEditor.ready(function(K) { 
    editor = K.create('textarea[name="content"]', { 
                    allowFileManager : true 
                }); 
                  
            }); 
</script> 
      
<tr> 
     <td width="50" align="center">内容:</td> 
     <td align="left"> 
      <textarea name="content" id="content"  style="width:800px;height:250px;visibility:hidden;" class="required"></textarea> 
     </td>  
 </tr>

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

     

<link rel="stylesheet" href="/Public/kindeditor/themes/default/default.css" />     
 <script charset="UTF-8" src="/Public/kindeditor/kindeditor-min.js"></script> 
<script charset="UTF-8" src="/Public/kindeditor/lang/zh_CN.js"></script> 
<script> 
            KindEditor.ready(function(K) { 
                var editor = K.editor({ 
                    allowFileManager : true 
                }); 
                K('#image').click(function() { 
                    editor.loadPlugin('image', function() { 
                        editor.plugin.imageDialog({ 
                            imageUrl : K('#thumb').val(), 
                            clickFn : function(url, title, width, height, border, align) { 
                                K('#thumb').val(url); 
                                editor.hideDialog(); 
                            } 
                        }); 
                    }); 
                }); 
            }); 
</script> 
                
 <tr> 
            <td width="50" align="center">缩略图:</td> 
            <td align="left"> 
           <input type="text" name="thumb" id="thumb" value="" size="50"/>  &nbsp;<input type="button" id="image" value="上传图片" /> 
            </td>  
 </tr>

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

     


      

猜你喜欢
ThinkPHP自定义模板标签详解
wblog3.1.3_2升级说明
ThinkPHP普通分组下Widget的使用
如何让ThinkPHP的模板引擎达到最佳效率
WBlog博客前台独立栏目页的实现方法
WB3.1.2_2版本使用说明
封装ThinkPHP的一个文件上传方法
ThinkPHP3.1.2整合UCenter详解(四)
ThinkPHP3.1.2整合UCenter详解(三)
ThinkPHP3.1.2整合UCenter详解(二)
除非注明,本文首发网志博客,欢迎转载!转载请注明本文地址:http://w3note.com/web/48.html,谢谢。
  • 评论
  • 赞助本站