|
這一段時(shí)間把自己網(wǎng)站編輯器由fckeditor升級(jí)成了ckeditor，頓時(shí)感覺煥然一新。
下面把我的經(jīng)驗(yàn)分享一下：
總的來說，ckeditor的使用比fckeditor一樣簡(jiǎn)單，不需要很復(fù)雜的設(shè)置
1、下載了完整的程序之后，先要對(duì)程序中的不必要的東西進(jìn)行刪除。凡是文件名或文件夾名前面有"_"的文件或文件夾都可以刪除，這些文件是一些說明文件或者實(shí)例文件。另外，./lang文件夾中，只保留：zh_cn.js，en.js文件即可，這個(gè)文件夾是程序的語言包，因?yàn)槠渌Z言大家用不到，放在那里也占用空間，所以刪掉。./skins文件夾是編輯器的界面，根據(jù)情況保留至少一個(gè)文件夾即可，其中kama是可自定顏色UI的文件，建議保留，當(dāng)然如果不在乎空間大小的話，也可以全部上傳。
2、簡(jiǎn)單使用
（1） 引用：在頁面<head>中引入ckeditor核心文件ckeditor.js
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
（2）在需要調(diào)用的地方寫一個(gè)textarea控件
<textarea name="comment" id="comment" rows="27" cols="80"></textarea>
(3)讓ckeditor替換textarea
<script type="text/javascript">
var editor = CKEDITOR.replace(‘comment’);
</script>
3、個(gè)性定制
（1）首先我發(fā)現(xiàn)ckeditor.js里面的東西是經(jīng)過壓縮了的，所以不好修改
如果我們需要個(gè)性定制一是修改config.js 二是在調(diào)用的頁面賦上ckeditor的屬性
（2）config.js的配置
首先我的配置
CKEDITOR.editorConfig = function( config )
{
config.language = 'zh-cn';
config.width = 600; //初始化時(shí)的寬度
config.skin='kama'; //使用的皮膚
config.tabSpaces = 4;
config.resize_maxWidth = 600; //如果設(shè)置了編輯器可以拖拽 這是可以移動(dòng)的最大寬度
config.toolbarCanCollapse = false; //工具欄可以隱藏
//config.toolbarLocation = 'bottom'; //可選：設(shè)置工具欄在整個(gè)編輯器的底部bottom
config.resize_minWidth = 600; //如果設(shè)置了編輯器可以拖拽 這是可以移動(dòng)的最小寬度
config.resize_enabled = false; //如果設(shè)置了編輯器可以拖拽
config.protectedSource.push( /<\s*iframe[\s\S]*?>/gi ) ; // <iframe> tags. //一下是后天驗(yàn)證非法數(shù)據(jù)
config.protectedSource.push( /<\s*frameset[\s\S]*?>/gi ) ; // <frameset> tags.
config.protectedSource.push( /<\s*frame[\s\S]*?>/gi ) ; // <frame> tags.
config.protectedSource.push( /<\s*script[\s\S]*?\/script\s*>/gi ) ; // <SCRIPT> tags.
config.protectedSource.push( /<%[\s\S]*?%>/g ) ; // ASP style server side code
config.protectedSource.push( /<\?[\s\S]*?\?>/g ) ; // PHP style server side code
config.protectedSource.push( /(<asp:[^\>]+>[\s|\S]*?<\/asp:[^\>]+>)|(<asp:[^\>]+\/>)/gi ) ;
//config.startupFocus = true;
config.smiley_images = ['1.gif','2.gif','3.gif','4.gif','5.gif','6.gif','7.gif','8.gif','9.gif','10.gif','11.gif','12.gif','13.gif','14.gif','15.gif','16.gif',
'17.gif','18.gif','19.gif','20.gif','21.gif','22.gif','23.gif','24.gif','25.gif','26.gif','27.gif','28.gif','29.gif','30.gif',
'31.gif','32.gif','33.gif','34.gif','35.gif','36.gif','37.gif','38.gif','39.gif','40.gif','41.gif','42.gif','43.gif','44.gif',
'45.gif','46.gif',"47.gif",'48.gif','49.gif','50.gif','51.gif','52.gif','53.gif','54.gif','55.gif','56.gif','57.gif','58.gif',
'59.gif','60.gif','61.gif','62.gif','63.gif','64.gif','65.gif','66.gif','67.gif','68.gif','69.gif','70.gif','71.gif','72.gif'];
//我設(shè)置的表情 對(duì)應(yīng)要把表情文件夾的圖像改過來
//設(shè)置編輯器里字體下拉列表里的字體
config.font_names= '宋體;黑體;楷體_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ;
//設(shè)置工具欄里面的工具 最主要的config.toolbar = [['Bold','Italic','Underline','Strike','FontSize','NumberedList','BulletedList','Outdent','Indent','JustifyLeft',
'JustifyCenter','JustifyRight','Link','Unlink','TextColor','BGColor','Image','Flash','Smiley','Table',
'RemoveFormat','Source']];
};
其他屬性設(shè)置見附錄1
（3）我在config里的設(shè)置不是很多因?yàn)槲也皇呛芨呒?jí)的應(yīng)用，我想大多數(shù)人和我一樣，符合自己的要求就行了，下面是使用時(shí)JavaScript里替換textarea時(shí)的屬性
window.onload=function()
{
CKEDITOR.replace( 'comment',{
language:'zh-cn',//簡(jiǎn)體中文
width : 610, //寬度
height:340, //高度
toolbar ://工具欄設(shè)置 隨便取舍
[
['Source','Maximize','-','Save','NewPage','Preview','-','Templates'],
['Cut','Copy','Paste','PasteText','PasteFromWord'],
['Undo','Redo','-','Find','Replace','-',,'Table','HorizontalRule','-','SelectAll','RemoveFormat'],
'/',
['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['Link','Unlink','Anchor'],
['Image','Flash','Smiley','SpecialChar','PageBreak'],
['Styles','Format','Font','FontSize'],
['TextColor','BGColor']
]
});
}
4、附錄一 其他屬性
//當(dāng)提交包含有此編輯器的表單時(shí)，是否自動(dòng)更新元素內(nèi)的數(shù)據(jù)
config.autoUpdateElement = true
//編輯器的z-index值
config.baseFloatZIndex = 10000
//設(shè)置是使用絕對(duì)目錄還是相對(duì)目錄，為空為相對(duì)目錄
config.baseHref = ''
//設(shè)置快捷鍵 從上往下依次是：獲取焦點(diǎn)，元素焦點(diǎn)，文本菜單，撤銷，重做，重做，鏈接，粗體，斜體，下劃線
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' ]
]
//設(shè)置快捷鍵 可能與瀏覽器快捷鍵沖突 plugins/keystrokes/plugin.js.
config.blockedKeystrokes =
[
CKEDITOR.CTRL + 66 /*B*/,
CKEDITOR.CTRL + 73 /*I*/,
CKEDITOR.CTRL + 85 /*U*/
]
//設(shè)置編輯內(nèi)元素的背景色的取值 plugins/colorbutton/plugin.js.
config.colorButton_backStyle =
{
element : 'span',
styles : { 'background-color' : '#(color)' }
}
//設(shè)置前景色的取值 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’
//是否在選擇顏色時(shí)顯示“其它顏色”選項(xiàng) plugins/colorbutton/plugin.js
config.colorButton_enableMore = false
//區(qū)塊的前景色默認(rèn)值設(shè)置 plugins/colorbutton/plugin.js
config.colorButton_foreStyle =
{
element : 'span',
styles : { 'color' : '#(color)' }
};
//所需要添加的CSS文件 在此添加 可使用相對(duì)路徑和網(wǎng)站的絕對(duì)路徑
config.contentsCss = './contents.css';
//文字方向
config.contentsLangDirection = 'rtl';//從左到右
//CKeditor的配置文件 若不想配置 留空即可
CKEDITOR.replace( 'myfiled', { customConfig : './config.js' } );
//界面的語言配置 設(shè)置為'zh-cn'即可
config.defaultLanguage = 'en';
//界面編輯框的背景色 plugins/dialog/plugin.js
config.dialog_backgroundCoverColor = 'rgb(255, 254, 253)'; //可設(shè)置參考
config.dialog_backgroundCoverColor = 'white' //默認(rèn)
//背景的不透明度 數(shù)值應(yīng)該在：0.0～1.0 之間 plugins/dialog/plugin.js
config.dialog_backgroundCoverOpacity = 0.5
//移動(dòng)或者改變?cè)貢r(shí) 邊框的吸附距離 單位：像素 plugins/dialog/plugin.js
config.dialog_magnetDistance = 20;
//是否拒絕本地拼寫檢查和提示 默認(rèn)為拒絕 目前僅firefox和safari支持 plugins/wysiwygarea/plugin.js.
config.disableNativeSpellChecker = true
//進(jìn)行表格編輯功能 如：添加行或列 目前僅firefox支持 plugins/wysiwygarea/plugin.js
config.disableNativeTableHandles = true; //默認(rèn)為不開啟
//是否開啟 圖片和表格 的改變大小的功能 config.disableObjectResizing = true;
config.disableObjectResizing = false //默認(rèn)為開啟
//設(shè)置HTML文檔類型
config.docType = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">'
//是否對(duì)編輯區(qū)域進(jìn)行渲染 plugins/editingblock/plugin.js
config.editingBlock = true
//編輯器中回車產(chǎn)生的標(biāo)簽
config.enterMode = CKEDITOR.ENTER_P //可選：CKEDITOR.ENTER_BR或CKEDITOR.ENTER_DIV
//是否使用HTML實(shí)體進(jìn)行輸出 plugins/entities/plugin.js
config.entities = true
//定義更多的實(shí)體 plugins/entities/plugin.js
config.entities_additional = '#39' //其中#代替了&
//是否轉(zhuǎn)換一些難以顯示的字符為相應(yīng)的HTML字符 plugins/entities/plugin.js
config.entities_greek = true
//是否轉(zhuǎn)換一些拉丁字符為HTML plugins/entities/plugin.js
config.entities_latin = true;
//是否轉(zhuǎn)換一些特殊字符為ASCII字符 如："This is Chinese: 漢語."轉(zhuǎn)換為："This is Chinese: 汉语."
plugins/entities/plugin.js
config.entities_processNumerical = false
//添加新組件
config.extraPlugins = 'myplugin'; //非默認(rèn) 僅示例
//使用搜索時(shí)的高亮色 plugins/find/plugin.js
config.find_highlight =
{
element : 'span',
styles : { 'background-color' : '#ff0', 'color' : '#00f' }
};
//默認(rèn)的字體名 plugins/font/plugin.js
config.font_defaultLabel = 'Arial';
//字體編輯時(shí)的字符集 可以添加常用的中文字符：宋體、楷體、黑體等 plugins/font/plugin.js
config.font_names = 'Arial;Times New Roman;Verdana';
//文字的默認(rèn)式樣 plugins/font/plugin.js
config.font_style =
{
element : 'span',
styles : { 'font-family' : '#(family)' },
overrides : [ { element : 'font', attributes : { 'face' : null } } ]
};
//字體默認(rèn)大小 plugins/font/plugin.js
config.fontSize_defaultLabel = '12px';
//字體編輯時(shí)可選的字體大小 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'
//設(shè)置字體大小時(shí) 使用的式樣 plugins/font/plugin.js
config.fontSize_style =
{
element : 'span',
styles : { 'font-size' : '#(size)' },
overrides : [ { element : 'font', attributes : { 'size' : null } } ]
};
//是否強(qiáng)制復(fù)制來的內(nèi)容去除格式 plugins/pastetext/plugin.js
config.forcePasteAsPlainText =false //不去除
//是否強(qiáng)制用“&”來代替“&”plugins/htmldataprocessor/plugin.js
config.forceSimpleAmpersand = false;
//對(duì)address標(biāo)簽進(jìn)行格式化 plugins/format/plugin.js
config.format_address = { element : 'address', attributes : { class : 'styledAddress' } };
//對(duì)DIV標(biāo)簽自動(dòng)進(jìn)行格式化 plugins/format/plugin.js
config.format_div = { element : 'div', attributes : { class : 'normalDiv' } };
//對(duì)H1標(biāo)簽自動(dòng)進(jìn)行格式化 plugins/format/plugin.js
config.format_h1 = { element : 'h1', attributes : { class : 'contentTitle1' } };
//對(duì)H2標(biāo)簽自動(dòng)進(jìn)行格式化 plugins/format/plugin.js
config.format_h2 = { element : 'h2', attributes : { class : 'contentTitle2' } };
//對(duì)H3標(biāo)簽自動(dòng)進(jìn)行格式化 plugins/format/plugin.js
config.format_h1 = { element : 'h3', attributes : { class : 'contentTitle3' } };
//對(duì)H4標(biāo)簽自動(dòng)進(jìn)行格式化 plugins/format/plugin.js
config.format_h1 = { element : 'h4', attributes : { class : 'contentTitle4' } };
//對(duì)H5標(biāo)簽自動(dòng)進(jìn)行格式化 plugins/format/plugin.js
config.format_h1 = { element : 'h5', attributes : { class : 'contentTitle5' } };
//對(duì)H6標(biāo)簽自動(dòng)進(jìn)行格式化 plugins/format/plugin.js
config.format_h1 = { element : 'h6', attributes : { class : 'contentTitle6' } };
//對(duì)P標(biāo)簽自動(dòng)進(jìn)行格式化 plugins/format/plugin.js
config.format_p = { element : 'p', attributes : { class : 'normalPara' } };
//對(duì)PRE標(biāo)簽自動(dòng)進(jìn)行格式化 plugins/format/plugin.js
config.format_pre = { element : 'pre', attributes : { class : 'code' } };
//用分號(hào)分隔的標(biāo)簽名字 在工具欄上顯示 plugins/format/plugin.js
config.format_tags = 'p;h1;h2;h3;h4;h5;h6;pre;address;div'
//是否使用完整的html編輯模式 如使用，其源碼將包含：<html><body></body></html>等標(biāo)簽
config.fullPage = false
//編輯器的高度
config.height = 200
//是否忽略段落中的空字符 若不忽略 則字符將以“”表示 plugins/wysiwygarea/plugin.js
config.ignoreEmptyParagraph = true
//在清除圖片屬性框中的鏈接屬性時(shí) 是否同時(shí)清除兩邊的<a>標(biāo)簽 plugins/image/plugin.js
config.image_removeLinkByEmptyURL = true
//界面的現(xiàn)實(shí)語言 可選擇"zh-cn"
config.language = true
//一組用逗號(hào)分隔的標(biāo)簽名稱，顯示在左下角的層次嵌套中 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'
//顯示子菜單時(shí)的延遲，單位：ms plugins/menu/plugin.js
config.menu_subMenuDelay = 400;
//當(dāng)執(zhí)行“新建”命令時(shí)，編輯器中的內(nèi)容 plugins/newpage/plugin.js
config.newpage_html=""
//當(dāng)從word里復(fù)制文字進(jìn)來時(shí)，是否進(jìn)行文字的格式化去除 plugins/pastefromword/plugin.js
config.pasteFromWordIgnoreFontFace = true; //默認(rèn)為忽略格式
//是否使用<h1><h2>等標(biāo)簽修飾或者代替從word文檔中粘貼過來的內(nèi)容 plugins/pastefromword/plugin.js
config.pasteFromWordKeepsStructure = false;
//從word中粘貼內(nèi)容時(shí)是否移除格式 plugins/pastefromword/plugin.js
config.pasteFromWordRemoveStyle = false
//對(duì)應(yīng)后臺(tái)語言的類型來對(duì)輸出的HTML內(nèi)容進(jìn)行格式化
config.protectedSource.push( /<\?[\s\S]*?\?>/g ); // PHP Code
config.protectedSource.push( //g ); // ASP Code
config.protectedSource.push( /(]+>[\s|\S]*?<\/asp:[^\>]+>)|(]+\/>)/gi ); // ASP.Net Code
默認(rèn)為空
//是否允許改變大小 plugins/resize/plugin.js
config.resize_enabled = true
//改變大小的最大高度 plugins/resize/plugin.js
config.resize_maxHeight = 3000;
//改變大小的最大寬度 plugins/resize/plugin.js
config.resize_maxWidth = 3000;
//改變大小的最小高度 plugins/resize/plugin.js
config.resize_minHeight = 250;
//改變大小的最小寬度 plugins/resize/plugin.js
config.resize_minWidth = 750;
//當(dāng)輸入：shift+Enter是插入的標(biāo)簽
config.shiftEnterMode = CKEDITOR.ENTER_P;//可選：CKEDITOR.ENTER_BR或CKEDITOR.ENTER_DIV
//可選界面包
config.skin = 'default';
//可選的表情替代字符 plugins/smiley/plugin.js.
config.smiley_descriptions = [
':)', ':(', ';)', ':D', ':/', ':P',
'', '', '', '', '', '',
'', ';(', '', '', '', '',
'', ':kiss', '' ];
//對(duì)應(yīng)的表情圖片 plugins/smiley/plugin.js
config.smiley_images = [
'regular_smile.gif','sad_smile.gif','wink_smile.gif','teeth_smile.gif','confused_smile.gif','tounge_smile.gif', 'embaressed_smile.gif','omg_smile.gif','whatchutalkingabout_smile.gif','angry_smile.gif','angel_smile.gif',
'shades_smile.gif','devil_smile.gif','cry_smile.gif','lightbulb.gif','thumbs_down.gif','thumbs_up.gif','heart.gif',
'broken_heart.gif','kiss.gif','envelope.gif'];
//表情的地址 plugins/smiley/plugin.js
config.smiley_path = 'plugins/smiley/images/'
//頁面載入時(shí)，編輯框是否立即獲得焦點(diǎn) plugins/editingblock/plugin.js plugins/editingblock/plugin.js.
config.startupFocus = false
//載入時(shí)，以何種方式編輯 源碼和所見即所得 "source"和"wysiwyg" plugins/editingblock/plugin.js.
config.startupMode ='wysiwyg'
//載入時(shí)，是否顯示框體的邊框 plugins/showblocks/plugin.js
config.startupOutlineBlocks = false
//是否載入樣式文件 plugins/stylescombo/plugin.js.
config.stylesCombo_stylesSet = 'default';
//以下為可選
config.stylesCombo_stylesSet = 'mystyles';
config.stylesCombo_stylesSet = 'mystyles:/editorstyles/styles.js';
config.stylesCombo_stylesSet = 'mystyles:http://www./editorstyles/styles.js';
//起始的索引值
config.tabIndex =0
//當(dāng)用戶鍵入TAB時(shí)，編輯器走過的空格數(shù)，( ) 當(dāng)值為0時(shí)，焦點(diǎn)將移出編輯框 plugins/tab/plugin.js
config.tabSpaces = 0
//默認(rèn)使用的模板 plugins/templates/plugin.js.
config.templates = 'default'
//用逗號(hào)分隔的模板文件plugins/templates/plugin.js.
config.templates_files =[ 'plugins/templates/templates/default.js' ]
//當(dāng)使用模板時(shí)，“編輯內(nèi)容將被替換”框是否選中 plugins/templates/plugin.js
config.templates_replaceContent = true;
//主題
config.theme = 'default';
//使用的工具欄 plugins/toolbar/plugin.js
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']
];
//工具欄是否可以被收縮 plugins/toolbar/plugin.js.
config.toolbarCanCollapse = true
//工具欄的位置 plugins/toolbar/plugin.js
config.toolbarLocation = 'top';//可選：bottom
//工具欄默認(rèn)是否展開 plugins/toolbar/plugin.js
config.toolbarStartupExpanded = true;
//撤銷的記錄步數(shù) plugins/undo/plugin.js
config.undoStackSize =20
//編輯器的寬度 plugins/undo/plugin.js
config.width = ""
5、上傳（自己沒試驗(yàn) 因?yàn)樗璧腸kfinder 沒有我需要的開發(fā)語言）
一下來自網(wǎng)絡(luò)搜索
在新版本中文件上傳方式有了很大的改變。它采用CKfinder這個(gè)插件來實(shí)現(xiàn)，首先還是需要下載一個(gè)CKfinder解壓到網(wǎng)站/CKfinder/下面
路徑也可以修改，修改后需要調(diào)用代碼、/CKfinder/config.ascx文件、/CKfinder/ckfinder.js文件
/CKfinder/config.ascx文件需要修改BaseUrl = "/新文件夾名/userfiles/";
/CKfinder/ckfinder.js文件需要修改CKFinder.DEFAULT_BASEPATH = '/新文件夾名/';
調(diào)用方式：
復(fù)制代碼 代碼如下:
<textarea cols="80" id="Text" name="Text" rows="10"></textarea>
<script type="text/javascript">
var editor = CKEDITOR.replace( 'Text');
CKFinder.SetupCKEditor(editor, '/新文件夾名（或默認(rèn)）/');
</script>
現(xiàn)在在打開編輯器的圖片、鏈接、flash，窗口就多了一個(gè)上傳選項(xiàng)卡，可以選擇上傳，還提供了瀏覽功能。
因?yàn)樯婕暗轿募A的訪問權(quán)限，功能與我的網(wǎng)站需求不符，所以我沒有使用它提供的默認(rèn)上傳，對(duì)他進(jìn)行了修改。
上傳方式的修改
我的圖片服務(wù)器是image.tiyu.cc而網(wǎng)站的服務(wù)器是http://www.jb51.net/，也不需要它提供的瀏覽功能，而且除了圖片上傳，不允許上傳其他的文件。
這樣就需要有三個(gè)地方需要修改，1.修改默認(rèn)上傳2.取消瀏覽功能3.取消文件、flash上傳功能。
CKeditor的上傳路徑設(shè)置在/CKfinder/ckfinder.js中，有一項(xiàng)設(shè)置是CKFinder.SetupCKEditor，它的下面有以下代碼，可以設(shè)置是否需要圖片、文件、flash的瀏覽路徑以及上傳路徑。
復(fù)制代碼 代碼如下:
//設(shè)置文件的瀏覽路徑
editorObj.config.filebrowserBrowseUrl = url ;
//設(shè)置圖片的瀏覽路徑
editorObj.config.filebrowserImageBrowseUrl = url + qs + 'type=' + ( imageType || 'Images' ) ;
//設(shè)置flash文件瀏覽路徑
editorObj.config.filebrowserFlashBrowseUrl = url + qs + 'type=' + ( flashType || 'Flash' ) ;
//設(shè)置文件上傳文件地址
editorObj.config.filebrowserUploadUrl = dir + "core/connector/" + ckfinder.ConnectorLanguage + "/connector."
+ ckfinder.ConnectorLanguage + "?command=QuickUpload&type=Files" ;
//設(shè)置圖片文件上傳地址
editorObj.config.filebrowserImageUploadUrl = dir + "core/connector/" + ckfinder.ConnectorLanguage + "/connector."
+ ckfinder.ConnectorLanguage + "?command=QuickUpload&type=" + ( imageType || 'Images' ) ;
//設(shè)置flash文件上傳地址
editorObj.config.filebrowserFlashUploadUrl = dir + "core/connector/" + ckfinder.ConnectorLanguage + "/connector."
+ ckfinder.ConnectorLanguage + "?command=QuickUpload&type=" + ( flashType || 'Flash' ) ;
根據(jù)CKeditor是根據(jù)上傳路徑的有無來控制是否顯示相應(yīng)的上傳標(biāo)簽，瀏覽按鈕也是。
根據(jù)上面的需求，設(shè)置如下：
復(fù)制代碼 代碼如下:
//設(shè)置文件的瀏覽路徑
editorObj.config.filebrowserBrowseUrl = "";
//設(shè)置圖片的瀏覽路徑
editorObj.config.filebrowserImageBrowseUrl = "";
//設(shè)置flash文件瀏覽路徑
editorObj.config.filebrowserFlashBrowseUrl = "";
//設(shè)置文件上傳文件地址
editorObj.config.filebrowserUploadUrl = "";
//設(shè)置圖片文件上傳地址
editorObj.config.filebrowserImageUploadUrl = "新地址";
//設(shè)置flash文件上傳地址
editorObj.config.filebrowserFlashUploadUrl = "";
設(shè)置到這里再次打開編輯器的相應(yīng)窗口就會(huì)發(fā)現(xiàn)除了圖片上傳按鈕外其他的瀏覽上傳都隱藏掉了。
創(chuàng)建新的上傳文件
具體步驟是，首先創(chuàng)建一個(gè)新的上傳接收文件，接受并保存上傳的文件，然后將文件的路徑反饋給編輯器。
編輯器的接收是通過一個(gè)方法實(shí)現(xiàn)的，具體如下：
CKEDITOR.tools.callFunction(fnID, 'FileUrl', 'Message');</script>
其中fnID是調(diào)用的實(shí)際方法的編號(hào)，不同的瀏覽器，CKeditor調(diào)用不同的方法。
我們只需要調(diào)用上面的方法就可以了，具體上傳成功后，在頁面上輸出一下代碼
<script type="text/javascript">window.parent.CKEDITOR.tools.callFunction(fnID, 'http://www.jb51.net/image.jpg', '上傳成功');</script>
FileUrl、Message，可以只有一個(gè)，也可以同時(shí)存在。Message主要應(yīng)用于上傳失敗時(shí)的提示信息。
關(guān)于fnID,這個(gè)具體的說明不是很清楚，但是通過代碼發(fā)現(xiàn)FF瀏覽器它的值是2，其他的瀏覽器是1，通過這個(gè)可以得出結(jié)論是，通過它來告知CKeditor來調(diào)用哪個(gè)方法接受上傳反饋信息。
這個(gè)值，可以通過我們自己的程序去獲得。但是更好的方式是CKeditor給我們提供的值，當(dāng)我們?cè)O(shè)置editorObj.config.filebrowserImageUploadUrl = "新地址"時(shí)CKeditor會(huì)自動(dòng)為我們?cè)黾訋讉€(gè)個(gè)url參數(shù)：
新地址?CKEditor=Text&CKEditorFuncNum=2&langCode=zh-cn
其中CKEditorFuncNum就是我們需要的fnID，我們可以直接獲取到，然后反饋回來就好了。
如果選擇跨域上傳，只需要在當(dāng)前域（http://www.jb51.net/）設(shè)置一個(gè)GetFile.aspx他有三個(gè)參數(shù)，分別是接受fnID，F(xiàn)ileUrl、Message這三個(gè)值，在我們的editorObj.config.filebrowserImageUploadUrl中設(shè)置成http://Image.jb51.net/upfile.aspx?backUrl=http://www.jb51.net/GetFile.aspx，就可以了，image.jb51.net域的upfile.aspx接受到文件，處理完成之后：
復(fù)制代碼 代碼如下:
ImageUrl="http://image.jb51.net/UpFile/2009/11/1/2009111201346_695.jpg"
Message="根據(jù)錯(cuò)誤與否，設(shè)置，沒有錯(cuò)誤可以為空"
CKEditorFuncNum=request("CKEditorFuncNum")
response.Redirect("http://www.jb51.net/GetFile.php?ImageUrl="+ ImageUrl + "&Message=" + Message + "&CKEditorFuncNum=" + CKEditorFuncNum)
具體可以查看更詳細(xì)的官方幫助
http://docs./ckeditor_api/symbols/CKEDITOR.config.html
|
