Ckeditor ckfinder2.0.1超强整合 完整版 实践版 PHP
目录
php开发--使用 CKEditor 和 CKFinder 实现上传功能... 1
1. 下载安装 CKEditor: 1
2. 下载安装 CKFinder: 1
3. 在网页中使用 CKEditor 和 CKFinder: 2
4. 配置CKFinder进行上传图片,Flash等。... 3
5.Ckfinder实现普通文件上传... 4
ckfinder中实现文件上传后按当前时间改名... 5
CKEditor 优化配置... 6
精简Ckeditor. 6
提速:禁用拼写检查... 6
CKFinder 单独使用... 9
ckfinder去掉注册的提示信息... 9
php开发--使用 CKEditor 和 CKFinder 实现上传功能
1. 下载安装 CKEditor:
http://ckeditor.com/
解压下载到的CKEditor放到网站的路径中即可
简单配置ckeditor,打开config.js,添加如下内容
2. 下载安装 CKFinder:
http://ckfinder.com/download
解压下载到的CKEditor放到与CKEditor同一目录中即可
3. 在网页中使用 CKEditor 和 CKFinder:
CKEditor 实际是替换一个 textarea 标签,所以把textarea放到一个form中,当提交到php服务器端,使用$_GET['xxx'] 或者 $_POST['xxx'] 取得编辑好的数据。注意,因为 CKEditor 要替换 textarea,所以相应的javascript 代码"CKEDITOR.replace(xxxxxx)" 要放在 textarea 的后面。
最简单的方法,直接使用下面的例子修改一下即可。可以在网页中看到 CKEditor 了,兴奋吧。
CKEditor
" v:shapes="_x0000_s1031">
注意:路径一定要正确,否者无法显示。
4. 配置CKFinder进行上传图片,Flash等。
到这里,点击 "Image" 按钮,在弹出的窗口中的 "Upload" 标签中已经看到上传按钮了,但是在上传文件时失败。因为CKFinder还没有配置好。需要创建上传文件的目录和修改 ckfinder/config.php 里的三个地方:
a. 创建保存上传文件的目录,如uploads,
其路径为/Users/Biao/Sites/php/uploads/
[For Linux: 把其权限设置为php server可读写,最简单的是 chmod 777 uploads 这样php server才有权限往里面保存文件.]
b. 找到配置文件第32行,把 function CheckAuthentication() { return false; }
修改成 function CheckAuthentication() { return true; }
c. 找到第63行,把 $baseUrl 的值改成保存上传文件存目录的URL,
如 $baseUrl = '/~Biao/php/uploads/';
怎么取得这个 URL 呢?其实很简单,在这个uploads文件夹里创建一个简单的path.php文件:
<?php echo $_SERVER["PHP_SELF"] ?>,然后从浏览器里访问,
就可以得到 /~Biao/php/uploads/path.php,
则 uploads 文件夹的URL是 /~Biao/php/uploads/
d. 找到第82行,删除 $baseDir = resolveUrl($baseUrl); 修改 $baseDir 为上传文件目录的绝对路径,
如$baseDir ='/Users/Biao/Sites/php/uploads/';
这是因为resolveUrl($baseUrl)函数不能正常工作。
可以这样也可以不修改,新版本的已经可以正常工作了。
至此,可以使用 CKEditor 和 CKFinder 上传文件了。
对上面这个小例子中服务器端的b.php代码:
" v:shapes="_x0000_s1029">
可以看到,在点击submit按钮后,服务器端收到了CKEditor中的内容,并使用echo输出,生成一个与CKEditor里面编辑的完全一样的内容。在服务器端可以把收到的内容保存到数据库中。然后再读出在相应的页面显示出来。
ckeditor界面
昨天 15:41 上传
下载附件(15.28 KB)
ckeditor
Ckfinder界面
昨天 15:41 上传
下载附件(24.79 KB)
ckfinder
5.Ckfinder实现普通文件上传
其实上面的代码已经能够实现上传了只是找不到位置,应该这样操作即可成功。
点“插入/编辑超链接”,再点“上传”选项卡,选文件后点“上传到服务器上”
昨天 16:36 上传
就可以实现了,呵呵。是不非常简单呀。
ckfinder中实现文件上传后按当前时间改名
还有一个问题就是用ckfinder上传的文件不会重命名,对于中文文件就不能识别了。 |
CKEditor 优化配置
精简Ckeditor
在部署到Web服务器上时,下列文件夹和文件都可以删除:
/_samples :示例文件夹;
/_source :未压缩源程序;
/lang文件夹下除 zh-cn.js、en.js 以外的文件(也可以根据需要保留其他语言文件);
根目录下的 changes.html(更新列表),install.html(安装指向),license.html(使用许可);
/skins 目录下不需要的皮肤,一般用V2(简单,朴素) ,如果只保留V2则必须在config.js中指定皮肤。
提速:禁用拼写检查
ckeditor 的自动拼写检查功能(通过与svn.spellchecker.net网站交互完成),使得 ckeditor 的装载非常的慢,有时显得录入反应相当的慢。拼写检查对于中文是多余了,所以可以把此功能屏蔽掉。官方网站的说法是 Scayt' (spell checker as yout type)
修改
ckeditor_3.3.1config.js ( 以此版本为例 )
Js代码
CKEDITOR.editorConfig = function( config )
{
......
config.disableNativeSpellChecker = false
;
config.scayt_autoStartup = false;
......
};
下面是官网对这两个参数的说明( docs.cksource.com ):
参数
disableNativeSpellChecker 的说明 :
Disables the built-in spell checker while typing natively available in the
browser (currently Firefox and Safari only).
Even if word suggestions will not appear in the CKEditor context menu, this
feature is useful to help quickly identifying misspelled words.
This setting is currently compatible with Firefox only due to limitations in
other browsers.
参数
scayt_autoStartup 的说明 :
If enabled (true), turns on SCAYT automatically after loading the editor.
CKEditor 增加字体:
修改ckeditorconfig.js
Java代码
CKEDITOR.editorConfig = function( config )
{
config.font_names = '宋体/宋体;黑体/黑体;仿宋/仿宋_GB2312;楷体/楷体_GB2312;隶书/隶书;幼圆/幼圆;'+ config.font_names ;
};其中,楷体/楷体_GB2312,表示在ckeditor中的字体显示名称为“楷体”,系统字体名称为“楷体_GB2312”。
CKEditor 添加自定义字体:
修改ckeditorconfig.js
Config.js代码
config.contentsCss = 'fonts.css';
// 添加新的字体到 CKEditor 的字体列表
config.font_names = 'fontnametodisplay/yourfontname;' + config.font_names;
在
fonts.css 中添加@font-face 属性:
Fonts.css代码
@font-face {
font-family: "yourfontname";
src: url( ../fonts/font.eot ); /* IE */
src: local("realfontname"),
url("../fonts/font.TTF") format("truetype");
/*non-IE*/
}
ckfinder改进:多用户,自动按年月划分文件夹
默认的ckfinder只是单用户,或者说,多个用户共用同一个图片目录。所有上传的image全部拥挤在一个文件夹。 |
CKFinder 单独使用
将如下js代码加入到html文件中 |
" v:shapes="_x0000_s1027">
对应input的代码。
" v:shapes="_x0000_s1026">
ckfinder去掉注册的提示信息
网上找了好久都是旧版本的破解方法,只有自己动手找了。
找到ckfinderskinsv1app.css
#files_view.files_message .message_content{display:block;}
改为
#files_view.files_message .message_content{display:none;}
另外还有左下角也有对应的提示,找了半天也没找到到底在哪个地方,高手请自行解决
附ckeditor 详细配置信息
CKeditor編輯器選項配置
CKeditor像是一個WEB的小Word,當然也預設了很多相關編輯項目,相信很多人需要調整,那些項目要用那些不要用
在ckeditor目錄下,有個Config.js
未配置的內容如下:
CKEDITOR.editorConfig = function( config )
{
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
};
目前配置內容如下:
CKEDITOR.editorConfig = function( config )
{
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
config.toolbar = 'MXICToolbar';
config.toolbar_MXICToolbar =
[
['Source','-','NewPage','Save','Preview','-','Templates'],
['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker',
'Scayt'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
'/',
['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['Link','Unlink','Anchor'],
['Image','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
'/',
['Styles','Format','Font','FontSize'],
['TextColor','BGColor'],
['Maximize','ShowBlock']
];
};
附註-以下是一些常用的配置參數:
// 介面語言,默認為 '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 , 'toolbarFocus' ], //獲取焦點
[ CKEDITOR.ALT + 122 , 'elementsPathFocus' ], //元素焦點
[ CKEDITOR.SHIFT + 121 , 'contextMenu' ], //文本功能表
[ CKEDITOR.CTRL + 90 , 'undo' ], //撤銷
[ CKEDITOR.CTRL + 89 , 'redo' ], //重做
[ CKEDITOR.CTRL + CKEDITOR.SHIFT + 90 , 'redo' ], //
[ CKEDITOR.CTRL + 76 , 'link' ], //鏈結
[ CKEDITOR.CTRL + 66 , 'bold' ], //粗體
[ CKEDITOR.CTRL + 73 , 'italic' ], //斜體
[ CKEDITOR.CTRL + 85 , 'underline' ], //下劃線
[ CKEDITOR.ALT + 109 , 'toolbarCollapse' ]
]
//設置快捷鍵 可能與流覽器快捷鍵衝突 plugins/keystrokes/plugin.js.
config.blockedKeystrokes = [
CKEDITOR.CTRL + 66 ,
CKEDITOR.CTRL + 73 ,
CKEDITOR.CTRL + 85
]
//設置編輯內元素的背景色的取值 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 = 'rgb(255, 254, 253)'; //可設置參考
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
config.entities_greek = true;
//是否轉換一些拉丁字元為HTML plugins/entities/plugin.js
config.entities_latin = true;
//是否轉換一些特殊字元為ASCII字元 如"This
is Chinese: 漢語."轉換為"This
is Chinese: 汉语." plugins/entities/plugin.js
config.entities_processNumerical = false;
//添加新組件
config.extraPlugins = 'myplugin'; //非默認 僅示例
//使用搜索時的高亮色 plugins/find/plugin.js
config.find_highlight = {
element : 'span',
styles : { 'background-color' : '#ff0', 'color' : '#00f' }
};
//默認的字體名 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.forceSimpleAmpersand = false;
//對address標籤進行格式化
plugins/format/plugin.js
config.format_address = { element : 'address', attributes : { class :
'styledAddress' } };
//對DIV標籤自動進行格式化
plugins/format/plugin.js
config.format_div = { element : 'div', attributes : { class : 'normalDiv' } };
//對H1標籤自動進行格式化
plugins/format/plugin.js
config.format_h1 = { element : 'h1', attributes : { class : 'contentTitle1' }
};
//對H2標籤自動進行格式化
plugins/format/plugin.js
config.format_h2 = { element : 'h2', attributes : { class : 'contentTitle2' }
};
//對H3標籤自動進行格式化
plugins/format/plugin.js
config.format_h1 = { element : 'h3', attributes : { class : 'contentTitle3' }
};
//對H4標籤自動進行格式化
plugins/format/plugin.js
config.format_h1 = { element : 'h4', attributes : { class : 'contentTitle4' }
};
//對H5標籤自動進行格式化
plugins/format/plugin.js
config.format_h1 = { element : 'h5', attributes : { class : 'contentTitle5' }
};
//對H6標籤自動進行格式化
plugins/format/plugin.js
config.format_h1 = { element : 'h6', attributes : { class : 'contentTitle6' }
};
//對P標籤自動進行格式化
plugins/format/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
config.pasteFromWordRemoveStyle = false;
//對應後臺語言的類型來對輸出的HTML內容進行格式化,默認為空
config.protectedSource.push( /<?[sS]*??>/g ); // PHP Code
config.protectedSource.push( //g ); // ASP Code
config.protectedSource.push(
/(]+>[s|S]*?</asp:[^>]+>)|(]+/>)/gi ); // ASP.Net Code
//當輸入:shift+Enter時插入的標籤
config.shiftEnterMode = CKEDITOR.ENTER_P; //可選:CKEDITOR.ENTER_BR或CKEDITOR.ENTER_DIV
//可選的表情替代字元 plugins/smiley/plugin.js.
config.smiley_descriptions = [
':)', ':(', ';)', ':D', ':/', ':P',
'', '', '', '', '', '',
'', ';(', '', '', '', '',
'', ':kiss', '' ];
//對應的表情圖片 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/';
//頁面載入時,編輯框是否立即獲得焦點 plugins/editingblock/plugin.js plugins/editingblock/plugin.js.
config.startupFocus = false;
//載入時,以何種方式編輯 源碼和所見即所得 "source"和"wysiwyg" plugins/editingblock/plugin.js.
config.startupMode ='wysiwyg';
//載入時,是否顯示框體的邊框 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.example.com/editorstyles/styles.js';
//起始的索引值
config.tabIndex = 0;
//當用戶鍵入TAB時,編輯器走過的空格數,( )
當值為0時,焦點將移出編輯框
plugins/tab/plugin.js
config.tabSpaces = 0;
//默認使用的範本 plugins/templates/plugin.js.
config.templates = 'default';
//用逗號分隔的範本檔plugins/templates/plugin.js.
config.templates_files = [ 'plugins/templates/templates/default.js' ]
//當使用範本時,“編輯內容將被替換”框是否選中 plugins/templates/plugin.js
config.templates_replaceContent = true;
//主題
config.theme = 'default';
//撤銷的記錄步數 plugins/undo/plugin.js
config.undoStackSize =20;
// 在 CKEditor 中集成 CKFinder,注意 ckfinder 的路徑選擇要正確。
//CKFinder.SetupCKEditor(null, '/ckfinder/');