摘要:最近在自己学习搭建网站的时候,突然要搭建网站的时候发现了一个好东西,那就是kindeditor这个文本编辑器,这个编辑器简单好用,而且很小,并且是开源的。
文本编辑器介绍
KindEditor 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。 KindEditor 使用 JavaScript 编写,可以无缝地与 Java、.NET、PHP、ASP 等程序集成,比较适合在 CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用。
kindeditor的主要特点
- 快速:体积小,加载速度快
- 开源:开放源代码,高水平,高品质
- 底层:内置自定义 DOM 类库,精确操作 DOM
- 扩展:基于插件的设计,所有功能都是插件,可根据需求增减功能
- 风格:修改编辑器风格非常容易,只需修改一个 CSS 文件
- 兼容:支持大部分主流浏览器,比如 IE、Firefox、Safari、Chrome、Opera
发展历程
- 2006年07月:KindEditor 2.0 发布
- 2009年01月:KindEditor 3.0 发布
- 2010年06月:KindEditor 3.5 发布
- 2011年08月:KindEditor 4.0 发布
文本编辑器的下载
点击下载就可以使用了,下载位置看你喽,我是直接下载到了桌面,后面使用方便。
文本编辑器的使用
将下载成功的编辑器直接放在项目的static文件夹中,然后在你需要的模板中使用就好,我这里是backend.html,然后再我们需要的textarea中设置就可以实现编辑,找到textarea的id(每一个标签的id都是唯一的),然后给这个东西添加脚本。
textarea文本框
<textarea id="editor_id" name="content" style="width:700px;height:300px;"> <strong>HTML内容</strong> </textarea>
编辑器脚本
<script charset="utf-8" src="/editor/kindeditor.js"></script> <script charset="utf-8" src="/editor/lang/zh-CN.js"></script> <script> KindEditor.ready(function(K) { window.editor = K.create('#editor_id'); }); </script>
Note
- 第一个参数可用其它CSS选择器,匹配多个textarea时只在第一个元素上加载编辑器。
- 通过K.create函数的第二个参数,可以对编辑器进行配置,具体参数请参考 编辑器初始化参数 。
在初始化参数里面有许多可以支持自定义,你可以根据你的需求进行更改
编辑器文本上传
我因为要上传图片,文件所有就用到了自定义的extraFileUploadParams这个东西,上传图片、Flash、视音频、文件时,支持添加别的参数一并传到服务器。
添加
KindEditor.ready(function(K) {
K.create('#id', {
extraFileUploadParams : {
item_id : 1000,
category_id : 1
}
});
});
后面我们不想让这个框可以被拖动,就得设置这个resize Type这个参数
扫描二维码关注公众号,回复:
6614513 查看本文章
resize Type
2或1或0,2时可以拖动改变宽度和高度,1时只能改变高度,0时不能拖动。
- 数据类型: Int
- 默认值: 2
剩下的大家有兴趣可以去研究,比如说这是主题风格等。