kindSoft 网页编辑器简单的配置

2014-03-24 20:45:29

1. 下载编辑器

下载 KindEditor 最新版本，下载之后打开 examples/index.html 就可以看到演示。

下载页面: http://www.kindsoft.net/down.php

2. 部署编辑器

解压 kindeditor-x.x.x.zip 文件，将所有文件上传到您的网站程序目录里，例如：http://您的域名/editor/

Note

您可以根据需求删除以下目录后上传到服务器。

  • asp - ASP程序
  • asp.net - ASP.NET程序
  • php - PHP程序
  • jsp - JSP程序
  • examples - 演示文件

3. 修改HTML页面

  1. 在需要显示编辑器的位置添加textarea输入框。
  1. <textarea id="editor_id" name="content" style="width:700px;height:300px;"> 
  2. &lt;strong&gt;HTML内容&lt;/strong&gt; 
  3. </textarea> 

 

Note

  • id在当前页面必须是唯一的值。
  • 在textarea里设置HTML内容即可实现编辑，在这里需要注意的是，如果从服务器端程序(ASP、PHP、ASP.NET等)直接显示内容，则必须转换HTML特殊字符(>,<,&,”)。具体请参考各语言目录下面的demo.xxx程序，目前支持ASP、ASP.NET、PHP、JSP。
  • 在有些浏览器上不设宽度和高度可能显示有问题，所以最好设一下宽度和高度。宽度和高度可用inline样式设置，也可用 编辑器初始化参数 设置。
  1. 在该HTML页面添加以下脚本。

<script>
        KindEditor.ready(function(K) {
                window.editor = K.create('#editor_id');
        });
</script>

Note

  • 第一个参数可用其它CSS选择器，匹配多个textarea时只在第一个元素上加载编辑器。
  • 通过K.create函数的第二个参数，可以对编辑器进行配置，具体参数请参考 编辑器初始化参数 。
var options = {
        cssPath : '/css/index.css',
        filterMode : true
};
var editor = K.create('textarea[name="content"]', options);

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内容');

Note

  • KindEditor的可视化操作在新创建的iframe上执行，代码模式下的textarea框也是新创建的，所以最后提交前需要执行 sync() 将HTML数据设置到原来的textarea。
  • KindEditor在默认情况下自动寻找textarea所属的form元素，找到form后onsubmit事件里添加sync函数，所以用form方式提交数据，不需要手动执行sync()函数。
  • KindEditor默认采用白名单过滤方式，可用 htmlTags 参数定义要保留的标签和属性。当然也可以用 filterMode 参数关闭过滤模式，保留所有标签。
// 关闭过滤模式，保留所有标签
KindEditor.options.filterMode = false;

KindEditor.ready(function(K)) {
        K.create('#editor_id');
}

kindSoft在线网页编辑器

  • 但是如果要进行图片、flash或者视频的上传的话，你就会很郁闷了，很多时候都会因为上传路径不对而出错，因此你需要设置你的图片、flash或者视频文件的路径；只需将上面一段代码改为如下部分则可以满足基本的需求了：
  1. <script language=< span="">"javascript" type="text/javascript"> </script language=<>
  2. KindEditor.ready(function (K) { 
  3. K.create('#editor_id', { 
  4. uploadJson: '../Content/kindeditor-4.1.4/asp.net/upload_json.ashx', 
  5. fileManagerJson: '../Content/kindeditor-4.1.4/asp.net/file_manager_json.ashx', 
  6. allowFileManager: true 
  7. }); 
  8. }); 

上面标记颜色的部分应该根据自己的文件路径选择合适的路径；

最后就是有关编辑器中的控件并不是自己所需要的，所以你需要在如下的路径进行配置：

展开kindeditor-4.1.4，找到kindeditor.js文件，双击就去，然后找到在246页左右，就有一个Items，在之后又如下的配置参数：

  1. [ 
  2. 'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 
  3. 'code', 'cut', 'copy', 'paste', 
  4. 'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 
  5. 'justifyright', 
  6. 'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 
  7. 'outdent', 'subscript', 
  8. 'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 
  9. 'fullscreen', '/', 
  10. 'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 
  11. 'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', 
  12. '|', 'image', 'multiimage', 
  13. 'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak', 
  14. 'anchor', 'link', 'unlink', '|', 'about' 
  15. ]   
参数的解释如下：
source HTML代码
preview 预览
undo 后退
redo 前进
cut 剪切
copy 复制
paste 粘贴
plainpaste 粘贴为无格式文本
wordpaste 从Word粘贴
selectall 全选
justifyleft 左对齐
justifycenter 居中
justifyright 右对齐
justifyfull 两端对齐
insertorderedlist 编号
insertunorderedlist 项目符号
indent 增加缩进
outdent 减少缩进
subscript 下标
superscript 上标
formatblock 段落
fontname 字体
fontsize 文字大小
forecolor 文字颜色
hilitecolor 文字背景
bold 粗体
italic 斜体
underline 下划线
strikethrough 删除线
removeformat 删除格式
image 图片
flash Flash
media 视音频
table 表格
hr 插入横线
emoticons 插入表情
link 超级链接
unlink 取消超级链接
fullscreen 全屏显示
about 关于
print 打印
code 插入程序代码
map Google地图
baidumap 百度地图
lineheight 行距
clearhtml 清理HTML代码
pagebreak 插入分页符
quickformat 一键排版
insertfile 插入文件
template 插入模板
anchor 插入锚点
 

为您推荐