Border的快樂生活記錄

相信在開發網頁程式的時候  html編輯器是很常用到的東西

今天來介紹一下 CKEditor4 設定的部分

1.請先到官方下載完整檔案

2.編輯CKEditor資料夾裡面的 config.js  配置如下

CKEDITOR.editorConfig = function( config ) {

config.uiColor = '#EFDFFF';
config.height = 350;
config.language = 'zh';

// 關閉語法過濾器  老實說這蠻重要的  不關掉它  很多語法會不見
config.allowedContent=true;

// 移掉自己會出現的<p>
config.enterMode = CKEDITOR.ENTER_BR;
config.shiftEnterMode = CKEDITOR.ENTER_P;

//工具列設定
config.toolbar = 'TadToolbar';
config.toolbar_TadToolbar =
[
['Source','-'],

['Maximize','Cut','Copy','Paste','PasteText','PasteFromWord'],

['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],

['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
['TextColor','BGColor','-','NumberedList','BulletedList',],
'/',

['Outdent','Indent','Iineheight'],

['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],

['Link','Unlink','Anchor'],

['Image','Flash','Table','HorizontalRule','SpecialChar','PageBreak'],
['Format','Font','FontSize']

];

config.font_names = 'Arial;Arial Black;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana;新細明體;細明體;標楷體;微軟正黑體';
//config.FontSize = 'Arial;Arial Black;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana;新細明體;細明體;標楷體;微軟正黑體';
config.fontSize_sizes ='8/8px;9/9px;10/10px;11/11px;12/12px;13/13px;14/14px;15/15px;16/16px;17/17px;18/18px;19/19px;20/20px;21/21px;22/22px;23/23px;24/24px;25/25px;26/26px;28/28px;36/36px;48/48px;72/72px'

//開啟圖片上傳功能
config.filebrowserBrowseUrl = 'html_edit_upload/ckfinder.html';
config.filebrowserImageBrowseUrl = 'html_edit_upload/ckfinder.html?Type=Image';
config.filebrowserFlashBrowseUrl = 'html_edit_upload/ckfinder.html?Type=Flash';
config.filebrowserUploadUrl = 'html_edit_upload/core/connector/php/connector.php?command=QuickUpload&type=Files';
config.filebrowserImageUploadUrl = 'html_edit_upload/core/connector/php/connector.php?command=QuickUpload&type=Image';
config.filebrowserFlashUploadUrl = 'html_edit_upload/core/connector/php/connector.php?command=QuickUpload&type=Flash';

 

};

 

3. 再來就要加入編輯器到網頁上  先引入js  

 <script type="text/javascript" src="html_edit/ckeditor.js"></script>
html_edit 就是 CKEditor的目錄 我改了名稱

 

4.在頁面上的textarea加上class

<textarea name='' rows=10 cols=20 class="ckeditor"></textarea>

 

5.這樣編輯器就完成了 但是不能上傳檔案
所以再來下載 CKFinder

 

6.下載完後把目錄改成 html_edit_upload 修改 config.php

更改上傳路徑設定

  // 個人家目錄
  $userid_folder=$_SESSION['car']['CKuserid'];

 

  // 路徑設定
  $baseUrl = "/userfiles/".$userid_folder."/";

 

 

7.再修改 config.js

加上 config.defaultLanguage = 'zh-tw'; // 語言為繁體中文

 

8.懶的設定的就下載我的吧  點我下載

 

 

 

維度自動免費架站系統，讓你快速擁有自己的網站
維度架站(新版系統)
維度架站
維度雲商城