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>
thinkphp 编辑器kindeditor的更多相关文章
- 富文本编辑器kindeditor配置
<!--富文本编辑器kindeditor配置↓ --> <link type="text/css" rel="stylesheet" href ...
- easyUI整合富文本编辑器KindEditor详细教程(附源码)
原因 在今年4月份的时候写过一篇关于easyui整合UEditor的文章Spring+SpringMVC+MyBatis+easyUI整合优化篇(六)easyUI与富文本编辑器UEditor整合,从那 ...
- 后台文本编辑器KindEditor介绍
后台文本编辑器KindEditor介绍 我们在自己的个人主页添加文章内容的时候,需要对文章内容进行修饰,此时就需要文本编辑器助阵了! 功能预览 KindEditor文本编辑器 KindEditor文本 ...
- python 全栈开发,Day83(博客系统子评论,后台管理,富文本编辑器kindeditor,bs4模块)
一.子评论 必须点击回复,才是子评论!否则是根评论点击回复之后,定位到输入框,同时加入@评论者的用户名 定位输入框 focus focus:获取对象焦点触发事件 先做样式.点击回复之后,定位到输入框, ...
- 使用富文本编辑器Kindeditor
今天在做需求的时候,遇到有一个字段,需要保存带有格式的内容,决定使用富文本框编辑器Kindeditor来实现,解决方法如下: 登录官网下载控件包: http://kindeditor.net/down ...
- 富文本编辑器 KindEditor 的基本使用 文件上传 图片上传
富文本编辑器 KindEditor 富文本编辑器,Rich Text Editor , 简称 RTE , 它提供类似于 Microsoft Word 的编辑功能. 常用的富文本编辑器: KindEdi ...
- Thinkphp编辑器扩展类kindeditor用法
一, 使用前的准备. 使用前请确认你已经建立好了一个Thinkphp站点项目. 1,Keditor.class.php和JSON.class.php 是编辑器扩展类文件,将他们拷贝到你的站点项目的Th ...
- 纯JS文本在线HTML编辑器KindEditor
KindEditor(http://www.kindsoft.net)是一款比较专业,主流,好用的在线HTML编辑器. 它除了可以将文本进行编辑.将Word中的内容复制进来外,本身还可以拖动缩放(右下 ...
- HTML编辑器KindEditor
KindEditor 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本 ...
随机推荐
- CodeForces - 1004E Sonya and Ice Cream
题面在这里! 挺智障的一个二分...我还写了好久QWQ,退役算啦 题解见注释... /* 先对每个点记录 向子树外的最长路 和 向子树内最长路,然后二分. 二分的时候枚举链的LCA直接做就好啦. */ ...
- BZOJ 2527 [Poi2011]Meteors(整体二分)
[题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=2527 [题目大意] 有N个成员国.现在它发现了一颗新的星球, 这颗星球的轨道被分为M份 ...
- [转]Spring 中的p标签
spring的bean配置文件中p:代表什么 <bean id="daoTemplate" abstract="true" lazy-init=" ...
- svn安装和配置
安装svn 参考http://blog.csdn.net/dl425134845/article/details/41978541 系统版本 uname -a # 查看内核/操作系统/CPU信息 he ...
- 【Tomcat】Tomcat闪退的问题解决/Tomcat修改端口号无效
一. Tomcat闪退的问题解决 1.首先 确定JDK的环境变量配置正确 2.下载纯净的新的Tomcat 3.在bin\startup.bat文件中的第一行前面加入: SET JAVA_HOME = ...
- js:输入字数限制
Demo <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
- Jenkins环境初步配置
为研究在kubernetes上的CICD,先在物理环境下安装个JenKins热热身. 安装Jenkins 在官网https://jenkins.io/下载war包,我的是http://mirrors. ...
- 《Go语言实战》笔记之协程同步 sync.WaitGroup
原文地址(欢迎互换友链): http://www.niu12.com/article/8 sync 包提供同步 goroutine 的功能 <p>文档介绍</p><cod ...
- Cookie个数压缩存存储实践
提到cookie,大家都不会陌生的,几乎涉及到交互或统计的WEB系统都会使用到cookie,关于cookie的基础知识网上也有很多,这里推荐两篇文章: 聂微东的: http://www.cnblogs ...
- python命令行添加自动补全和命令历史功能
# python startup file import readline import rlcompleter import atexit import os # tab completion re ...