KindEditor编辑器的使用

KindEditor编辑器是一款不错的编辑器插件，在开发项目中可以直接拿来使用，本文则是现在身为小白的我在对KindEditor编辑器整合到项目中所写的真实性项目使用KindEditor的一次项目记录，当然，不喜勿喷，我只是在记录自己的学习之旅！

好了，现在开始进入正式的话题了，要想使用KindEditor编辑器，我们首先需要要去KindEditor编辑器的官网去下载KindEditor，下载网址为：http://kindeditor.net/down.php。

在下载的时候，我们可以根据KindEditor的相关提示，选择官方下载，或者选择最新源码下载，如下图：

下载之后，我们在本地进行解压，KindEditor编辑器的目录结构如下，我所使用的是kindeditor-4.1.7：

如图所示：

KindEditor编辑器支持asp，jsp,以及php,这里我只介绍我的PHP：

我们进入到php/demo.php中，可以了解到KindEditor编辑器所需要引入的js和css，这里我就不一一介绍了。

直接性的开始我项目中的具体使用方式：

1.我使用的框架是ThinkPHP3.2.3，使用KindEditor编辑器只在后台使用：

我后台的js和css样式目录在config.php中做了一个小小的配置，使用‘TMPL_PARSE_STRING’更改了默认的__PUBLIC__目录：

//自定义配置后台样式的存放目录
'TMPL_PARSE_STRING' => array(
'__PUBLIC__' => __ROOT__ . '/Public/admin',
),

2.前台的js和css引入：

因为后台多处需要使用kindEditor编辑器，所有我在Public目录下新建文件为style.html，使用引入文件，不需要多次复制那么多的css和js，只需要一行<include file = "Public/style" />即可，需要注意的是，Public文件和我们所显示的视图文件属于同级，那么我们在style.html中书写一次js和css的代码即可,代码如下：

<!--引入kindeditor文件开始--><link rel="stylesheet" href="__PUBLIC__/js/kindeditor-4.1.7/themes/default/default.css" />
<link rel="stylesheet" href="__PUBLIC__/js/kindeditor-4.1.7/plugins/code/prettify.css" />
<script charset="utf-8" src="__PUBLIC__/js/kindeditor-4.1.7/kindeditor.js"></script>
<script charset="utf-8" src="__PUBLIC__/js/kindeditor-4.1.7/lang/zh_CN.js"></script>
<script charset="utf-8" src="__PUBLIC__/js/kindeditor-4.1.7/plugins/code/prettify.js"></script>
<script>KindEditor.ready(function(K) {//name="content"需要和input设置的一致var editor1 = K.create('textarea[name="content"]', {cssPath : '__PUBLIC__/js/kindeditor-4.1.7/plugins/code/prettify.css',uploadJson : '__PUBLIC__/js/kindeditor-4.1.7/php/upload_json.php',fileManagerJson : '__PUBLIC__/js/kindeditor-4.1.7/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>
<!--引入kindeditor文件开始-->

前台页面input示例：

<textarea name="content" style="width:700px;height:200px;visibility:hidden;"></textarea>

引入之后，我们在页面前端只要name值和input设置的name值content一致，或者修改为自己想要设置的name值，只要两者一致，那么我们就可以使用KindEditor编辑器编辑文字和图片，上传图片了！

KindEditor编辑器的使用相关推荐

php网页添加图片的代码,天天查询-PHP版的kindeditor编辑器加图片上传水印功能
首先简单介绍一下kindeditor编辑器: KindEditor 是一套开源的在线HTML编辑器,开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本 ...
DWZ与KindEditor编辑器的整合
原文:DWZ与KindEditor编辑器的整合 DWZ自带的编辑器是xheditor,可能很多人用不习惯.就像我,习惯用kindeditor了.现在就来说说如何整合dwz和kindeditor. 一. ...
KindEditor编辑器在ASP.NET中的使用
KindEditor编辑器在ASP.NET中的使用最近做的项目中都有用到富文本编辑器,一直在寻找最后用的富文本编辑器,之前用过CKEditor,也用过UEditor,这次打算用一下KindEdit ...
kindeditor编辑器和图片上传独立分开的配置细节
关于kindeditor编辑器上传按钮的异步加载最关键的部署问题,它的上传图片的组件都已经封装得很好了的,只需要监听到页面按钮的点击事件给编辑器对象传递一些对应的初始化参数即可显示图片上传的弹窗实现异 ...
如何在一个页面添加多个不同的kindeditor编辑器
kindeditor官方下载地址:http://kindeditor.net/down.php (入门必看)kindeditor官方文档:http://kindeditor.net/doc.ph ...
KindEditor编辑器结合EasyUi
KindEditor编辑器 var editor;//初始化编辑器 editor = KindEditor.create('#descriptionKindEditorU', {//创建编辑器item ...
KindEditor编辑器上传图片超过限制
使用KindEditor编辑器上传较大图片时,会出现如下图所示的错误: 超过php.ini允许的大小这样的问题需要到php.ini文件中将upload_max_filesize = 2M的限制大小修改 ...
关于kindeditor编辑器批量上传图片不显示添加图片按钮的问题
今天在项目里发现kindeditor编辑器批量上传图片不显示添加文件按钮,去官网看demo是有的,经过浏览器debug发现是由于 multiimage.js文件的一个时间参数传递的不对, 很奇怪,改为 ...
如何在一个页面上使用多个KindEditor编辑器并将值传递到服务器端
如何在一个页面上使用多个KindEditor编辑器并将值传递到服务器端 1.声明一个editor数组: 2.将之前的编辑器显示行代码: 3.传递KindEditor所填写的相关数据: 今天使用Kind ...
php中如何使用KindEditor编辑器
前不久做了一个小网站,发布新闻的时候,同事推荐了一个好的富文本编辑器kindeditor,觉得用的挺方便,今天在这总结一下,简单的介绍一下kindeidtor使用,这里只将核心的一些配置说明列在下面, ...

KindEditor编辑器的使用

KindEditor编辑器的使用相关推荐

最新文章

热门文章