A. 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，將彈出層隱藏。
B. dedecms織夢網站，我復制黏貼word內容時，圖片都不顯示，請問如何才能方便快捷地把word裡面內容上傳網站
可以弄個插件，把上傳的word，自動整理為網頁形式的。在word文檔中編輯一篇文章，格式段落都整理好後，粘貼到dede編輯器汪脊裡面卻發現，格式都無效了，可能dede有自己的打算，比如這樣可以文章字體大小統一，樣色統一，整體比較整潔。但是用慣了word編輯文章的同學們就感覺不順手了。鄭州億仟家網路經過查資料和實際操作，把方法給大家介紹一下。
Dedecms集成的是CKEditor編輯器，我們要做的是把CKEditor編輯器替換成kindeditor編輯器，kindeditor編輯器以其強大的功能和良好的用戶體驗度，是目前國內使用最廣泛的編輯器之一。
具體操作步驟如下：
1，首先下載kindeditor文件包，下載地址：余液/uploads/file/20130430/20130430105608_10173.zip
2，解壓後把kindeditor文件夾上傳到include/目錄下。
3，用kindeditor文件夾下的inc_fun_funAdmin.php替換include/inc/下的inc_fun_funAdmin.php文件。
4，修改dedecms系統參數——核心設置——Html編輯器（ckeditor,需要fck的用戶可以去官網下載）困毀滲：將ckeditor改成kindEditor。
C. 怎麼為ckeditor添加圖像
為ckeditor添加圖像的方法
1. 到官網下載ckeditor
2. 復制到java web項目目錄下
3. 配置config文件，打開圖片上傳功能
CKEDITOR.editorConfig = function (config) {
// 換行方式
config.enterMode = CKEDITOR.ENTER_BR;
// 當輸入：shift+Enter是插入的標簽
config.shiftEnterMode = CKEDITOR.ENTER_BR;//
//圖片處理
config.pasteFromWordRemoveStyles = true;
config.filebrowserImageUploadUrl = "ckUploadImage.action?type=image";
// 去掉ckeditor「保存」按鈕
config.removePlugins = 'save';
};
4. java後台處理代碼
// 上傳圖片
@Action(value = "/ckUploadImage", results = { @Result(name = "success", location = "/upload.jsp") })
public String uploadImages() throws Exception {
HttpServletRequest request = ServletActionContext.getRequest();
FileOutputStream fos;
String webRoot = request.getSession().getServletContext().getRealPath(
"");
// 獲取圖片後綴名
String partRightType = uploadFileName.substring(uploadFileName
.lastIndexOf("."));
String CKEditorFuncNum = request.getParameter("CKEditorFuncNum");
// 判斷圖片的格式
if (!ImageFile.checkImageType(partRightType)) {
String path = "";
String alt_msg = "Sorry! Image format selection is incorrect, please choose GIF, jpeg, PNG format JPG, picture!";
pringWriterToPage("<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction("
+ CKEditorFuncNum
+ ", '"
+ path
+ "' , '"
+ alt_msg
+ "');</script>");
} else {
try {
uploadFileName = DateUtils.getDateNoStyle() + "-"
+ UUID.randomUUID() + partRightType;
String savePath = webRoot + Constants.UPLOAD_IMAGES_PATH;
File uploadFilePath = new File(savePath);
if (uploadFilePath.exists() == false) {
uploadFilePath.mkdirs();
System.out.println("路徑不存在,但是已經成功創建了" + savePath);
} else {
System.out.println("路徑存在了" + savePath);
}
fos = new FileOutputStream(new File(savePath + uploadFileName));
FileInputStream fis = new FileInputStream(getUpload());
byte[] buffer = new byte[1024];
int len = 0;
while ((len = fis.read(buffer)) > 0) {
fos.write(buffer, 0, len);
}
fos.close();
fis.close();
} catch (FileNotFoundException foe) {
System.out.println("上傳文件為0位元組");
}
// String path = "http://" + request.getServerName() + ":"
// + request.getServerPort() + request.getContextPath()
// + Constants.UPLOAD_IMAGES_PATH + uploadFileName;
String path = request.getContextPath()
+ Constants.UPLOAD_IMAGES_PATH + uploadFileName;
String alt_msg = "";
pringWriterToPage("<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction("
+ CKEditorFuncNum
+ ", '"
+ path
+ "' , '"
+ alt_msg
+ "');</script>");
}
return null;
}
* 其實重點的代碼就是這點
pringWriterToPage("<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction("
+ CKEditorFuncNum
+ ", '"
+ path
+ "' , '"
+ alt_msg
+ "');</script>");