要修改默认后台程序处理文件,修改plugins(插件文件夹)下的JavaScript内容fileManagerJson改为自己使用程序语言
----------------------------------------------------------------------
jQuery方式创建编辑器
KindEditor.create('#nr'); //绑定指定ID。
HTML部分
<textarea id="nr" style="width:680px;height:280px;visibility:visible"></textarea>
----------------------------------------------------------------------------------
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:取消只读
----------------------------------------------------------------------
jQuery方式创建编辑器
KindEditor.create('#nr'); //绑定指定ID。
HTML部分
<textarea id="nr" style="width:680px;height:280px;visibility:visible"></textarea>
----------------------------------------------------------------------------------
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文件
<link rel="stylesheet" type="text/css" href="../Editor/themes/default/default.css" />
② 必须引用一下两个JavaScript文件
<script type="text/javascript" src="../Editor/kindeditor-min.js"></script>
<script type="text/javascript" src="../Editor/lang/zh_CN.js"></script>
③ 具体实现方法
<script type="text/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文件
<link rel="stylesheet" type="text/css" href="../Editor/themes/default/default.css" />
② 引用编辑器JavaScript文件
<script type="text/javascript" src="../Editor/kindeditor-min.js"></script>
③ 具体实现方法
<script type="text/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文件
<link rel="stylesheet" type="text/css" href="../Editor/themes/default/default.css" />
② 引用编辑器JavaScript文件
<script type="text/javascript" src="../Editor/kindeditor-min.js"></script>
③ 引用语言包文件,必须的
<script type="text/javascript" src="../Editor/lang/zh_CN.js"></script>
④ 具体实现方法
<script type="text/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>
【浏览服务器】选择已上传的文件
① 必须先引用编辑器的default.css文件
<link rel="stylesheet" type="text/css" href="../Editor/themes/default/default.css" />
② 必须引用一下两个JavaScript文件
<script type="text/javascript" src="../Editor/kindeditor-min.js"></script>
<script type="text/javascript" src="../Editor/lang/zh_CN.js"></script>
③ 具体实现方法
<script type="text/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文件
<link rel="stylesheet" type="text/css" href="../Editor/themes/default/default.css" />
② 引用编辑器JavaScript文件
<script type="text/javascript" src="../Editor/kindeditor-min.js"></script>
③ 具体实现方法
<script type="text/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文件
<link rel="stylesheet" type="text/css" href="../Editor/themes/default/default.css" />
② 引用编辑器JavaScript文件
<script type="text/javascript" src="../Editor/kindeditor-min.js"></script>
③ 引用语言包文件,必须的
<script type="text/javascript" src="../Editor/lang/zh_CN.js"></script>
④ 具体实现方法
<script type="text/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>
相关推荐
1. **主编辑器文件**:KindEditor的核心编辑器文件,如`kindeditor.js`,提供了基本的编辑功能,如字体、字号、颜色选择、段落格式化等。 2. **语言包**:为了支持多语言环境,KindEditor通常会提供不同语言的本地...
本文针对KindEditor 4.x 版本的常用方法进行了小结,帮助使用者更好地理解和使用该编辑器。 1. 修改默认后台程序处理文件 在使用KindEditor时,如果需要修改默认的后台程序处理上传的文件,需要操作的是plugins...
KindEditor4.x 官方帮助文档.官方最新的web编辑器. 官方没有下载的帮助文档。只有在线浏览的。本人下载出来做成了chm格式的。给大家下载。方便查阅!!!!!!
在4.x版本中,编辑器API的调用方式也发生了变化,现在通过`K.create`返回的`editor`对象来访问。这意味着,如需执行诸如获取或设置内容的操作,必须通过这个`editor`对象进行,具体方法请参考官方文档的“编辑器...
TinyMCE是一款非常优秀的编辑器,KindEditor 2.x和3.x参考了TinyMCE的UI和部分代码,并包含了TinyMCE风格。 4. FCKEditor http://www.fckeditor.net/ FCKEditor是老牌编辑器,KindEditor 2.x参考了FCKEditor的UI和...
3. 在 JavaScript 中,使用 KindEditor.ready 函数来实例化编辑器,並将其绑定到文本域上。 4. 最后,可以使用 KindEditor 提供的各种方法和事件来实现编辑器的功能,如上传图片、保存内容等。 KindEditor 的插件 ...
KindEditor 是一款功能强大、轻量级且易于集成的在线文本编辑器,广泛应用于网站内容管理、博客写作、论坛发帖等场景。该编辑器在3.1.1版本中提供了丰富的文字格式化选项,图片上传与管理,链接插入等功能,使得用户...
4. **height**:编辑器的高度,仅支持像素单位,优先级高于TEXTAREA的CSS高度。 5. **minWidth**与**minHeight**:分别设置编辑器的最小宽度和最小高度,单位均为像素。 6. **filterMode**:决定是否过滤HTML代码,...
kindeditor 4.x JSP Eclipse 项目 上传FLASH与图片 本项目是eclipse 3.4 java 1.6.31 Tomcat6.0.35 能通过linux测试。 这个是dome版本,仅供学习,请勿用在商业用途。 并通过测试。 如果有问题,请E-mail到 ...
KindEditor 4_x Documentation
综上所述,KindEditor 4.1.11是一个功能全面、兼容性好、易用且可定制的HTML可视化编辑器,适用于各种需要在线编辑内容的网站和应用。无论是个人博客、企业官网还是社区论坛,都可以考虑采用KindEditor来提升内容...
KindEditor是一款轻量级、可自定义的在线文本编辑器,通常用于网页应用。要将其集成到Winform应用中,我们需要借助.NET的WebBrowser控件,因为它可以内嵌HTML页面并执行JavaScript代码。 1. **环境准备**: - 首先...
在这个例子中,`KindEditor.ready` 是启动编辑器的函数,`K.create` 初始化了一个编辑器实例,配置了编辑器的宽度、高度、样式文件、上传及文件管理路径等参数。 总的来说,KindEditor 4.1.11 是一个强大且灵活的富...
3. **初始化编辑器**:使用JavaScript调用KindEditor的`create()`方法,指定编辑器容器和配置选项。 4. **事件监听**:通过API监听编辑器的各种事件,如`beforeInsertImage`、`contentChange`等,实现与服务器的交互...
在`KindEditor.ready`函数中初始化编辑器,指定要绑定的textarea元素,并根据需要配置编辑器选项。 3. **配置编辑器**:KindEditor有许多可配置的选项,例如: - `width`和`height`:设置编辑器的宽度和高度。 -...
【工控老马出品,必属精品,质量保证,亲测能用】 ...这是KindEditor的ASP版网站后台编辑器,通过测试使用的。 兼容现有的各种浏览器,UTF-8编码和GB2312编码均可使用的。 适合人群:新手及有一定经验的开发人员
集成KindEditor到项目中,开发者需要在HTML页面中指定编辑器的容器元素,然后通过JavaScript初始化编辑器实例,如` KindEditor.create('#editor') `。根据需要,可以使用API添加自定义事件、修改默认设置或添加...
KindEditor HTML在线编辑器是一款广泛应用于网页开发中的富文本编辑工具,它提供了丰富的文本格式化选项,使得非程序员也可以轻松地在网页上编辑内容。这款编辑器以其易用性、功能强大和高度可定制性而受到开发者的...
这个压缩包“kindeditor富文本编辑器以及使用文档说明.zip”包含了关于KindEditor的详细资料,包括安装、配置、使用方法以及可能遇到的问题解决方案。 首先,安装KindEditor非常简单。通常,开发者会将编辑器的...