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也用過。比這個還要復雜些。 你這個代碼只是其中的一小部分回調，用來調試用的。開源的代碼中有一個完整版本的，你找一個例子先運行，然後再自己一點點修改過來。可以使用中文的。