KindEditor 4.x 在线编辑器常用方法小结

　　jQuery方式创建编辑器

　　KindEditor.create('#nr'); //绑定指定ID。

　　HTML部门

　　----------------------------------------------------------------------------------

　　allowFileManager 【是否允许浏览服务器已上传文件】

　　默认值是：false

　　------------------------------------------------------

　　allowImageUpload 【是否允许上传本地图片】

　　默认值是：true

　　----------------------------------------------

　　allowFlashUpload 【是否允许上传Flash】

　　默认值是：true

　　----------------------------------------------

　　allowMediaUpload 【是否允许上传多媒体文件】

　　默认值是：true

　　------------------------------------------------

　　pasteType 【设置粘贴类型】

　　0:禁止粘贴, 1:纯文本粘贴, 2:HTML粘贴（默认）

　　---------------------------------------------------

　　resizeType 【设置可否改变编辑器大小】

　　0:不能改变 1:只能改变高度 2:宽度和高度都可以改变（默认）

　　----------------------------------------------------------

　　themeType 【主题风格】

　　可设置"default"、"simple"，指定simple时需要引入simple.css

　　-------------------------------------------------------------

　　designMode 【可视化模式或代码模式】

　　数据类型：Boolean

　　默认值是：true(可视化)

　　------------------------------------------

　　afterCreate:function(){} 【编辑器创建后】

　　afterCreate:function(){

　　//alert('创建完成');

　　}

　　------------------------------------------

　　fontSizeTable 【制定文字大小】

　　数据类型：Array

　　默认值：['9px', '10px', '12px', '14px', '16px', '18px', '24px', '32px']

　　-----------------------------------------------------------------------

　　colorTable 【指定取色器里的颜色值】

　　数据类型：Array

　　[

　　['#E53333', '#E56600', '#FF9900', '#64451D', '#DFC5A4', '#FFE500'],

　　['#009900', '#006600', '#99BB00', '#B8D100', '#60D978', '#00D5FF'],

　　['#337FE5', '#003399', '#4C33E5', '#9933E5', '#CC33E5', '#EE33EE'],

　　['#FFFFFF', '#CCCCCC', '#999999', '#666666', '#333333', '#000000']

　　]

　　上面是默认值

　　----------------------------------------------------------------------------------

　　【Ctrl+Enter提交】

　　afterCreate:function(){

　　var self=this;

　　KindEditor.ctrl(self.edit.doc, 13, function() {

　　self.sync();

　　//执行其他事件

　　});

　　}

　　━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

　　var editor=KindEditor.create('#nr');

　　【编辑器获取焦点】

　　editor.focus();

　　【取得编辑器HTML内容】

　　var html=editor.html();

　　【取得编辑器纯文本内容】

　　var text=editor.text();

　　【移除编辑器】

　　editor.remove();

　　【设置编辑器HTML】

　　editor.html('<strong>编辑器内容</strong>');

　　【设置编辑器纯文本内容，直接显示HTML代码】

　　editor.text('<strong>编辑器内容</strong>');

　　【判断编辑器内容是否为空】

　　if(editor.isEmpty()){

　　alert('请输入内容');

　　return false;

　　}

　　【将指定的HTML内容插入到编辑器区域里的光标处】

　　editor.insertHtml('<strong>插入内容</strong>');

　　【将指定的HTML内容添加到编辑器区域的最后位置。】

　　editor.appendHtml('<strong>追加内容</strong>');

　　【编辑器切换全屏模式】

　　editor.fullscreen();

　　【设置编辑器的只读状态】

　　editor.readonly(false); //true:只读，false:取消只读

　　==================================================================================

　　【浏览服务器】选择已上传的文件

　　① 必须先引用编辑器的default.css文件

　　② 必须引用一下两个JavaScript文件

　　③ 具体实现方法

复制代码代码如下:

　　$(function(){

　　var editor = KindEditor.editor();

　　$('#filemanager').click(function() {

　　editor.loadPlugin('filemanager', function() { //加载插件

　　editor.plugin.filemanagerDialog({

　　viewType : 'VIEW', //显示方式，有两种分别是VIEW（缩略图）和LIST（详细信息）

　　dirName : 'image',

　　//选择查看的指定文件夹下的文件【包括子目录下的文件】，默认只能是image,flash,media,file四种，如需添加自定义文件夹，可修改例如：asp/file_manager_json.asp文件第40行。

　　clickFn : function(url, title) { //选择玩文件后执行下面的代码

　　$('#url').val(url);

　　editor.hideDialog(); //隐藏浏览服务器对话框

　　}

　　});

　　</script>

　　【上传本地文件到服务器】

　　① 引用CSS文件

　　② 引用编辑器JavaScript文件

　　③ 具体实现方法

复制代码代码如下:

　　$(function(){

　　var uploadbutton = KindEditor.uploadbutton({

　　button : KindEditor('#upload'), //注意此处，不能使用jQuery的$

　　fieldName : 'imgFile', //不要修改

　　url : '../Editor/asp/upload_json.asp?dir=file',

　　//上传处理程序页面，dir参数有四种:flash,media,file,其他（图片），上传后缀限制可修改程序页面代码，如：upload_json.asp

　　afterUpload : function(data) {

　　if (data.error === 0) {

　　var url = KindEditor.formatUrl(data.url, 'absolute');

　　$('#url').val(url);

　　} else {

　　alert(data.message);

　　}

　　afterError : function(str) {

　　alert('上传发送错误！');

　　//如果需要显示错误信息，可设置如alert('发生错误：'+str);，如不需显示可将上面str删除

　　}

　　});

　　uploadbutton.fileBox.change(function(e) {

　　uploadbutton.submit();

　　});

　　</script>

　　【上传图片】包括选择服务器已上传的图片

　　① 引用CSS文件

　　② 引用编辑器JavaScript文件

　　③ 引用语言包文件，必须的

　　④ 具体实现方法

复制代码代码如下:

　　$(function(){

　　var editor = KindEditor.editor({

　　allowFileManager : true //允许选择已上传的图片

　　});

　　$('#image').click(function() {

　　editor.loadPlugin('image', function() {

　　editor.plugin.imageDialog({

　　imageUrl : $('#url').val(),

　　clickFn : function(url, title, width, height, border, align) {

　　$('#url').val(url); //可使用其他参数。

　　editor.hideDialog();

　　}

　　});

　　</script>

　　http://www.cnblogs.com/edielei/archive/2011/11/12/2246450.html

教程首页更多教程