KindEditor在thinkphp上的使用方法

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 

转载于:https://my.oschina.net/wblog/blog/90478