本次分享给大家带来一个可视化编辑器(我以前用的版本是3.x的,现在更新到了4.X请朋友们用于4.x以上的,才可参考我的帮助文档)
KindEditor 是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果
开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。
KindEditor 使用 JavaScript 编写,可以无缝地与 Java、.NET、PHP、ASP 等程序集成,
比较适合在 CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用。-这不是我的介绍,是官方的
在众多可视化编辑器中,包括ckeditor与Fckeditor,我还是比较支持这个国产软件kindeditor
本网站的编辑器即是用kindeditor下载地址
版本不高不低4.0.5 (2012-01-15)
我发表过ckeditor与Fckeditor的帮助文档。包括本人的使用都感觉这个编辑器完全不适合人类使用。
繁重的加载。功能的缺陷。Debug的出现。兼容性的问题
入正题,无图无真相
用过其他编辑器的人都知道上面那些图标代表的每一个功能!
1. 下载编辑器
下载 KindEditor 最新版本,下载之后打开 examples/index.html 就可以看到演示。
2. 部署编辑器
解压 kindeditor-x.x.x.zip 文件,将所有文件上传到您的网站程序目录里,例如:http://您的域名/editor/
文件介绍
您可以根据需求删除以下目录后上传到服务器。
asp - ASP程序
asp.net - ASP.NET程序
php - PHP程序
jsp - JSP程序
examples - 演示文件
3. 修改HTML页
- 在需要显示编辑器的位置添加textarea输入框。
<textarea id="editor_id" name="content" style="width:700px;height:300px;">HTML内容</textarea>
- id在当前页面必须是唯一的值。
- 在textarea里设置HTML内容即可实现编辑
- 在该HTML页面添加以下脚本。
<script charset="utf-8" src="/editor/kindeditor.js"></script>
<script charset="utf-8" src="/editor/lang/zh_CN.js"></script>
var editor1;
KindEditor.ready(function (K) {
editor1 = K.create(#editor_id, {
cssPath: /editor/kindeditor/plugins/code/prettify.css,
uploadJson: /editor/kindeditor/asp.net/upload_json.ashx,
fileManagerJson: /editor/kindeditor/asp.net/file_manager_json.ashx,
allowFileManager: true
});
prettyPrint();
});
4. 获取HTML数据
// 取得HTML内容
html = editor.html();
// 同步数据后可以直接取得textarea的value
editor.sync();
html = document.getElementById(editor_id).value; // 原生API
html = K(#editor_id).val(); // KindEditor Node API
html = $(#editor_id).val(); // jQuery
// 设置HTML内容
editor.html(HTML内容);