Kindeditor在ASP中的调用

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"%><%@pageimport="org.apache.struts2.dispatcher.multipart.MultiPartRequestWr apper"%><%@page import="java.util.concurrent.locks.*"%><%@pageimport="java.io.*"%><%@ page import="org.json.simple.*"%><%//Struts2 请求包装过滤器MultiPartRequestWrapperwrapper=(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 = newFileOutputStream(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(Exceptione){e.printStackTrace(System.err);}finally{in.close();fos.close();}//发送给 KEJSONObject 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 编辑器今天群里的朋友问我能不能写个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 });好了。

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.搜索百度编辑器，下载gbk版2.解压编辑器，放到admin目录下3.修改调用编辑器的文件（admin/_content目录下使用编辑器的位置，常用的有：_content/_Content/AspCms_ContentAdd.asp_content/_Content/AspCms_ContentEdit.asp_content/_About/AspCms_AboutEdit.asp_content/_Sort/AspCms_SortEdit.asp_content/_Sort/AspCms_Sortadd.asp）4.依次引用ueditor.all.min.js ueditor.config.js euditor/themes/default/css/ueditor.css<script src="../../ueditor/ueditor.all.min.js" type="text/javascript"></script><script src="../../ueditor/ueditor.config.js" type="text/javascript"></script><link rel="stylesheet" type="text/css" href="../../ueditor/themes/default/css/ueditor.css" />5.替换调用编辑器的代码<%Dim oFCKeditor:Set oFCKeditor = New FCKeditor:oFCKeditor.BasePath="../../editor/":oFCKeditor.ToolbarSet="AdminMode":oFCKedit or.Width="615":oFCKeditor.Height="300":oFCKeditor.Value=decodeHtml(Content):oFCKeditor. Create "Content"'Default,AdminMode,Simple,UserMode,Basic%><script type="text/javascript">function SetEditorPage(EditorName, ContentStr) {var oEditor = FCKeditorAPI.GetInstance(EditorName) ;oEditor.Focus();//setTimeout(function() { oEditor.Focus(); }, 100);oEditor.InsertHtml(ContentStr);}</script>为<textarea id="myeditor" style="width:90%;_width:900px; height:300px;" name="Content" ><%=Content%></textarea><script type="text/javascript">var editor = new UE.ui.Editor();editor.render("myeditor");</script>6.修改ueditor.config.js依据文档说明，开启相应的功能即可使用。

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 的各个属性的配置更改。

kingcms后台编辑器不能用,kingcms更换编辑器kingcms后台编辑器好像自从用了告别了IE6就不再好用，网上找了很多资料终于找到解决的办法并测试成功。

方案：把kingcms后台编辑器更换为<a href="/">kindeditor</a> 最新版本是4.1.10更换成功后比原来的FCKeditor更好用，步骤１、下载kindeditor２、上传至服务器的admin/system/editor目录下并把文件夹改名为"kindeditor"３、在page/system/fun.asp文件里找到public sub form_editor(l1,l2,l3,l4)函数，在函数select case lcase(r_editor)语句里再加一个case，代码如下：case"kindediter"Il "<link rel='stylesheet' href='../system/editor/kindediter/themes/default/default.css' />"Il "<link rel='stylesheet' href='../system/editor/kindediter/plugins/code/prettify.css' />"Il "<script charset='utf-8' src='../system/editor/kindediter/kindeditor.js'></script>"Il "<script charset='utf-8' src='../system/editor/kindediter/lang/zh_CN.js'></script>"Il "<script charset='utf-8' src='../system/editor/kindediter/plugins/code/prettify.js'></script>"Il "<script>"Il " KindEditor.ready(function(K) {"Il " var editor1 = K.create(""textarea[name='"&l1&"']"", {"Il " cssPath : '../system/editor/kindediter/plugins/code/prettify.css',"Il " uploadJson : '../system/editor/kindediter/asp/upload_json.asp',"Il " fileManagerJson : '../system/editor/kindediter/asp/file_manager_json.asp',"Il " allowFileManager : true,"Il " afterCreate : function() {"Il " var self = this;"Il " K.ctrl(document, 13, function() {"Il " self.sync();"Il " K('form[name=form1]')[0].submit();"Il " });"Il " K.ctrl(self.edit.doc, 13, function() {"Il " self.sync();"Il " K('form[name=form1]')[0].submit();"Il " });"Il " }"Il " });"Il " prettyPrint();"Il " });"Il "</script>"Il "<textarea name='"&l1&"' style='width:800px;height:490px;visibility:hidden;'>"& formencode(l3) &"</textarea>"三、默认的KindEditor文件包没有上传图片加水印功能，需要另外修改相关文件，配置方法《ASP中配置Kindeditor上传图片选择添加水印功能》，不过我制作的精简文件包已经配置了水印功能。

KindEditor是一款用Javascript编写的开源在线HTML编辑器，主要用户是让用户在网站上获得可见即可得的编辑效果，开发人员可以用KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。

你可以在其官网了解更多信息，包括演示、文档、下载等。

KindEditor的使用方法也非常简单，下面言小鱼就简单介绍一下其用法，这些内容你可以在KindEditor官网找到。

1、你要把所需的文件下载下来，下载地址去官网找。

2、你要把所需要的文件上传到你的网站，接下来就是引用了。

在需要显示编辑器的位置添加textarea输入框，注意ID在页面中应该是唯一的，不说你也知道。

3、在该HTML页面添加以下脚本：
TIP：第一个参数可用其它CSS选择器，匹配多个textarea时只在第一个元素上加载编辑器。

通过K.create函数的第二个参数，可以对编辑器进行配置，具体参数请参考编辑器初始化参数（官网有详细介绍）。

4、如果你想获得编辑器中的数据，可以用下面的代码：
KindEditor的使用方法就介绍到这里了，如果您还有不明白的地方可以去官网查找详细资料，相信一定能找到您想要的答案！。

彻底解决asp中KindEditor编辑器无法获得提交的数据问题1. 修改HTML页面1在需要显示编辑器的位置添加textarea输入框。

<textarea id="editor_id"name="content"style="width:700px;height:300px;">&lt;strong&gt;HTML内容&lt;/strong&gt;</textarea>Note∙id在当前页面必须是唯一的值。

∙在textarea里设置HTML内容即可实现编辑，在这里需要注意的是，如果从服务器端程序(ASP、PHP、等)直接显示内容，则必须转换HTML特殊字符(>,<,&,”)。

具体请参考各语言目录下面的demo.xxx程序，目前支持ASP、、PHP、JSP。

∙在有些浏览器上不设宽度和高度可能显示有问题，所以最好设一下宽度和高度。

宽度和高度可用inline样式设置，也可用编辑器初始化参数设置。

2在该HTML页面添加以下脚本。

<script charset="utf-8"src="/editor/kindeditor.js"></script><script charset="utf-8"src="/editor/lang/zh_CN.js"></script><script>var editor;KindEditor.ready(function(K){editor = K.create('#editor_id');});</script>Note∙第一个参数可用其它CSS选择器，匹配多个textarea时只在第一个元素上加载编辑器。