24h購物| | PChome| 登入
2023-08-04 02:36:17| 人氣4| 回應0 | 上一篇 | 下一篇
推薦 0 收藏 0 轉貼0 訂閱站台

網頁設計 CKeditor 4.4.5 網頁編輯器與CKfi

  1. $baseUrl ='/uploads/';  //伺服器上傳路徑
複製代碼

Step3
開啟ckfinder / config.php,找到33行將return false改成return true。

Step4接著到63行處,設定上傳的目次位置。


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

自訂編纂器對象列:

  1. <script src="ckeditor/ckeditor.js"></script>
複製代碼



改成



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

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


CKeditor與CKfinder彼此的搭配下,不僅可實現即見即所得的HTML編纂器之外,同時還可以上傳檔案,且完全不消寫任何的程式碼,只要設定一下上傳目錄位置,與開啟上傳的機制,這樣就完成囉!夠簡單吧~而這二個對象若要用於貿易用處時,獲得官網查看相幹授權的部分。

如出現這問題
The file browser is disabled for security reasons. Please contact your system administrator and check the CKFinder configuration file.

請點竄 /etc/php.ini

  1. <textarea class="ckeditor" cols="40" id="editor1" name="content" rows="10"></textarea>
複製代碼

開啟上傳功能:

不管是使用無名、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

修改上述論述便可

  1. session.auto_start = 0
複製代碼

1.jpg

網頁設計

新增一個PHP網頁,新增一個form表單,並放入一個textarea的文字框,而且class="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檔案
複製代碼


如果是Cpanel 的 easyApache 4因為有很多PHP版本,所以先在該網站下放入 phpinfo();
找出相對版本,我以php5.5為例
找到

 

最後在<header></header>中到場

  1. vi /opt/cpanel/ea-php55/root/etc/php.ini
  2.  
複製代碼
  1. session.auto_start = 1
複製代碼

 

網頁設計Step6
發佈看一下囉!這時候候原來醜醜的文字框,立刻釀成超炫的HTML編纂器,馬上來測試一下,點一下圖片圖示,看是不是能上傳。 

  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. 對象列參數列表:
  11. 'Source':原始碼
  12. 'Save':貯存
  13. 'NewPage':開新檔案
  14. 'Preview':預覽
  15. 'Templates':樣版
  16.  
  17. 'Cut':剪下
  18. 'Copy':複製
  19. 'Paste':貼上
  20. 'PasteText':貼為文字格式
  21. 'PasteFromWord':從word 貼上
  22. 'Print':列印
  23. 'SpellChecker':拼字查抄
  24. 'Scayt':即時拼寫搜檢
  25.  
  26. 'Undo':上一步
  27. 'Redo':重作
  28. 'Find':尋覓
  29. 'Replace':代替網頁設計
  30. 'SelectAll':全選
  31. 'RemoveFormat':肅清格式
  32.  
  33. 'Form':表單
  34. 'Checkbox':核取方塊
  35. 'Radio':單選按鈕
  36. 'TextField':文字方塊
  37. 'Textarea':文字區域
  38. 'Select':選單
  39. 'Button':按鈕
  40. 'ImageButton':影像按鈕
  41. 'HiddenField':潛藏欄位
  42.  
  43. 'Bold':粗體
  44. 'Italic':斜體
  45. 'Underline':底線
  46. 'Strike':刪除線
  47. 'Subscript':下標
  48. 'Superscript':上標
  49. 'NumberedList':編號清單
  50. 'BulletedList':項目清單
  51. 'Outdent':減少縮排
  52. 'Indent':增添縮排
  53. 'Blockquote':引用文字
  54.  
  55. 'JustifyLeft':靠左對齊
  56. 'JustifyCenter':置中
  57. 'JustifyRight':靠右對齊
  58. 'JustifyBlock':擺佈對齊
  59.  
  60. 'Link':超保持
  61. 'Unlink':移除超保持
  62. 'Anchor':錨點
  63.  
  64. 'Image':圖片影象
  65. 'Flash':Flash
  66. 'Table':表格
  67. 'HorizontalRule':程度線
  68. 'Smiley':表情符號
  69. 'SpecialChar':特殊符號
  70. 'PageBreak':分頁符號
  71.  
  72. 'Styles':樣式
  73. 'Format':格局
  74. 'Font':字體
  75. 'FontSize':巨細
  76.  
  77. 'TextColor':文字色彩
  78. 'BGColor':靠山顏色
  79.  
  80. 'Maximize':最大化
  81. 'ShowBlocks':顯示區塊
  82. 'About':關於CKEditor
複製代碼

台長: kirkgd2
人氣(4) | 回應(0)| 推薦 (0)| 收藏 (0)| 轉寄
全站分類: 美食情報(食記、食譜、飲品) | 個人分類: NetYea |
此分類下一篇:網頁設計 毛病訊息.stk500_getsync
此分類上一篇:網頁設計 若何用bing登錄網站

是 (若未登入"個人新聞台帳號"則看不到回覆唷!)
* 請輸入識別碼:
請輸入圖片中算式的結果(可能為0) 
(有*為必填)
TOP
詳全文