基于thinkphp的在线编辑器kindeditor-v4.1.3
首先,去官网下载最新版的kindeditor,然后把里面asp,jsp,net,example的全删除,然后改名为editor放进public(最外层目录的public)文件夹里面。
在目录lib目录建立ORG文件夹(个人习惯用ORG存储公用类),建立一个共用类,editor.class.php
下面是这个类的具体代码
<?php /*编辑器调用的初始化类 * */ class editor { var $Width; var $Height; var $Value; /* 此方法是编辑器的构造方法 *第一个参数,$Height是高度,不填默认是500px *第二个参数,$Width是宽度,不填默认是700px *第三个参数,$Value是编辑器默认内容,不填默认是“<h2>欢迎使用编辑器</h2><br>” * */ function editor($Height="500px",$Width="700px",$Value="<h2>欢迎使用编辑器</h2><br>") { $this->Value = $Value; $this->Height = $Height; $this->Width = $Width; } /*此方法是在线编辑器的调用 * 在需要编辑器的地方调用此函数 */ function createEditor(){ return "<textarea name='content1' style='width:$this->Width;height:$this->Height;visibility:hidden;'>$this->Value</textarea>"; } /*使用在线编辑器必须在html<head></head>之间调用此方法,才能正确调用, * 内容主要都是script */ function usejs(){ $str=<<<eot <link rel="stylesheet" href="__PUBLIC__/editor/themes/default/default.css" /> <link rel="stylesheet" href="__PUBLIC__/editor/plugins/code/prettify.css" /> <script charset="utf-8" src="__PUBLIC__/editor/kindeditor.js"></script> <script charset="utf-8" src="__PUBLIC__/editor/lang/zh_CN.js"></script> <script charset="utf-8" src="__PUBLIC__/editor/plugins/code/prettify.js"></script> <script> KindEditor.ready(function(K) { var editor1 = K.create('textarea[name="content1"]', { cssPath : '__PUBLIC__/editor/plugins/code/prettify.css', uploadJson : '__PUBLIC__/editor/php/upload_json.php', fileManagerJson : '__PUBLIC__/editor/php/file_manager_json.php', allowFileManager : true, afterCreate : function() { var self = this; K.ctrl(document, 13, function() { self.sync(); K('form[name=example]')[0].submit(); }); K.ctrl(self.edit.doc, 13, function() { self.sync(); K('form[name=example]')[0].submit(); }); } }); prettyPrint(); }); </script> eot; return $str; } /*取得在线编辑器的值并返回 */ function getEditorContent(){ $htmlData = ''; if (!empty($_POST['content1'])) { if (get_magic_quotes_gpc()) { $htmlData = stripslashes($_POST['content1']); } else { $htmlData = $_POST['content1']; } return $htmlData; } } }
代码注释都写的比较清楚了,
然后在action建立个文件,是IndexAction.class.php
class IndexAction extends Action { public function _initialize() { header("Content-Type:text/html; charset=utf-8"); } public function index(){ import("@.ORG.editor"); //导入类 $editor=new editor(); //创建一个对象 $a=$editor->createEditor(); //返回编辑器 $b=$editor->usejs(); //js代码 $this->assign('usejs',$b); //输出到html $this->assign('editor',$a); $this->display(); } public function php(){ import("@.ORG.editor"); $editor=new editor(); $a=$editor->getEditorContent(); //获取编辑器的内容 $this->assign('a',$a); $this->display(); // $this->success('数据添加成功!'); } }
然后在tpl建立index文件夹,在里面建立2个html文件,
index.html //使用编辑器
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> {$usejs} </head> <body> <form name="example" method="post" action="__URL__/php"> <?php //<textarea name="content1" style="width:700px;height:200px;visibility:hidden;"></textarea> ?> {$editor} <br /> <input type="submit" name="button" value="提交内容" /> (提交快捷键: Ctrl + Enter) </form> </body> </html>
php.html //获取编辑器的内容
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <body> {$a} </body> </html>
代码仅供参考!有问题可以留贴!