下载文档原格式
kindeditor的使用方法asp例子<script>KindEditor.ready(function(K) {//全局配置var serverScriptPath='/editor/asp/';//服务端文件文件夹URL绝对路径,最后要有/var editorPluginsPath="/editor/plugins/";//编辑器的插件文件夹URL绝对路径,最后要有///全局配置结束var editor1 = K.create('textarea[name="editor_id"]', {//指定textarea //不要改动uploadJson : serverScriptPath+'upload_json.asp',fileManagerJson : serverScriptPath+'file_manager_json.asp',cssPath :editorPluginsPath+'code/prettify.css',emoticonsPath:editorPluginsPath+"/emoticons/images/",//不要改动结束allowFileManager : true});});</script>记得要引入二个JS文件，下载包里有，自己找一下。
<script charset="utf-8" src="../editor/kindeditor.js"></script><script charset="utf-8" src="../editor/lang/zh_CN.js"></script>需要在调用的地方放一个文本框，就可以显示出编辑器了。
Kindeditor 3.5 在ASP中的调用2010-09-26 12:26:51| 分类： | 标签：kindeditor ke编辑器id调用|字号订阅本文引用自岁月明灯《Kindeditor 3.5 在ASP中的调用》引用岁月明灯的Kindeditor 3.5 在ASP中的调用一直在找免费且功能足够强大的Html在线编辑器，ewebeditor不错，可惜要收钱！FCKeditor （后改为CKeditor）听说也不错，只是我琢磨了半天也没看出个头绪，在百度上搜了半天，终于找到这个Kindeditor，虽然没什么太多的技术说明，但好歹是咱中国人的产品，简单易用，而且最最最重要的是免费的！！！嘿嘿！下面介绍一下要在ASP中正常使用该编辑器所要做的工作。
第一步：下载kindeditor ，可以到/去下载最新的版本，目前是3.5版本;第二步：因为文件是压缩的，所以要先将其解压缩，解压后进入该目录，复制里面的全部文件；第三步：到自己的网站下，建立一个名为kindeditor目录，将刚才复制的文件全部粘贴进去；第四步：打开自己要调用该编辑器的文件，将以下代码拷贝到<head>里面（注意：红字部分用来说明，为不影响代码正常运行，最好看懂后删掉）：<script charset="utf-8" src="kindeditor/kindeditor.js"></script> /*SRC后面的路径按自己的实际路径修改*/<script>KE.show({id : 'jshhnews_content', /*这里的ID很重要，要对应第二个点中的ID*/cssPath : './index.css',afterCreate : function(id) {KE.event.ctrl(document, 13, function() {KE.util.setData(id);document.forms['form1'].submit(); /*注意form1为body体中的表单名称，根据自己的实际情况进行修改*/});KE.event.ctrl(KE.g[id].iframeDoc, 13, function() {KE.util.setData(id);document.forms['form1'].submit(); /*注意form1为body体中的表单名称，根据自己的实际情况进行修改*/});}});</script>第四步：在<body>体中需要调用的地方加入以下代码：<textarea id="jshhnews_content" name="news_content"style="width:700px;height:300px;visibility:hidden;"></textarea>语句说明：1、id一定要对应前面head中的id，否则你永远也看不到编辑器；2、name是这个文本的名称，在需要读取文本内容时可以用news_content=request.form("news_content")来读取文本内容；3、style里面的内容会英文的都知道，就是定义这个编辑器的长和宽。
详细介绍如何使用kindEditor 编辑器今天群里的朋友问我能不能写个kindEditor 编辑器的使用教程，说是弄了半天没有搞定。
由于PHP 啦后台正好用了这个编辑器，我有写经验，正好教他的同时写出来分享给大家kindEditor 编辑器是一个由JS 写成的在线编辑器，很多网站或CMS 等都有用它，口碑不错，目前最新版本是4.1.10。
其实它的用法非常简单，我是在下载了它的安装包后看了一些demo 然后就把它放到PHP 啦的后台上去了。
好了教程正式开始一、下载下载最新版本的kindEditor （官方网站 ），下载后打开examples/index.html 就可以看到一排例子。
二、部署将解压后的文件包kindeditor-4.1.10里的asp jsp php 这几个带有服务端脚本的文件夹删除，然后上传到你网站的相应目录中，在这里我假设放到了plugin 目录。
三、嵌入在需要加入编辑器的页面的HTML 中倒入1 <link rel="stylesheet" href="/plugin/kindeditor-4.1.10/themes/default/default.css" /> 2 <script charset="utf-8" src="/plugin/kindeditor-4.1.10/kindeditor-min.js"></script>3 <script charset="utf-8" src="/plugin/kindeditor-4.1.10/lang/zh_CN.js"></script> 然后添加一个输入框1 <textarea id="editor_id" name="content"></textarea>最后在加入一段JS1 KindEditor.ready(function(K) {2 window.editor = K.create('#editor_id',{3 cssPath:'/public/plugin/editor/plugins/code/prettif y.css',4 uploadJson:'/upload/image.php',5 resizeType :1,6 allowPreviewEmoticons : true,7 allowImageUpload : true,8 });9 });好了。
kindeditor用法详解
kindeditor是一个基于JavaScript的富文本编辑器，它具有简单易用、功能强大、兼容性好等特点。
下面是对kindeditor用法的一些详细解释。
一、引入kindeditor
在使用kindeditor之前，需要先引入kindeditor的库文件。
可以通过下载kindeditor的压缩包，或者通过CDN引入kindeditor。
例如，通过CDN引入kindeditor的代码如下：
二、创建kindeditor编辑器
在HTML中创建一个textarea元素，并为其指定一个id或class，然后通过JavaScript代码将其转换为kindeditor编辑器。
例如，将id为"editor"的textarea元素转换为kindeditor编辑器的代码如下：
三、使用kindeditor编辑器
使用kindeditor编辑器非常简单，可以通过调用editor对象的方法来执行各种操作。
以下是一些常用的方法：
1.获取编辑器内容：
2.设置编辑器内容：
3.插入图片：
4.插入链接：
5.获取焦点：
6.执行其他操作：
kindeditor还提供了许多其他方法，例如删除选中内容、查找和替换文本、设置样式等。
可以参考kindeditor的官方文档或示例代码来了解更多用法。
FCKeditor使用方法详解目录一、FCKeditor简介 (2)1.1 FCKeditor是什么 (2)1.2 FCKeditor的特点 (3)二、安装与配置FCKeditor (5)三、基本功能使用方法 (6)3.1 文本格式化 (7)3.2 段落和列表操作 (9)3.3 图片和表格插入 (10)3.4 表单字段 (11)3.5 样式和脚本 (12)四、高级功能使用方法 (13)4.1 可视编辑器 (14)4.2 自动排版 (16)4.3 批量导入/导出 (17)4.4 国际化支持 (18)4.5 客户端存储 (20)五、自定义插件与扩展 (21)5.1 如何安装插件 (22)5.2 插件的使用方法 (24)5.3 开发自定义插件 (25)六、常见问题与解决方案 (27)6.1 常见问题列表 (28)6.2 问题解决步骤 (29)七、实例演示 (30)7.1 创建一个简单的HTML页面 (31)7.2 在页面中添加FCKeditor (32)7.3 配置和使用FCKeditor的各种功能 (34)八、FCKeditor在主流开发框架中的应用 (35)8.1 PHP+MySQL环境下的应用 (36)8.2 环境下的应用 (37)8.3 Java/Spring环境下的应用 (39)九、总结与展望 (39)9.1 FCKeditor的优点 (40)9.2 FCKeditor的局限性与未来发展趋势 (41)一、FCKeditor简介FCKeditor是一款由德国Maxthon公司开发的强大的网页文本编辑器，它具有丰富的功能、高度的可定制性和易用性，被广泛应用于各种Web应用中，如论坛、博客、新闻发布等。
FCKeditor不仅提供了基本的文本编辑功能，还支持图像、表格、超链接等元素的插入和编辑，以及自定义插件和宏，可以满足用户的各种编辑需求。
FCKeditor采用了基于JavaScript的富文本编辑技术，具有高效的性能和较小的体积，可以轻松地集成到各种Web应用中。
KindEditor3.5.2最新ASP/PHP版分享及使用方法最近做web网站在找编辑器的时候在选择编辑器，分别测试了fckeditor和kindeditor这两款，下面做一个简单的说明：[1].fckeditor编辑器对于从word复制过来的格式会乱掉，另外考虑其自身的安全问题，就没用它了[2].kindeditor则是js+html的编辑器，当然另外如果你加入图片上传功能就要提供php或asp的脚本[3].比较遗憾的是kindeditor只能传图片，其他附件无法上传，不过如果加入这个功能也不难，可以参考image上传来编写因此本次的重点就是讲解kindeditor的使用，刚好这次同时使用了asp和php编写，因此两个都会分享。
<!--more-->1.ASP版KindEditor3.5.2使用方法及常见问题使用的时候可以参考原版里面的asp/demo.asp来操作，这里要重点说明是关于调用编辑器代码：[javascript]<script type="text/javascript" charset="utf-8" src="../keditor/kindeditor.js"></script> <script type="text/javascript">KE.show({id : 'content',// 这个是相对于/plugins/image目录而言，一般保持默认即可imageUploadJson : '../../asp/upload_json.asp',fileManagerJson : '../../asp/file_manager_json.asp',// 同上allowFileManager : true,afterCreate : function(id) {KE.event.ctrl(document, 13, function() {KE.util.setData(id);document.forms['editForm'].submit();});KE.event.ctrl(KE.g[id].iframeDoc, 13, function() {KE.util.setData(id);document.forms['editForm'].submit();});}});</script>[/javascript]在asp要调用编辑器比较常见问题是图片上传问题，我说下我这个编辑器的配置目录问题(1).编辑器在根目录，而我调用编辑器是后台文章编辑，如下方式：|--keditor # 放在根目录防止爆后台路径|--admin/newedit.asp|--upload #上传目录放在根目录防止暴露后台地址(2).在asp的2个上传文件keditor\asp\file_manager_json.asp # 图片浏览在该文件中，涉及到上传目录的设置问题，代码如下：[vb]rootPath = "/upload/"rootUrl = "../upload/"[/vb]keditor\asp\upload_json.asp # 图片上传在该文件中，涉及到上传目录的设置问题，代码如下：[vb]'文件保存目录路径savePath = "/upload/"'文件保存目录URLsaveUrl = "../upload/"[/vb](3)同时在编辑器中加入插入代码的功能，具体不详说，查看附件代码这样子设置完目录的结构就不会出现"服务器出现故障"的提示，出现这个提示一般可能有以下几种情况：(1).上传目录设置问题(2).从官方下载的版本默认是utf-8格式，如果用到gbk中可能会出现这个错误提示(3).程序本身出错（没有修改程序是不会这个问题！）<a href='/wp-content/uploads/2011/03/keditor.zip'>点我下载:keditor 3.5.2 for asp Modify by 冷锋</a>2.PHP版KindEditor3.5.2使用方法及常见问题PHP版的和ASP原理差不多就是在目录设置有点不一样，注意下就可以了，就不多说，只说下目录结构：|--keditor # 更目录|--keditor/attached # 上传目录|--system/newedit.php # 调用编辑器页面目录在后台目录设置常见keditor/php目录下两个php文件，建议不要调整目录结构。
kindEditor的简介及一些问题处理一、简介：KindEditor是一套开源的HTML可视化编辑器，主要用于让用户在网站上获得所见即所得编辑效果，兼容IE、Firefox、Chrome、Safari、Opera 等主流浏览器。
KindEditor使用JavaScript编写，可以无缝的于Java、.NET、PHP、ASP等程序接合。
KindEditor非常适合在CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用，2006年7月首次发布 2.0以来，KindEditor依靠出色的用户体验和领先的技术不断扩大编辑器市场占有率，目前在国内已经成为最受欢迎的编辑器之一。
二、资产监督管理系统中的应用：2.1 在资产监督管理系统中的具体界面：在资产监督管理系统中，信息发布中具体信息的信息内容就使用了kindEditor来实现，具体界面如下图：界面中主要应用了字体，文字颜色，字体背景，字体大小等通用的字体编辑方法和排版格式，还应用了发送表情的方法。
2.2具体的实现方法：资产质量监督管理系统前台界面主要是通过jsp实现，信息发布也不例外。
调用时需要将lang，themes，plugins三个文件夹都拷贝在jsp文件的目录下。
具体的方法调用如下，其中，items后的内容为具体的编辑功能引用，items之前的为kindEditor 的调用及一些属性的设置。
相关jsp界面中对js的调用有以下两条：kindeditor-min.js主要是kindEditor调用的具体方法。
其中：_version可以看到当前kindEditor的版本信息；k.opitons中包含了该kindEditor所有的默认配置及属性。
Items中为所提供的所有编辑功能。
langType 为各功能的语言显示类型，minWidth，minHeight为编辑器的大小配置，fullScreenMode为是否全屏显示，colorTable中可添加具体字体颜色，fontSizeTable中可添加所需要的字体大小，htmlTags下可进行tags 的各个属性的配置更改。
jsp如何调用kindeditor编辑器1、下载kindeditor，/down.php，我的版本：kindeditor-4.1.102、将下载好的kindeditor-4.1.10.zip解压后放到WebRoot或WebContent下.3、新建一个jsp：kindEditorDemo.jsp，引入js文件<script charset="UTF-8" type="text/javascript" src="<%=request.getContextPath() %>/kindeditor/kindeditor.js"></script><script charset="UTF-8" type="text/javascript" src="<%=request.getContextPath() %>/kindeditor/lang/zh_CN.js"></script><script charset="UTF-8" type="text/javascript" src="<%=request.getContextPath() %>/kindeditor/plugins/code/prettify.js"></script>4、创建编辑器代码：<script type="text/javascript">KindEditor.ready(function(K) {var editor1 = K.create('textarea[name="content_1"]', {width : '100%',allowFileManager : true});prettyPrint();});</script>5、body里面创建一个textarea文本域，命名为content_1<body><%=htmlData%><form name="myform"method="post"action="kindEditorDemo.jsp"> <textarea id="content_1"name="content_1" style="width:700px;height:300px;visibility:hidden;"></textarea> <input type="submit"class="button_01"value="保存"> </form></body>6、演示地址：http://localhost:8080/Jquery/kindEditorDemo.jsp7、演示效果图：8、开发工具截图：。
∙ 1.下载KindEditor最新版本。
打开下载页面。
∙ 2.把kindeditor放在你的网站目录下，随意目录，只要路径设置对就可以！∙ 3.要显示编辑器的位置添加TEXTAREA输入框。
如果已经有TEXTAREA，属性里添加ID即可。
∙代码∙<textarea id="content_1"name="content"style="width:700px;h eight:300px;"></textarea>∙ 4.在相应页面上添加kindeditor的引用，添加如下代码：∙∙代码∙<script type="text/javascript" charset="utf-8" src="/editor/ kindeditor.js"></script><script type="text/javascript">KE.show({id : 'content_1' //TEXTAREA输入框的ID });</script>∙∙src=..... 这里根据你的kindeditor放置位置而变化。
∙怎么获取textarea的文本内容？1.在<textarea id="content_1" name="content" style="width:700px;height: 300px;"></textarea>后面添加隐藏input和button，代码如下：∙代码∙<input id="content_1_1" type="hidden" runat="server" value=""/> <asp:Button ID="Button1" runat="server" Text="保存"OnClientClick="save();" OnClick="Button1_Click" CssClass="i_1" />∙添加事件处理代码1.首先是客户端代码，在服务器代码之前执行，代码如下：∙∙代码∙function save(){var s = KE.util.getData("content_1");s = KE.util.escape(s);document.getElementById("content_1_1").value = s;}∙∙已经在服务器控件中取到了，保存的时候保持content_1_1的value就可以了。
Kindeditor的使用方法
注：本使用法是针对jsp+stcuts2.0的用法
1.从kindeditor官网/下载kindeditor编辑器。
2.解压kindeditor压缩包，然后把解压的文件夹放到相应项目的WebRoot下。
3..找到kindeditor目录下的plugins/image/image.html页面，修改如下代
码，默认为php，修改为你的jsp上传处理页面为：var imageUploadJson = (typeof KE.g[id].imageUploadJson == 'undefined') ?
'../../jsp/upload_json.jsp' : KE.g[id].imageUploadJson;。
4.修改upload_json.jsp页面里的代码为：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@page
import="org.apache.struts2.dispatcher.multipart.MultiPartRequestWr apper"%>
<%@page import="java.util.concurrent.locks.*"%><%@page
import="java.io.*"%>
<%@ page import="org.json.simple.*"%>
<%
//Struts2 请求包装过滤器
MultiPartRequestWrapper
wrapper=(MultiPartRequestWrapper)request;
//获得上传的文件名
String fileName = wrapper.getFileNames("imgFile")[0];
//获得未见过滤器
File file = wrapper.getFiles("imgFile")[0];
//----------重新构建上传文件名---------
final Lock lock = new ReentrantLock();String newName = null;lock.lock();
try{
//加锁为防止文件名重复
newName = System.currentTimeMillis()
+fileName.substring(stIndexOf("."),
fileName.length());}finally{lock.unlock();}
//------锁结束---------//获取文件输出流
FileOutputStream fos = new
FileOutputStream(request.getSession().getServletContext().getRealP ath("/")+"ke_upload/" + newName);//设置 KE 中的图片文件地址String newFileName = request.getScheme() + "://"+
request.getServerName() + ":" + request.getServerPort()+
request.getContextPath() + "/ke_upload/" + newName;byte[] buffer = new byte[1024];//获取内存中当前文件输入流
InputStream in = new FileInputStream(file);try{int num =
0;while((num = in.read(buffer)) >
0){fos.write(buffer,0,num);}}catch(Exception
e){e.printStackTrace(System.err);}finally{in.close();fos.close();}//发送给 KE
JSONObject obj = new JSONObject();
obj.put("error", 0);
obj.put("url", newFileName);
out.println(obj.toJSONString());
%>
5.进入kindeditor\jsp\lib目录下，把commons-fileupload-1.2.1.jar、commons-io-
1.3.
2.jar、json_simple-1.1.jar这三个jar包放到相应项目的WEB-INF 文件夹下的lib
文件夹里面：
6.进入kindeditor\jsp的demo.jsp页面。
就可以参考该页面来把kindeditor编辑器导
入到你的页面中
注：如果你的项目有前台和后台最好把
Js代码中的 imageUploadJson : '../../jsp/upload_json.jsp',
改成：imageUploadJson : '/项目名/前台或后台文件名
/kindeditor/jsp/upload_json.jsp',
7.根据upload_json.jsp页面中上传图片的保存路径在WebRoot目录下建立
ke_upload文件夹
8.就‘可以了。
