thinkphp編輯器kindeditor
首先,去官網下載最新版的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
<?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>
相關文章
- js 操作kindeditor編輯器JS
- 在KindEditor中編輯可上傳MP4
- 採用Kindeditor編輯器時,提交、修改無法入庫的原因和解決辦法
- Laravel 5-KindEditor 一款值得推薦的最具情懷的 HTML 文字編輯器LaravelHTML
- 織夢kindeditor編輯器圖片上傳增加圖片alt屬性和title屬性的方法
- vim編輯器
- linux編輯器Linux
- HTML 編輯器HTML
- XML 編輯器XML
- Markdown編輯器
- 增強 Vim 編輯器,提高編輯效率
- 隨處可編輯的編輯器之神VIM
- CentOS vim編輯器CentOS
- 12 vi編輯器
- vi/vim編輯器
- Nano編輯器常用NaN
- LINUX VIM編輯器Linux
- Filament Markdown 編輯器
- sed awk 編輯器
- Markdown 編輯器寫文章
- markdown編輯器語法
- vue-markdown編輯器Vue
- Markdown編輯器說明
- SmartDown for mac(MarkDown編輯器)Mac
- 今天的python編輯器Python
- vim編輯器的使用
- lit ace markdown編輯器
- Linux 常見編輯器Linux
- vscode打造golang編輯器VSCodeGolang
- FSNotes for Mac(文字編輯器)Mac
- EditRocket (原始碼編輯器)原始碼
- WordMark for Mac MarkDown編輯器Mac
- Typora for Mac(文字編輯器)Mac
- clickhouse智慧提示編輯器
- HTML 編輯器簡介HTML
- Linux文字編輯器JedLinux
- 『學了就忘』vim編輯器基礎 — 94、vim編輯器介紹
- _001_IDEA_修改編輯器的編碼Idea
- Chrome外掛——Markdown編輯器Chrome