ckeditor上传图片jsp
Ⅰ ckeditor怎么配置上传文件
想把java web项目中的fckeditor在线文本编辑器升级到ckeditor，但又不想购买ckfinder来实现文件上传？老k将告诉你一个不用花钱就可以实现ckeditor上传文件的好方法，只要对fckeditor的filemanager做出几处修改，就可以集成fckeditor的文件上传管理器到ckeditor中使用，可以方便在文章中插入图片及flash。 1.在java web项目中集成fckeditor
如果你是把fckeditor升级到ckeditor的话，可以跳过这一步，否则请下载fckeditor的最终版本，然后把fckeditor文件夹复制到java web项目的webroot目录下。当然，你可以直接下载本文的示例项目fckeditro文件上传管理器集成到ckeditor示例项目 (0)来获得最终版本的fckeditor，而且是已经可以集成到ckeditor的fckeditor。 2.把java实现文件上传需要的jar复制到项目lib目录下
下载本文的示例项目后解压，把项目lib目录下的所有jar文件复制到你的项目的lib下面，如果不是通过myeclipse或者eclipse进行粘贴的话，你还需要把这些jar加入到项目编译路径下。
3.重写fckeditor实现文件上传的ConnectorServlet以解决中文乱码的问题
你可以直接到本文示例项目net.laokboke.servlet目录下的ConnectorServlet.java复制到你的项目的src目录下。
4.实现fckeditor的connector.userActionImpl
其实只需要把fckeditor.properties文件复制到你项目的src目录下就可以了 5.配置你的web.xml文件
配置上传文件的servlet，使tomcat启动的时候就加载该servlet，在web.xml中加入以下的代码：
<servlet>
<servlet-name>Connector</servlet-name> <servlet-class>
net.laokboke.servlet.ConnectorServlet
</servlet-class>
<init-param>
<param-name>baseDir</param-name> <param-value>/userfiles/</param-value> </init-param>
<init-param>
<param-name>debug</param-name> <param-value>true</param-value> </init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping> <servlet-name>Connector</servlet-name>
<url-pattern>/fckeditor/connector</url-pattern>
</servlet-mapping>
6.修改fckeditor文件上传管理器的若干文件
这些文件全部位于fckeditor\editor\filemanager\browser\default\目录下，你只需要把本文的示例项目中同目录下的所有文件复制替换你的就可以了。 7.修改ckeditor的图像属性窗口js，屏蔽一些不必要的选项
该文件是位于ckeditor\plugins\image\dialogs\目录下的image.js文件，增加了291-293这几行代码。
8.在ckeditor集成fckeditor filemanager
其实就是在使用ckeditor时配置它的filebrowserBrowseUrl和filebrowserUploadUrl等属性，如以下js代码
<script type="text/javascript"> CKEDITOR.replace( 'editor1', {
filebrowserBrowseUrl :
'<%=path %>/fckeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=/fckeditor/connector', filebrowserUploadUrl : '<%=path %>/fckeditor/connector?Type=Image'
}); </script>
Ⅱ 用ckeditor在JAVA平台实现上传文件，图片功能。用action，和jsp以及javascript。。高分求助。。谢谢了。
官网有没有我不知道，下面是我经常用的fck上传方法，也是通用的。
第一步：你要用fck实现文件上传需要先在web.xml配置一段servlet：
<servlet>
<servlet-name>ConnectorServlet</servlet-name>
<servlet-class>
net.fckeditor.connector.ConnectorServlet
</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>ConnectorServlet</servlet-name>
<url-pattern>
/fckeditor/editor/filemanager/connectors/*
</url-pattern>
</servlet-mapping>
类：net.fckeditor.connector.ConnectorServlet 是fck核心包提供的；
第二步：然后在你项目的src下面创建一个名为：fckeditor.properties 的文件；
在你创建的fckeditor.properties文件中添加如下一段代码：
connector.userActionImpl=net.fckeditor.requestcycle.impl.EnabledUserAction
记住路径和名字都是固定的呢！
照这样就可以实现在fck中的上传功能，但是如果你建立中文文件夹或图片名字叫中文名称的话就会出现乱码，处理乱码问题那你就要找到net.fckeditor.connector.ConnectorServlet 这个类中实现上传前增加一段处理乱码的代码，字符编码要和你项目一致，关于乱码处理，你研究一下里面代码吧！自己动手处理一下会让你更加熟练一些fck
Ⅲ ckeditor在jsp中上传word时如何自动上传图片,或者粘贴word时上传图片
参考答案 而对于年轻人而言，三年五年就可以是一生一世——《十八春》
Ⅳ ckfinder for java 如何使用ckeditor和ckfinder如何配置，（java、jsp）
到官方把ckfinder for java与ckeditor下载下来，ckfinder里面会有一个WAR包，你直接把这个包部署到TOMCAT(或者你自己的应用服务器)上，再将ckeditor文件夹与ckfinder文件夹放在同一级目录里，打开ckfinder文件夹里的_samples下面的ckeditor.html，将<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>修改为<script type="text/javascript" src="../ckeditor/ckeditor.js"></script>
再在浏览器里浏览ckeditor.html，看能不能上传文件，呵呵。
Ⅳ 谁能告诉我怎样在ASP CKEditor 中实现上传图片功能
1、项目先新建Lbrary文件夹跟js文件夹（js小写）并在js文件夹下，在简历ckeditor和ckfinder文件夹，压缩包找到其中/bin/Debug下的CKEditor.NET.dll考到新建的文件夹下，如后在引用中右键添加对刚才的CKEditor.NET.dll的引用，如图：
Ⅵ 如何将ckeditor图片上传简化到只有上传功能
ckeditor本身是有源代码的，你修改下就是了。用上firebug，或者ie devtools等工具会帮你事半功倍。
Ⅶ Ckeditor HTML编辑器 如何批量上传图片
Ckeditor上传图片是要配合Ckfinder进行的，只要有了Ckfinder,图片就可以批量上传了。这两个工具本来是一体的，后来分割成了两个东东。
Ⅷ jsp项目中ckeditor如何实现文件上传
老k曾经在《ckeditor用fckeditor的文件管理器实现图片上传》一文中提到可以通过移植fckeditor的文件管理器来在jsp项目中实现文件上传，不过fckeditor文件管理器的界面相对比较简单，和ckfinder比起来实在是太寒碜了。同时在《能集成到ckeditor的文件管理器》中老k也列举了多种可以集成到ckeditor的文件管理器，其中corefive filemanager是支持jsp的，所以如果你不能忍受fckeditor文件管理器的界面的话，不妨考虑一下corefive。下面是它的使用方法。1.下载corefive filemanagercorefive filemanager是托管在GitHub的，点击下载它。2.部署到jsp项目解压zip文件后，将filemanager整个目录复制到jsp项目的WebRoot目录下，然后将scripts目录下的filemanager.config.js.default文件重命名为filemanager.config.js。修改该文件中的culture选项值为zh-cn，修改lang选项值为jsp，修改relpath选项值为window.location.protocol + ‘//’ + document.domain + “:” + window.location.port+”/”;3.编译connector的类文件将connectors\jsp目录里的java文件复制到jsp项目的src目录下，并修改config.properties文件中的culture选项为zh-cn4.复制jsp文件上传的apache类库到jsp项目的lib目录下类库包括commons-fileupload-1.2.2.jar、commons-io-2.0.1.jar、commons-lang-2.6.jar和commons-logging-1.1.1.jar等。5.集成到ckeditor中使用在调用ckeditor的时候定义filebrowserBrowseUrl，如下 <script type="text/javascript"> CKEDITOR.replace( 'editor1', { filebrowserBrowseUrl : '<%=path %>/filemanager/index.html' }); </script> 这样当你点击ckeditor插入图片并浏览服务器的时候，你将得到下面的效果图jsp项目ckeditor实现文件上传更多如果您觉得文章对您有帮助，不妨通过支付宝打赏点碎钱支持一下老K博客吧除非注明，老K博客文章均为原创并采用BY-NC-SA协议进行授权，转载请注明转自
Ⅸ ckeditor 4.1 调试成功后，发现没有上传图片功能，如果配置出来呢
CKeditor可以配合CKfinder实现文件的上传及管理。但是往往我们上传的图片需要某些自定义的操作，比如将图片路径写入数据库，图片加水印等等操作。
实现原理：配置CKeditor的自定义图标，单击弹出一个子窗口，在在子窗口中上传图片实现我们的自己的功能，然后自动关闭子窗口将图片插入到CKeditor的当前光标位置。
实现步骤：
1、配置CKeditor。网上很多资料，大家自己查。
2、配置config.js文件。此文件为CKeditor的配置文件。配置需要显示的图标。
1 CKEDITOR.editorConfig = function( config )
2 {
3// Define changes to default configuration here. For example:
4 config.language = 'zh-cn';
5 config.skin = 'v2';
6// config.uiColor = '#AADC6E';
7 config.toolbar =
8 [
9 ['Source', '-', 'Preview', '-'],
10 ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord'],
11 ['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'],
12 '/',
13 ['Bold', 'Italic', 'Underline'],
14 ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent'],
15 ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
16 ['Link', 'Unlink', 'Anchor'],
17 ['addpic','Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak'],//此处的addpic为我们自定义的图标，非CKeditor提供。
18 '/',
19 ['Styles', 'Format', 'Font', 'FontSize'],
20 ['TextColor', 'BGColor'],
21
22 ];
23
24 config.extraPlugins = 'addpic';
25
26 };
3、在CKeditor\plugins文件夹下新建addpic文件夹，文件夹下添加addpic.JPG图标文件，建议尺寸14*13。addpic.JPG图标文件即为显示在CKeditor上的addpic的图标。在图标文件同目录下添加文件plugin.js，内容如下。
1 (function () {
2//Section 1 : 按下自定义按钮时执行的代码
3var a = {
4 exec: function (editor) {
5 show();
6 }
7 },
8 b = 'addpic';
9 CKEDITOR.plugins.add(b, {
10 init: function (editor) {
11 editor.addCommand(b, a);
12 editor.ui.addButton('addpic', {
13 label: '添加图片',
14 icon: this.path + 'addpic.JPG',
15 command: b
16 });
17 }
18 });
19 })();
文件中的show函数为显示子页面使用，我将它写在CKeditor所在的页面中。
4、edit.aspx页面使用的js
edit.aspx页面就是使用CKeditor的页面。
function show() {
$("#ele6")[0].click();
}
function upimg(str) {
if (str == "undefined" || str == "") {
return;
}
str = "<img src='/html/images/" + str+"'</img>";
CKEDITOR.instances.TB_Content.insertHtml(str);
close();
}
function close() {
$("#close6")[0].click();
}
$(document).ready(function () {
new PopupLayer({ trigger: "#ele6", popupBlk: "#blk6", closeBtn: "#close6", useOverlay: true, offsets: { x: 50, y: 0} });
});
以上就是js的代码，弹出窗口是使用jquery的弹出层，弹出层中嵌套iframe，iframe中使用upimg.aspx上传页面，大家如果有其他需要可以自己去设计弹出效果。为了大家调试方便，我将我实现弹出层的代码贴出来。
弹出层效果使用的是popup_layer.js方案，需要进一步加工的朋友可以自己在网络中谷歌。ele6为弹出激发需要的层，blk6为弹出层主体，close6为层中承载关闭按钮的层。代码如下
<div id="ele6" style="cursor:hand; color: blue; display:none;"></div>
<div id="blk6" class="blk" style="display:none;">
<div class="head"><div class="head-right"></div></div>
<div class="main">
<a href="javascript:void(0)" id="close6" class="closeBtn"></a>
<iframe src="upimg.aspx"></iframe>
</div>
</div>
别忘记引用jquery和popup_layer.js。
5、upimg.aspx页面
aspx代码
<div>
<asp:FileUpload ID="FU_indexIMG" runat="server"/>
<br />
<asp:Button ID="Button1" runat="server" Text="上传" onclick="Button1_Click"/>
<asp:Button ID="Button2" runat="server" onclick="Button2_Click" Text="取消"/>
</div>
对应的cs代码
1protectedvoid Button1_Click(object sender, EventArgs e)
2 {
3string imgdir = UpImg();
4 script = "window.parent.upimg('" + imgdir + "');";
5 ResponseScript(script);
6 }
7protectedvoid Button2_Click(object sender, EventArgs e)
8 {
9string script = "window.parent.close();";
10 ResponseScript(script);
11 }
12///<summary>
13/// 输出脚本
14///</summary>
15publicvoid ResponseScript(string script)
16 {
17 System.Text.StringBuilder sb = new System.Text.StringBuilder("<script language='javascript' type='text/javascript'>");
18 sb.Append(script);
19 sb.Append("</script>");
20 ClientScript.RegisterStartupScript(this.GetType(), RandomString(1), sb.ToString());
21 }
22///<summary>
23/// 获得随机数
24///</summary>
25///<param name="count">长度</param>
26///<returns></returns>
27publicstaticstring RandomString(int count)
28 {
29 RNGCryptoServiceProvider rng = new RNGCryptoServiceProvider();
30byte[] data = newbyte[count];
31 rng.GetBytes(data);
32return BitConverter.ToString(data).Replace("-", "");
33 }
Button1_Click为确定按钮的单击事件函数。其中使用UpImg函数实现上传图片文件，我还在其中实现了加水印，缩图，将图片文件的大小以及相对路径存入数据库等自定义操作，大家可以在此发挥。UpImg返回值为保存图片的相对路径，然后调用editer.aspx页面的js函数upimg。js函数upimg功能为将字符串插入到CKeditor的当前光标位置，插入的是html代码。至此为止带有新上传图片相对路径的img标签就插入CKeditor的编辑区了，能够显示图片了。
Button1_Click为取消按钮的单击事件函数。调用editer.aspx页面的js函数close，将弹出层隐藏。
Ⅹ CKeditor 图片上传 完毕后的事件调用问题
同意楼下的说的。应该是div或者是css的名称少了一些。tag。你仔细检查一下。我过去也遇到过类似的问题。仔细核对一下原来人家的例子就可以了。图像上传的这个JS也用过。比这个还要复杂些。 你这个代码只是其中的一小部分回调，用来调试用的。开源的代码中有一个完整版本的，你找一个例子先运行，然后再自己一点点修改过来。可以使用中文的。