TShopping

 找回密碼
 註冊
搜索
查看: 9837|回復: 8

[教學] CKeditor 4.4.5 網頁編輯器與CKfinder 2.4 上傳整合應用

  [複製鏈接]
發表於 2013-11-25 18:55:45 | 顯示全部樓層 |閱讀模式
 
Push to Facebook Push to Plurk Push to Twitter 
  無論是使用無名、Pixnet、Xuite或Wordpress...等平台,在管理後台新增文章,都會有一個很像Word的編輯器,透過此編輯器就可輕鬆撰寫文章,並且還可以加粗體變換字體顏色超連結....與圖片上傳等功能,即便完全不懂任何的HTML語法,也可編輯出一個漂亮的文章頁面出來,並且邊製作還會邊顯示結果,這是個相當方便的功能,而這麼棒的功能難不成要自已寫,寫完不只天黑可能都爆肝了,所以要多加善用資源,今天梅干就來分享一個好用的即見即所得HTML文章編輯器CKeditor,與CKfinder上傳元件讓編輯器不只單單可編輯,同時還可上傳檔案甚至直瀏覽伺器服中的檔案,且完全不用寫任何的程式碼,只要設定一下,立即就打造自已專屬的文章編輯器囉!

CKeditor(編輯器)/CKfinder(上傳元件)下載:
編輯器:CKeditor
支援語法:PHP、ASP、ASP.NET、CF
元件版本:4.4.5
官方展示:http://ckeditor.com/demo
官方下載:http://ckeditor.com/download

上傳元件:CKfinder
支援語法:PHP、ASP、ASP.NET、CF
元件版本:2.4
官方展示:http://ckfinder.com/demo
官方下載:http://ckfinder.com/download

Step1下載完畢後,將二個元件放在同一目錄,並新增upload資料夾,用來存放上傳檔案。Step2開啟ckeditor / config.js,分別新增以下語法,控制編輯器選項與啟用上傳功能。

自訂編輯器工具列:
  1. ['Source','-','Templates','-','Cut','Copy','Paste'],
  2. ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
  3. ['Link','Unlink','Anchor'],
  4. ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
  5. '/', ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
  6. ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
  7. ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
  8. ['Format','FontSize','-','TextColor','BGColor']

  9. 工具列參數列表:
  10. 'Source':原始碼
  11. 'Save':儲存
  12. 'NewPage':開新檔案
  13. 'Preview':預覽
  14. 'Templates':樣版

  15. 'Cut':剪下
  16. 'Copy':複製
  17. 'Paste':貼上
  18. 'PasteText':貼為文字格式
  19. 'PasteFromWord':從word 貼上
  20. 'Print':列印
  21. 'SpellChecker':拼字檢查
  22. 'Scayt':即時拼寫檢查

  23. 'Undo':上一步
  24. 'Redo':重作
  25. 'Find':尋找
  26. 'Replace':取代
  27. 'SelectAll':全選
  28. 'RemoveFormat':清除格式

  29. 'Form':表單
  30. 'Checkbox':核取方塊
  31. 'Radio':單選按鈕
  32. 'TextField':文字方塊
  33. 'Textarea':文字區域
  34. 'Select':選單
  35. 'Button':按鈕
  36. 'ImageButton':影像按鈕
  37. 'HiddenField':隱藏欄位

  38. 'Bold':粗體
  39. 'Italic':斜體
  40. 'Underline':底線
  41. 'Strike':刪除線
  42. 'Subscript':下標
  43. 'Superscript':上標
  44. 'NumberedList':編號清單
  45. 'BulletedList':項目清單
  46. 'Outdent':減少縮排
  47. 'Indent':增加縮排
  48. 'Blockquote':引用文字

  49. 'JustifyLeft':靠左對齊
  50. 'JustifyCenter':置中
  51. 'JustifyRight':靠右對齊
  52. 'JustifyBlock':左右對齊

  53. 'Link':超連結
  54. 'Unlink':移除超連結
  55. 'Anchor':錨點

  56. 'Image':圖片影像
  57. 'Flash':Flash
  58. 'Table':表格
  59. 'HorizontalRule':水平線
  60. 'Smiley':表情符號
  61. 'SpecialChar':特殊符號
  62. 'PageBreak':分頁符號

  63. 'Styles':樣式
  64. 'Format':格式
  65. 'Font':字體
  66. 'FontSize':大小

  67. 'TextColor':文字顏色
  68. 'BGColor':背景顏色

  69. 'Maximize':最大化
  70. 'ShowBlocks':顯示區塊
  71. 'About':關於CKEditor
複製代碼
開啟上傳功能:
  1. config.filebrowserBrowseUrl = 'ckfinder/ckfinder.html';
  2. config.filebrowserImageBrowseUrl = 'ckfinder/ckfinder.html?Type=Images';
  3. config.filebrowserFlashBrowseUrl = 'ckfinder/ckfinder.html?Type=Flash';
  4. config.filebrowserUploadUrl = 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files'; //可上傳一般檔案
  5. config.filebrowserImageUploadUrl = 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images';//可上傳圖檔
  6. config.filebrowserFlashUploadUrl = 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash';//可上傳Flash檔案
複製代碼
Step3
開啟ckfinder / config.php,找到33行將return false改成return true。

Step4接著到63行處,設定上傳的目錄位置。
  1. $baseUrl ='/uploads/';  //伺服器上傳路徑
複製代碼
新增一個PHP網頁,新增一個form表單,並放入一個textarea的文字框,並且class="ckeditor"一定要這樣設定
  1. <textarea class="ckeditor" cols="40" id="editor1" name="content" rows="10"></textarea>
複製代碼
最後在<header></header>中加入
  1. <script src="ckeditor/ckeditor.js"></script>
複製代碼
Step6
發佈看一下囉!這時候原來醜醜的文字框,立即變成超炫的HTML編輯器,馬上來測試一下,點一下圖片圖示,看是否能上傳。 1.jpg

Step7接著點選上傳頁籤,再點選【選擇檔案】。
選好檔案後,再按上傳至伺服器就行囉!
2.jpg

Step 8哈~上傳成功! (若是Liunx主機請將資料夾的權限設為777才行喔!)
3.jpg

CKeditor與CKfinder相互的搭配下,不但可實現即見即所得的HTML編輯器以外,同時還可以上傳檔案,且完全不用寫任何的程式碼,只要設定一下上傳目錄位置,與開啟上傳的機制,這樣就完成囉!夠簡單吧~而這二個工具若要用於商業用途時,得到官網查看相關授權的部分。


 

臉書網友討論
發表於 2013-11-25 21:20:45 | 顯示全部樓層
牛X海海!!!

版主招募中

發表於 2013-12-26 14:43:10 | 顯示全部樓層
有了這個工具就不用開記事本寫語法了


發表於 2014-1-2 17:14:12 | 顯示全部樓層
好啊楼主,没想到啊,太好了












淘宝网女装


發表於 2014-1-30 03:36:35 | 顯示全部樓層
真不錯的工具 下載來試用看看


發表於 2014-10-3 13:03:22 | 顯示全部樓層
真不錯的工具,感謝分享,趕快來試用看看


 樓主| 發表於 2014-10-29 11:18:03 | 顯示全部樓層
已經更新到Ckeditor 4.4.5嚕


發表於 2015-2-5 12:13:47 | 顯示全部樓層
樓主大大,不好意思想請教您一下
我按照你的方式,也有上網查了一些資料
但是按鈕始終不會出現,不知道您是否知道原因!

附上code

CKEDITOR.editorConfig = function( config ) {
        config.toolbar = 'TadToolbar';
        config.toolbar_TadToolbar = [
                [ 'Source','-','Save','NewPage','DocProps','Preview','Print','-','Templates' ],
                [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ],
                [ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt' ],
                [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ],
                '/',
                [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ],
                [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ],
                [ 'Link','Unlink','Anchor' ],
                [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe' ],
                '/',
                [ 'Styles','Format','Font','FontSize' ],
                [ 'TextColor','BGColor' ],
                [ 'Maximize', 'ShowBlocks','-','About' ]
];
}


未命名.jpg
發表於 2016-8-30 15:27:35 | 顯示全部樓層
你加油吧!!!












通过UL认证12V10A交换机电源


您需要登錄後才可以回帖 登錄 | 註冊 |

本版積分規則



Archiver|手機版|小黑屋|免責聲明|TShopping

GMT+8, 2016-12-10 17:18 , Processed in 0.062616 second(s), 23 queries .

本論壇言論純屬發表者個人意見,與 TShopping綜合論壇 立場無關 如有意見侵犯了您的權益 請寫信聯絡我們。

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表