基于thinkphp的在线编辑器kindeditor-v4.1.3
首先,去官网下载最新版的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
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-v4.1.3的更多相关文章
- 基于ThinkPHP的在线编辑器调用
开源的在线编辑器有很多,比如FCKEditor,UEditor,Kindeditor等,调用方式也都大同小异 下面列举UEditor在线编辑器插件在ThinkPHP里面的应用 1.Ueditor下载地 ...
- thinkphp——通过在线编辑器添加的内容在模板里正确显示(只显示内容,而不是html代码)
thinkphp编辑器回显问题如下: 解决办法如下: 对于编辑器发布的内容,前台模板显示为html的解决办法是: 在模板输出字段加入html_entity_decode()函数 也就是:PHP输出时的 ...
- 在线编辑器KindEditor的使用
1.官网下载:点击进入 2.解压后目录说明 ├── asp asp示例 ├── asp.net asp.net示例 ├── attached 空文件夹,放置关联文件attached ├── examp ...
- 在线编辑器kindEditor
操作文档:http://kindeditor.net/doc.php 文件下载
- jquery插件课程2 放大镜、多文件上传和在线编辑器插件如何使用
jquery插件课程2 放大镜.多文件上传和在线编辑器插件如何使用 一.总结 一句话总结:插件使用真的还是比较简单的,引包,初始化,配置参数(json),配置数据(json),而后两步不是必须的.而且 ...
- 在线编辑器的使用-KindEditor
第一种:KindEditor编辑器 步骤一:加载相应的核心的文件 下载地址:http://kindeditor.net/demo.php <link rel="stylesheet&q ...
- 将kindeditor在线编辑器制作成smarty插件
在web开发中,在线编辑器是经常要用到的功能模块,虽说配置在线编辑器没有多大难度,但是每一次编写重复的代码,总是让人感觉不爽. 本篇,就来讲解一下,如何将kindeditor制作成smarty的一个自 ...
- 20个最强的基于浏览器的在线代码编辑器 - OPEN资讯
20个最强的基于浏览器的在线代码编辑器 - OPEN资讯 20个最强的基于浏览器的在线代码编辑器
- jsp解决kindeditor在线编辑器struts图片上传问题
1.下载 官网下载ckeditor,解压后去掉不需要的部分,仅需保留plugin,lang,theme文件夹,这三个文件夹中用不到的东西可以删除, 比如lang文件下存放所有语言文件js,仅仅 保留e ...
随机推荐
- 【java基础】Java反射机制
一.预先需要掌握的知识(java虚拟机) 1)java虚拟机的方法区: java虚拟机有一个运行时数据区,这个数据区又被分为方法区,堆区和栈区,我们这里需要了解的主要是方法区.方法区的主要作用是存 ...
- Spring Boot加载配置文件
问题1:Spring如何加载配置,配置文件位置? 1.默认位置: Spring Boot默认的配置文件名称为application.properties,SpringApplication将从以下位置 ...
- 站在.NET的角度学安卓的草民笔记1
Java -> .NET 安卓 -> winform/WPF 类继承Activity -> 类继承 For ...
- 创建一个已经存在数据的MySQL复制
1.配置master库必须开启二进制日志和分配唯一的server id·如果没设置server-id或将其设置为0,master节点会拒绝slave的连接·建议在master节点设置innodb_fl ...
- Kafka不只是个消息系统
作者丨 Jay Kreps Confluent 联合创始人兼 CEO Jay Kreps 发表了一篇博文,给出了 Kafka 的真正定位——它不只是个消息系统,它还是个存储系统,而它的终极目标是要让流 ...
- springboot 中文文档
springboot 中文文档https://qbgbook.gitbooks.io/spring-boot-reference-guide-zh/content/
- Java常考面试题(三)
序言 说说今天遇到的一件小事吧,在遇到问题,查找答案时,看到很多人的博客里面都有提到关键字眼,可让人觉得可恨的是,大多数人写的博文中,基本上都是照着书上的语言发表的,看了跟没看一样,没有一点通俗的语言 ...
- 【Unity】4.3 地形编辑器
分类:Unity.C#.VS2015 创建日期:2016-04-10 一.简介 Unity拥有功能完善的地形编辑器,支持以笔刷绘制的方式实时雕刻出山脉.峡谷.平原.高地等地形.Unity地形编辑器同时 ...
- android源码上面开发App
使用eclipse 打开源码:http://blog.csdn.net/androidlover1991/article/details/17011991 使用android studio 打开源码h ...
- 菜鸟学SSH(三)——Struts2国际化自动检测浏览器语言版
前几天发了一篇Struts国际化的博客——<菜鸟学习SSH(二)——Struts2国际化手动切换版>,有网友提了一个意见,见下图: 于是就有了下面修改的版本: web.xml <?x ...