国人富文本框编辑器kindeditor

1. 下载KindEditor最新版本。
下载地址：http://code.google.com/p/kindeditor/downloads/list

2. 解压zip文件，并把所有文件上传到您的网站程序目录下，例如：http://你的域名/editor/。

3. 要添加编辑器的页面头部添加以下代码。
id为TEXTAREA输入框的id，cssPath为编辑区域的CSS定义。


查看源代码打印?1.<script type="text/javascript" charset="utf-8" src="/editor/kindeditor.js"></script>
<script type="text/javascript">    
KE.show({ id : 'content_1', cssPath : './index.css' });
7.</script>

4. 要显示编辑器的位置添加TEXTAREA输入框。如果原来有TEXTAREA，属性里只加id,width,height即可。
<textarea id="content_1" name="content" style="width:700px;height:300px;visibility:hidden;"></textarea>

----------------------我是分割线---------------------------------------

调用KE.show 或KE.init 时可以设置以下属性。

id
textarea输入框的id，必选项

width
编辑器的宽度，3.2版本开始支持
height
编辑器的高度，3.2版本开始支持
wyswygMode
true或false，可视化模式或代码模式
默认值：true
autoOnsubmitMode
true或false，true时form的onsubmit事件里自动添加KE.util.setData函数，自动完成把编辑器内容设置到textarea。
默认值：true
skinType
风格类型，default或tinymce，目前暂时只支持这两种。
默认值：default
cssPath
指定编辑器iframe document的CSS，用于设置可视化区域的样式。
默认值：空
skinsPath
指定编辑器的skins目录，skins目录存放风格的css文件和gif图片。
默认值：KE.scriptPath + 'skins/'
pluginsPath
指定编辑器的plugins目录。
默认值：KE.scriptPath + 'plugins/'
minWidth
指定编辑器最小宽度，单位为像素。
默认值：200
minHeight
指定编辑器最小高度，单位为像素。
默认值：100
resizeMode
2或1或0，2时可以拖动改变宽度和高度，1时只能改变高度，0时不能拖动。
默认值：2
filterMode
true或false，true时过滤HTML代码，false时允许输入任何代码。
默认值：true
minChangeSize
undo/redo文字输入最小变化长度，当输入的文字变化小于这个长度时不会添加到undo堆栈里。
默认值：5
siteDomains
指定多个网站域名，该域名的URL都会变成相对路径。例如：siteDomains = ['yourdomain.com', 'www.yourdomain.com'];默认值：[]
htmlTags
指定要保留的HTML标记和属性。
注：filterMode为true时有效。
默认值：请参考源代码
items
指定工具栏。
默认值：请参考源代码
tagLineMode
true或false，true时虚线显示P,DIV等TAG，3.2版本开始支持。
默认值：false



--------------------我是分隔线--------------------------------


一、添加"你好"插件。  
1. 定义KE.lang['hello'] = "你好"。


查看源代码打印?1.KE.lang['hello'] = "您好";

2. 定义KE.plugin['hello']，所有逻辑都在这个对象里，点击图标时默认执行click方法。


查看源代码打印?1.KE.plugin['hello'] = {   
click : function(id) { alert("您好");   } };


3. 页面里添加图标定义CSS。


查看源代码打印?1..ke-icon-hello {      
background-image: url(./skins/default.gif);     
background-position: 0px -672px;    
width: 16px;     
height: 16px; }

4. 最后调用编辑器时items数组里添加hello。


查看源代码打印?1.KE.show({    
id : 'content1',    
cssPath : './index.css',   
items : ['hello'] });

演示地址：http://www.kindsoft.net/ke/examples/demo-17.html


二、添加一个插入远程图片的插件。
定义KE.lang['remote_image'] = "插入远程图片"。


定义KE.plugin['remote_image']。


plugins目录下创建一个remote_image.html页面，是点击remote_image图标后弹出来的窗口的页面。


页面里添加图标定义.ke-icon-remote_image CSS。

详细代码请参考 http://www.kindsoft.net/ke/examples/demo-18.html

评论

2 楼 zhouzilong 2012-07-09  

id : 'content1',    
cssPath : './index.css',   
items : ['hello'] });

1 楼 zhouzilong 2012-07-09  

id : 'content1',    
cssPath : './index.css',   
items : ['hello'] });