基於thinkphp的在線編輯器kindeditor-v4.1.3

時間 2019-11-20

標籤基於 thinkphp 在線編輯器 kindeditor v4.1.3 欄目 PHP 简体版

原文原文鏈接

首先，去官網下載最新版的kindeditor，而後把裏面asp，jsp，net，example的全刪除，而後更名爲editor放進public（最外層目錄的public）文件夾裏面。php

在目錄lib目錄創建ORG文件夾（我的習慣用ORG存儲公用類），創建一個共用類，editor.class.phpcss

下面是這個類的具體代碼 html

<?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;
   }
 }

}

代碼註釋都寫的比較清楚了，json

而後在action創建個文件，是IndexAction.class.phpjsp

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 //獲取編輯器的內容post

<!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>