thinkphp 编辑器kindeditor

简介: 首先,去官网下载最新版的kindeditor,然后把里面asp,jsp,net,example的全删除,然后改名为editor放进public(最外层目录的public)文件夹里面      在目录lib目录建立ORG文件夹(个人习惯用ORG存储公用类),建立一个共用类,editor.

  首先,去官网下载最新版的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>

目录
相关文章
|
5月前
|
前端开发 JavaScript Java
杨老师教你学会使用富文本编辑器KindEditor之添加页面设计
杨老师教你学会使用富文本编辑器KindEditor之添加页面设计
67 0
|
Web App开发 Linux 前端开发
|
JavaScript 数据格式 Python
11. Django 引入富文本编辑器KindEditor
打开微信扫一扫,关注微信公众号【数据与算法联盟】 转载请注明出处:http://blog.csdn.net/gamer_gyt 博主微博:http://weibo.com/234654758 Github:https://github.com/thinkgamer 写在前边的话 一路走来,DJango也用了挺久了,自己也做了一些基于Django的小项目,具体可看github,但是Django默认的admin后台编辑文本框实在是太丑了,而且单一,其实在很久之前就想写这篇文章了,但是由于种种原因拖延到了现在,终于下定了决心来写,现在时间是00:17。
1567 0
在线编辑器KindEditor看样子不错
KindEditor 4.1 发布了 这个KindEditor 看样子挺火的。可以研究下。呵呵。   官网:http://www.kindsoft.net/index.php
894 0
|
6月前
|
存储 Linux 编译器
vim编辑器和gcc/g++编辑器的使用讲解
vim编辑器和gcc/g++编辑器的使用讲解
152 2
|
4月前
|
开发工具
vi编辑器,现在vi\vim是文本文件进行编辑的最佳选择,Vim是vi的加强的版本,兼容vi的所有指令,vim编辑器有三种工作模式,一开始进入的是命令模式,命令模式i是插入的意思,两下y+p复制内容
vi编辑器,现在vi\vim是文本文件进行编辑的最佳选择,Vim是vi的加强的版本,兼容vi的所有指令,vim编辑器有三种工作模式,一开始进入的是命令模式,命令模式i是插入的意思,两下y+p复制内容
|
5月前
|
开发工具
Vim 编辑器:高效文本编辑的瑞士军刀
**Vim 概览:** Vim 是一个功能丰富的文本编辑器,以其高度可定制性著称。文章介绍了 Vim 的高效使用技巧,包括快捷打开文件、命令行模式下的常用命令、查找与替换、删除和复制文本。还讨论了配置 `.vimrc` 文件以自定义设置,如改变 leader 键、设置缩进和高亮,并展示了安装插件如 vim-airline 和 vim-snazzy 的方法。通过这些技巧,用户能提升 Vim 使用效率。
67 5
|
5月前
|
Ubuntu 搜索推荐 Linux
Linux的Vim编辑器详解
Linux的Vim编辑器详解
|
4月前
|
Linux 开发工具 数据安全/隐私保护
【linux】如何优雅的使用vim编辑器
【linux】如何优雅的使用vim编辑器
下一篇
无影云桌面