ckeditor上傳配置
㈠ 求助：CKeditor 和 CKfinder的配置，圖片上傳。要詳解！另求一個非常好用的，想IE8查看源文件一樣的編輯器
編輯器 你用EditPlus 這個不錯 餓一直用 網上下吧 到處都是 你要不能下 我傳給你也行
ckeditor {
config = "/js/edit-config.js"
upload {
// basedir = "/uploads/"
// baseurl = "/something/"
overwrite = false
link {
browser = true
upload = true
allowed = ['doc', 'docx', 'flv', 'xls','avi']
denied = ['html', 'htm', 'php', 'php2', 'php3', 'php4', 'php5',
'phtml', 'pwml', 'inc', 'asp', 'aspx', 'ascx', 'jsp',
'cfm', 'cfc', 'pl', 'bat', 'exe', 'com', 'dll', 'vbs', 'js', 'reg',
'cgi', 'htaccess', 'asis', 'sh', 'shtml', 'shtm', 'phtm']
}
image {
browser = true
upload = true
allowed = ['jpg', 'gif', 'jpeg', 'png']
denied = []
}
flash {
browser = true
upload = true
allowed = ['swf']
denied = []
}
flv {
browser = true
upload = true
allowed = ['flv']
denied = []
}
}
}
這個配置就可以 至於詳解 你看文檔不就完了 文檔這么長 在這打字 一句一句的還不累死
㈡ 如何配置與使用CKEDITOR
一、使用方法：
1、在頁面<head>中引入ckeditor核心文件ckeditor.js
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
2、在使用編輯器的地方插入HTML控制項<textarea>
<textarea id="TextArea1" cols="20" rows="2" class="ckeditor"></textarea>
如果是ASP.NET環境，也可用伺服器端控制項<TextBox>
<asp:TextBox ID="tbContent" runat="server" TextMode="MultiLine" class="ckeditor"></asp:TextBox>
注意在控制項中加上 class="ckeditor" 。
3、將相應的控制項替換成編輯器代碼
<script type="text/javascript">
CKEDITOR.replace('TextArea1');
//如果是在ASP.NET環境下用的伺服器端控 件<TextBox>
CKEDITOR.replace('tbContent');
//如 果<TextBox>控制項在母版頁中，要這樣寫
CKEDITOR.replace('<%=tbContent.ClientID.Replace("_","$") %>');
</script>
4、配置編輯器
ckeditor的配置都集中在 ckeditor/config.js 文件中，下面是一些常用的配置參數：
// 界面語言，默認為 'en'
config.language = 'zh-cn';
// 設置寬高
config.width = 400;
config.height = 400;
// 編輯器樣式，有三種：'kama'（默認）、'office2003'、'v2'
config.skin = 'v2';
// 背景顏色
config.uiColor = '#FFF';
// 工具欄（基礎'Basic'、全能'Full'、自定義）plugins/toolbar/plugin.js
config.toolbar = 'Basic';
config.toolbar = 'Full';
這將配合：
config.toolbar_Full = [
['Source','-','Save','NewPage','Preview','-','Templates'],
['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
'/',
['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['Link','Unlink','Anchor'],
['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
'/',
['Styles','Format','Font','FontSize'],
['TextColor','BGColor']
];
//工具欄是否可以被收縮
config.toolbarCanCollapse = true;
//工具欄的位置
config.toolbarLocation = 'top';//可選：bottom
//工具欄默認是否展開
config.toolbarStartupExpanded = true;
// 取消 「拖拽以改變尺寸」功能 plugins/resize/plugin.js
config.resize_enabled = false;
//改變大小的最大高度
config.resize_maxHeight = 3000;
//改變大小的最大寬度
config.resize_maxWidth = 3000;
//改變大小的最小高度
config.resize_minHeight = 250;
//改變大小的最小寬度
config.resize_minWidth = 750;
// 當提交包含有此編輯器的表單時，是否自動更新元素內的數據
config.autoUpdateElement = true;
// 設置是使用絕對目錄還是相對目錄，為空為相對目錄
config.baseHref = ''
// 編輯器的z-index值
config.baseFloatZIndex = 10000;
//設置快捷鍵
config.keystrokes = [
[ CKEDITOR.ALT + 121 /*F10*/, 'toolbarFocus' ], //獲取焦點
[ CKEDITOR.ALT + 122 /*F11*/, 'elementsPathFocus' ], //元素焦點
[ CKEDITOR.SHIFT + 121 /*F10*/, 'contextMenu' ], //文本菜單
[ CKEDITOR.CTRL + 90 /*Z*/, 'undo' ], //撤銷
[ CKEDITOR.CTRL + 89 /*Y*/, 'redo' ], //重做
[ CKEDITOR.CTRL + CKEDITOR.SHIFT + 90 /*Z*/, 'redo' ], //
[ CKEDITOR.CTRL + 76 /*L*/, 'link' ], //鏈接
[ CKEDITOR.CTRL + 66 /*B*/, 'bold' ], //粗體
[ CKEDITOR.CTRL + 73 /*I*/, 'italic' ], //斜體
[ CKEDITOR.CTRL + 85 /*U*/, 'underline' ], //下劃線
[ CKEDITOR.ALT + 109 /*-*/, 'toolbarCollapse' ]
]
//設置快捷鍵 可能與瀏覽器快捷鍵沖突 plugins/keystrokes/plugin.js.
config.blockedKeystrokes = [
CKEDITOR.CTRL + 66 /*B*/,
CKEDITOR.CTRL + 73 /*I*/,
CKEDITOR.CTRL + 85 /*U*/
]
//設置編輯內元素的背景色的取值 plugins/colorbutton/plugin.js.
config.colorButton_backStyle = {
element : 'span',
styles : { 'background-color' : '#(color)' }
}
//設置前景色的取值 plugins/colorbutton/plugin.js
config.colorButton_colors = '000,800000,8B4513,2F4F4F,008080,000080,4B0082,696969,B22222,A52A2A,DAA520,
006400,40E0D0,0000CD,800080,808080,F00,FF8C00,FFD700,008000,0FF,00F,EE82EE,
A9A9A9,FFA07A,FFA500,FFFF00,00FF00,AFEEEE,ADD8E6,DDA0DD,D3D3D3,FFF0F5,
FAEBD7,FFFFE0,F0FFF0,F0FFFF,F0F8FF,E6E6FA,FFF』
//是否在選擇顏色時顯示「其它顏色」選項 plugins/colorbutton/plugin.js
config.colorButton_enableMore = false
//區塊的前景色默認值設置 plugins/colorbutton/plugin.js
config.colorButton_foreStyle = {
element : 'span',
styles : { 'color' : '#(color)' }
};
//所需要添加的CSS文件 在此添加 可使用相對路徑和網站的絕對路徑
config.contentsCss = './contents.css';
//文字方向
config.contentsLangDirection = 'rtl'; //從左到右
//CKeditor的配置文件 若不想配置 留空即可
CKEDITOR.replace( 'myfiled', { customConfig : './config.js' } );
//界面編輯框的背景色 plugins/dialog/plugin.js
config.dialog_backgroundCoverColor = '#fffefd'; //可設置參考
config.dialog_backgroundCoverColor = 'white' //默認
//背景的不透明度 數值應該在：0.0～1.0 之間 plugins/dialog/plugin.js
config.dialog_backgroundCoverOpacity = 0.5
//移動或者改變元素時 邊框的吸附距離 單位：像素 plugins/dialog/plugin.js
config.dialog_magnetDistance = 20;
//是否拒絕本地拼寫檢查和提示 默認為拒絕 目前僅firefox和safari支持 plugins/wysiwygarea/plugin.js.
config.disableNativeSpellChecker = true
//進行表格編輯功能 如：添加行或列 目前僅firefox支持 plugins/wysiwygarea/plugin.js
config.disableNativeTableHandles = true; //默認為不開啟
//是否開啟 圖片和表格 的改變大小的功能 config.disableObjectResizing = true;
config.disableObjectResizing = false //默認為開啟
//設置HTML文檔類型
config.docType = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd%22' ;
//是否對編輯區域進行渲染 plugins/editingblock/plugin.js
config.editingBlock = true;
//編輯器中回車產生的標簽
config.enterMode = CKEDITOR.ENTER_P; //可選：CKEDITOR.ENTER_BR或CKEDITOR.ENTER_DIV
//是否使用HTML實體進行輸出 plugins/entities/plugin.js
config.entities = true;
//定義更多的實體 plugins/entities/plugin.js
config.entities_additional = '#39'; //其中#代替了&
//是否轉換一些難以顯示的字元為相應的HTML字元 plugins/entities/plugin.js
//默認的字體名 plugins/font/plugin.js
config.font_defaultLabel = 'Arial';
//字體編輯時的字元集 可以添加常用的中文字元：宋體、楷體、黑體等 plugins/font/plugin.js
config.font_names = 'Arial;Times New Roman;Verdana';
//文字的默認式樣 plugins/font/plugin.js
config.font_style = {
element : 'span',
styles : { 'font-family' : '#(family)' },
overrides : [ { element : 'font', attributes : { 'face' : null } } ]
};
//字體默認大小 plugins/font/plugin.js
config.fontSize_defaultLabel = '12px';
//字體編輯時可選的字體大小 plugins/font/plugin.js
config.fontSize_sizes ='8/8px;9/9px;10/10px;11/11px;12/12px;14/14px;16/16px;18/18px;20/20px;22/22px;24/24px;26/26px;28/28px;36/36px;48/48px;72/72px'
//設置字體大小時 使用的式樣 plugins/font/plugin.js
config.fontSize_style = {
element : 'span',
styles : { 'font-size' : '#(size)' },
overrides : [ { element : 'font', attributes : { 'size' : null } } ]
};
//是否強制復制來的內容去除格式 plugins/pastetext/plugin.js
config.forcePasteAsPlainText =false //不去除
//是否強制用「&」來代替「&」plugins/htmldataprocessor/plugin.js
config.format_p = { element : 'p', attributes : { class : 'normalPara' } };
//對PRE標簽自動進行格式化 plugins/format/plugin.js
config.format_pre = { element : 'pre', attributes : { class : 'code' } };
//用分號分隔的標簽名字 在工具欄上顯示 plugins/format/plugin.js
config.format_tags = 'p;h1;h2;h3;h4;h5;h6;pre;address;div';
//是否使用完整的html編輯模式 如使用，其源碼將包含：<html><body></body></html>等標簽
config.fullPage = false;
//是否忽略段落中的空字元 若不忽略 則字元將以「」表示 plugins/wysiwygarea/plugin.js
config.ignoreEmptyParagraph = true;
//在清除圖片屬性框中的鏈接屬性時 是否同時清除兩邊的<a>標簽 plugins/image/plugin.js
config.image_removeLinkByEmptyURL = true;
//一組用逗號分隔的標簽名稱，顯示在左下角的層次嵌套中 plugins/menu/plugin.js.
config.menu_groups ='clipboard,form,tablecell,tablecellproperties,tablerow,tablecolumn,table,anchor,link,image,flash,checkbox,radio,textfield,hiddenfield,imagebutton,button,select,textarea';
//顯示子菜單時的延遲，單位：ms plugins/menu/plugin.js
config.menu_subMenuDelay = 400;
//當執行「新建」命令時，編輯器中的內容 plugins/newpage/plugin.js
config.newpage_html = '';
//當從word里復制文字進來時，是否進行文字的格式化去除 plugins/pastefromword/plugin.js
config.pasteFromWordIgnoreFontFace = true; //默認為忽略格式
//是否使用<h1><h2>等標簽修飾或者代替從word文檔中粘貼過來的內容 plugins/pastefromword/plugin.js
config.pasteFromWordKeepsStructure = false;
//從word中粘貼內容時是否移除格式 plugins/pastefromword/plugin.js
二、 一些使用技巧
1、在頁面中即時設置編輯器
<script type="text/javascript">
// 示例1：設置工具欄為基本工具欄，高度為70
CKEDITOR.replace('<%=tbLink.ClientID.Replace("_","$") %>',
{ toolbar:'Basic', height:70 });
//示例2：工具欄為自定義類型
CKEDITOR.replace( 'editor1',
{
toolbar :
[
//加粗 斜體， 下劃線 穿過線 下標字 上標字
// 樣式 格式 字體 字體大小
['Styles','Format','Font','FontSize'],
//文本顏色 背景顏色
['TextColor','BGColor'],
//全屏 顯示區塊
['Maximize', 'ShowBlocks','-']
]
}
);
</script>
三、精簡ckeditor
在部署到Web伺服器上時，下列文件夾和文件都可以刪除：
/_samples ：示例文件夾；
/_source ：未壓縮源程序；
/lang文件夾下除 zh-cn.js、en.js 以外的文件（也可以根據需要保留其他語言文件）；
根目錄下的 changes.html(更新列表)，install.html(安裝指向)，license.html(使用許可)；
/skins 目錄下不需要的皮膚，一般用V2(簡單，樸素) ，如果只保留V2則必須在config.js中指定皮膚。
四， 版本問題
在CKEditor的官方網站上下載，最要下載全部功能，最後得到的壓縮包是ckeditor_4.1.1_full.zip，如果選擇simple或者standed，可能會有些功能不能用，比如字體顏色，背景顏色，這下功能在standed版本裡面就不支持。所以你會很奇怪明明設置了['TextColor','BGColor']，但是文本顏色和背景顏色選項就是不顯示。
五，去掉默認的段落標記
去除CKEditor自動添加的<p></p>標簽的方法,其實很簡單,有兩種辦法：
1.在ckeditor目錄下的config.js添加以下配置參數即可:
config.enterMode = CKEDITOR.ENTER_BR： 屏蔽換行符<br>
config.shiftEnterMode = CKEDITOR.ENTER_P:屏蔽段落<p>
2.直接更改編輯器默認模式為源代碼模式，在ckeditor目錄下的config.js添加以下配置：
config.startupMode = 'source';
六，和kcfinder搭配使用
默認情況下CKEditor是沒有上傳圖片功能的，可以在編輯器中粘貼圖片，這樣的話保存在資料庫中的是圖片的源文件，這很容易出現問題，即使欄位是text格式的也很容易就超出最大范圍了，所以要配合kcfinder來上傳文件。一個是ck一個是kc真實一對好兄弟。
要注意如果kcfinder的路徑放在CKEditor的同一級目錄下不能這樣
config.filebrowserBrowseUrl = '/kcfinder/browse.php?type=files';
要注意為安全考慮默認情況下是不允許上傳圖片的，在自己的源代碼中要設置可以上傳，代碼如下
session_start();
if(!empty($_SESSION['USERNAME'])&&!empty($_SESSION['PASSWORD'])){
$_SESSION['KCFINDER']['disabled'] = false;
}else{
echo "<script>top.location.href="http://xxx.com/login.php">
}
這個就是判斷是否是登陸用戶，不是登陸用戶的話不可以使用，並且跳轉到登陸界面去登陸，網上有人說把這個放在kcfinderconfig.php這個kcfinder的配置文件中我發現這個是行不通的。這樣設置之後在選擇上傳圖片的時候會有錯誤，如下
㈢ 你好，我想知道ckeditor3.6以上的在配置上傳圖片的時候，都要接受哪些參數啊，參數名是什麼，
上傳的表單名叫 upload, $_FILES['upload']
上傳成功後輸出：
echo '<script type="text/javascript">window.parent.CKEDITOR.tools.callFunction('
.$_GET['CKEditorFuncNum'].', \'文件路徑\', \'失敗顯示的消息，成功就為空\');</script>'
㈣ 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 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如何上傳圖片配置PHP語言_PHP教程
可以發送到新浪微博。跟大家分享，希望官方能及早開放API。誕生更多應用. 以下為引用的內容： ?php /* -------------------------------------------------------CKEditor的原包中沒有包含圖片的上傳伺服器端處理文件，其公司的另一款開源產品：CKFinder做了很好的補充。但是要下載這個源代碼再進行配置，雖然方便了很多，但是僅僅為了上傳圖片，卻要使用這么大的整個系統來使用，確實有點大材小用，我花了一個下午的時間，自己用PHP腳本寫了一個處理上傳文件的腳本代碼，沒有做更多的安全處理，希望對大家有用。首先，在你的config.js文件里添加如下代碼：以下為引用的內容：CKEDITOR.editorConfig = function( config ){config.filebrowserImageUploadUrl = './upload.php?type=img';
config.filebrowserFlashUploadUrl = './upload.php?type=flash';
$config['flash']=array("flv","swf"); //flash允許後綴$config['flash_size']=200; //上傳flash大小上限 單位：KB
$config['img_size']=500; //上傳img大小上限 單位：KB$config['message']="上傳成功"; //上傳成功後顯示的消息，若為空則不顯示$config['name']=mktime(); //上傳後的文件命名規則 這里以unix時間戳來命名$config['flash_dir']="/ckeditor/upload/flash"; //上傳flash文件地址 採用絕對地址 方便upload.php文件放在站內的任何位置 後面不加"/"
$config['img_dir']="/ckeditor/upload/img"; //上傳img文件地址 採用絕對地址 採用絕對地址 方便upload.php文件放在站內的任何位置 後面不加"/"$config['site_url']=""; //網站的網址 這與圖片上傳後的地址有關 最後不加"/" 可留空//文件上傳
uploadfile();function uploadfile(){global $config;
//判斷是否是非法調用
if(empty($_GET['CKEditorFuncNum']))
mkhtml(1,"","錯誤的功能調用請求");
$fn=$_GET['CKEditorFuncNum'];
if(!in_array($_GET['type'],$config['type']))
mkhtml(1,"","錯誤的文件調用請求");
$type=$_GET['type'];
if(is_uploaded_file($_FILES['upload']['tmp_name'])){//判斷上傳文件是否允許
$filearr=pathinfo($_FILES['upload']['name']);
$filetype=$filearr["extension"];
if(!in_array($filetype,$config[$type]))
mkhtml($fn,"","錯誤的文件類型！");
//判斷文件大小是否符合要求
if($_FILES['upload']['size']>$config[$type."_size"]*1024)
mkhtml($fn,"","上傳的文件不能超過".$config[$type."_size"]."KB！");
㈦ CKEditor上傳圖片時的路徑在web.config中如何配置
好像配置ckfinder就行了
㈧ CKEditor 3.4.1 asp怎麼配置上傳功能！~
都放在根目錄，我這是php的，但是asp同理，然後配置ceditor下面的config.js第一種方法 filebrowserBrowseUrl : '/ckfinder/ckfinder.html',
filebrowserImageBrowseUrl : '/ckfinder/ckfinder.html?type=Images',
filebrowserFlashBrowseUrl : '/ckfinder/ckfinder.html?type=Flash',
filebrowserUploadUrl : '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',
filebrowserImageUploadUrl : '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images',
filebrowserFlashUploadUrl : '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash'看情況第二種方法 <tr>
<td class="b1" width="10%" align="right">產品詳細：</td>
<td width="90%"><?php echo form_textarea(array('name'=>'content','id'=>'content'));?></td>
</tr>
<script type="text/javascript">
CKEDITOR.replace( 'content' );
CKFinder.SetupCKEditor(CKEDITOR.instances.content, '../../js/ckfinder' );
</script>第三種方法，編輯器不是一開始就載入，而是通過按鈕控制載入編輯器// JavaScript Document
var editor;function createEditor(oContent,oEditor)
{
if ( editor )
return;
for(var i;i<document.forms[0].length;i++){
if(document.forms[0].elements[i].type=="select"){
document.forms[0].elements[i].style.display="none";
}
} var html = document.getElementById( oContent ).value;
document.getElementById(oContent).style.display='none';
editor = CKEDITOR.appendTo( oEditor );
CKFinder.SetupCKEditor( editor, '../../js/ckfinder' );
editor.setData( html );
}function removeEditor(oContent)
{
if ( !editor )
return;
document.getElementById( oContent ).value = editor.getData();
document.getElementById(oContent).style.display='';
editor.destroy();
editor = null;
}路徑看情況改變
㈨ ckeditor如何配置
一、使用方法：
1、在頁面<head>中引入ckeditor核心文件ckeditor.js
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
2、在使用編輯器的地方插入HTML控制項<textarea>
<textarea id="TextArea1" cols="20" rows="2" class="ckeditor"></textarea>
如果是ASP.NET環境，也可用伺服器端控制項<TextBox>
<asp:TextBox ID="tbContent" runat="server" TextMode="MultiLine" class="ckeditor"></asp:TextBox>
注意在控制項中加上 class="ckeditor" 。
3、將相應的控制項替換成編輯器代碼
<script type="text/javascript">
CKEDITOR.replace('TextArea1');
//如果是在ASP.NET環境下用的伺服器端控 件<TextBox>
CKEDITOR.replace('tbContent');
//如 果<TextBox>控制項在母版頁中，要這樣寫
CKEDITOR.replace('<%=tbContent.ClientID.Replace("_","$") %>');
</script>