`
aina5626
  • 浏览: 55427 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

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

    博客分类:
  • WEB
阅读更多
要修改默认后台程序处理文件,修改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:取消只读
==================================================================================
【浏览服务器】选择已上传的文件
① 必须先引用编辑器的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>
分享到:
评论

相关推荐

    kindeditor4.x for asp.net完整配置

    1. **主编辑器文件**:KindEditor的核心编辑器文件,如`kindeditor.js`,提供了基本的编辑功能,如字体、字号、颜色选择、段落格式化等。 2. **语言包**:为了支持多语言环境,KindEditor通常会提供不同语言的本地...

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

    本文针对KindEditor 4.x 版本的常用方法进行了小结,帮助使用者更好地理解和使用该编辑器。 1. 修改默认后台程序处理文件 在使用KindEditor时,如果需要修改默认的后台程序处理上传的文件,需要操作的是plugins...

    KindEditor4.x 官方帮助文档

    KindEditor4.x 官方帮助文档.官方最新的web编辑器. 官方没有下载的帮助文档。只有在线浏览的。本人下载出来做成了chm格式的。给大家下载。方便查阅!!!!!!

    kindeditor从3.x升级到4.x版本

    在4.x版本中,编辑器API的调用方式也发生了变化,现在通过`K.create`返回的`editor`对象来访问。这意味着,如需执行诸如获取或设置内容的操作,必须通过这个`editor`对象进行,具体方法请参考官方文档的“编辑器...

    kindeditor

    TinyMCE是一款非常优秀的编辑器,KindEditor 2.x和3.x参考了TinyMCE的UI和部分代码,并包含了TinyMCE风格。 4. FCKEditor http://www.fckeditor.net/ FCKEditor是老牌编辑器,KindEditor 2.x参考了FCKEditor的UI和...

    Java web富文本编辑器(kindeditor).docx

    3. 在 JavaScript 中,使用 KindEditor.ready 函数来实例化编辑器,並将其绑定到文本域上。 4. 最后,可以使用 KindEditor 提供的各种方法和事件来实现编辑器的功能,如上传图片、保存内容等。 KindEditor 的插件 ...

    kindeditor-3.1.1.zip 在线编辑器

    KindEditor 是一款功能强大、轻量级且易于集成的在线文本编辑器,广泛应用于网站内容管理、博客写作、论坛发帖等场景。该编辑器在3.1.1版本中提供了丰富的文字格式化选项,图片上传与管理,链接插入等功能,使得用户...

    Kindeditor使用.pdf

    4. **height**:编辑器的高度,仅支持像素单位,优先级高于TEXTAREA的CSS高度。 5. **minWidth**与**minHeight**:分别设置编辑器的最小宽度和最小高度,单位均为像素。 6. **filterMode**:决定是否过滤HTML代码,...

    kindeditor 4.x JSP Eclipse 项目 上传FLASH与图片

    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_x Documentation

    kindeditor4.1.11.zip

    综上所述,KindEditor 4.1.11是一个功能全面、兼容性好、易用且可定制的HTML可视化编辑器,适用于各种需要在线编辑内容的网站和应用。无论是个人博客、企业官网还是社区论坛,都可以考虑采用KindEditor来提升内容...

    Winform Html Editor 使用kindeditor组件实现winform Html 编辑器

    KindEditor是一款轻量级、可自定义的在线文本编辑器,通常用于网页应用。要将其集成到Winform应用中,我们需要借助.NET的WebBrowser控件,因为它可以内嵌HTML页面并执行JavaScript代码。 1. **环境准备**: - 首先...

    2021.8.22 GitHub 上的 kindeditor 4.1.11.rar

    在这个例子中,`KindEditor.ready` 是启动编辑器的函数,`K.create` 初始化了一个编辑器实例,配置了编辑器的宽度、高度、样式文件、上传及文件管理路径等参数。 总的来说,KindEditor 4.1.11 是一个强大且灵活的富...

    富文本编辑器kindeditor

    3. **初始化编辑器**:使用JavaScript调用KindEditor的`create()`方法,指定编辑器容器和配置选项。 4. **事件监听**:通过API监听编辑器的各种事件,如`beforeInsertImage`、`contentChange`等,实现与服务器的交互...

    JAVA中使用kindeditor实现在线编辑文档

    在`KindEditor.ready`函数中初始化编辑器,指定要绑定的textarea元素,并根据需要配置编辑器选项。 3. **配置编辑器**:KindEditor有许多可配置的选项,例如: - `width`和`height`:设置编辑器的宽度和高度。 -...

    KindEditor ASP 版网站后台编辑器源码

    【工控老马出品,必属精品,质量保证,亲测能用】 ...这是KindEditor的ASP版网站后台编辑器,通过测试使用的。 兼容现有的各种浏览器,UTF-8编码和GB2312编码均可使用的。 适合人群:新手及有一定经验的开发人员

    kindeditor-4.1.10.rar

    集成KindEditor到项目中,开发者需要在HTML页面中指定编辑器的容器元素,然后通过JavaScript初始化编辑器实例,如` KindEditor.create('#editor') `。根据需要,可以使用API添加自定义事件、修改默认设置或添加...

    KindEditor Html在线编辑器

    KindEditor HTML在线编辑器是一款广泛应用于网页开发中的富文本编辑工具,它提供了丰富的文本格式化选项,使得非程序员也可以轻松地在网页上编辑内容。这款编辑器以其易用性、功能强大和高度可定制性而受到开发者的...

    kindeditor富文本编辑器以及使用文档说明.zip

    这个压缩包“kindeditor富文本编辑器以及使用文档说明.zip”包含了关于KindEditor的详细资料,包括安装、配置、使用方法以及可能遇到的问题解决方案。 首先,安装KindEditor非常简单。通常,开发者会将编辑器的...

Global site tag (gtag.js) - Google Analytics