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

thinkphp 编辑器kindeditor的更多相关文章

  1. 富文本编辑器kindeditor配置

    <!--富文本编辑器kindeditor配置↓ --> <link type="text/css" rel="stylesheet" href ...

  2. easyUI整合富文本编辑器KindEditor详细教程(附源码)

    原因 在今年4月份的时候写过一篇关于easyui整合UEditor的文章Spring+SpringMVC+MyBatis+easyUI整合优化篇(六)easyUI与富文本编辑器UEditor整合,从那 ...

  3. 后台文本编辑器KindEditor介绍

    后台文本编辑器KindEditor介绍 我们在自己的个人主页添加文章内容的时候,需要对文章内容进行修饰,此时就需要文本编辑器助阵了! 功能预览 KindEditor文本编辑器 KindEditor文本 ...

  4. python 全栈开发,Day83(博客系统子评论,后台管理,富文本编辑器kindeditor,bs4模块)

    一.子评论 必须点击回复,才是子评论!否则是根评论点击回复之后,定位到输入框,同时加入@评论者的用户名 定位输入框 focus focus:获取对象焦点触发事件 先做样式.点击回复之后,定位到输入框, ...

  5. 使用富文本编辑器Kindeditor

    今天在做需求的时候,遇到有一个字段,需要保存带有格式的内容,决定使用富文本框编辑器Kindeditor来实现,解决方法如下: 登录官网下载控件包: http://kindeditor.net/down ...

  6. 富文本编辑器 KindEditor 的基本使用 文件上传 图片上传

    富文本编辑器 KindEditor 富文本编辑器,Rich Text Editor , 简称 RTE , 它提供类似于 Microsoft Word 的编辑功能. 常用的富文本编辑器: KindEdi ...

  7. Thinkphp编辑器扩展类kindeditor用法

    一, 使用前的准备. 使用前请确认你已经建立好了一个Thinkphp站点项目. 1,Keditor.class.php和JSON.class.php 是编辑器扩展类文件,将他们拷贝到你的站点项目的Th ...

  8. 纯JS文本在线HTML编辑器KindEditor

    KindEditor(http://www.kindsoft.net)是一款比较专业,主流,好用的在线HTML编辑器. 它除了可以将文本进行编辑.将Word中的内容复制进来外,本身还可以拖动缩放(右下 ...

  9. HTML编辑器KindEditor

    KindEditor 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本 ...

随机推荐

  1. 【可持久化数组】【rope】bzoj3673 bzoj3674 可持久化并查集 by zky

    rope教程:http://blog.csdn.net/iamzky/article/details/38348653 Code(bzoj3673): #include<cstdio> # ...

  2. strust2的核心和工作原理

    在学习strust2之前,我们要明白使用struts2的目的是什么?它能给我们带来什么样的好处? 设计目标 Strust设计的第一目标就是使MVC模式应用于web程序设计. 技术优势 Struts2有 ...

  3. 计算gcd Exercise07_14

    import java.util.Scanner; /** * @author 冰樱梦 * 时间:2018年下半年 * 题目:计算gcd * */ public class Exercise07_14 ...

  4. POJ 2139 Six Degrees of Cowvin Bacon (弗洛伊德最短路)

    题意:奶牛拍电影,如果2个奶牛在同一场电影里演出,她们的合作度是1,如果ab合作,bc合作,ac的合作度为2,问哪一头牛到其他牛的合作度平均值最小再乘100 思路:floyd模板题 #include& ...

  5. 十二. 网络与数据库编程1.IP地址和InetAddress类

    Java语言的优势之一是Java程序能访问网络资源.Java提供一系列的类支持Java程序访问网络资源. TCP/IP协议和IP地址 为了进行网络通信,通信双方必须遵守通信协议.目前最广泛使用的是TC ...

  6. jQuery中的Ajax全局事件

    Ajax全局事件 全局事件会在有ajax请求的情况下触发. 方法名称 说明 ajaxStart(callback) Ajax请求开始时执行的函数 ajaxStop(callback) Ajax请求结束 ...

  7. tcpreplay工具使用

    参考:http://www.cnblogs.com/jiayy/p/3447047.html   速率控制算法的大体思路就是,通过适当的sleep,增加包发送的时间,从而减小算出来的速率,以达到用户设 ...

  8. 【docker】解决docker pull镜像 拉取镜像龟速的问题,docker拉取镜像使用阿里云docker镜像加速器

    在docker拉取mysql镜像过程中,出现龟速的问题,解决这个问题的方法: 这个页面 停留了好久好久,依旧没有下载完成. 碰上这种情况 1.先退出Ctrl+C 2.在浏览器上进入阿里云docker库 ...

  9. jquery避免跟其他库冲突

    方法一: var $j=JQuery.noConflict(); $j('#msg').hide();//此处$j就代表JQuery 方法二: JQuery.noConflict(); JQuery( ...

  10. dotnet若干说明图片