模組使用tadtools模組的ckeditor編輯器套件方法(Xoops模組開發)

最近剛好要開發新Xoops模組，需要用到ckeditor編輯器跟圖片上傳功能，之前是有修改好的ckeditor編輯器套件加上CKFinder破解版(可無限上傳圖片跟刪除圖片無天數限制)，可是已經是舊版本了，會跟新版瀏覽器有兼容問題，所以上ckeditor官網查了一下目前最新版本為ckeditor4.7版，下載回來用安裝方法跟之前一樣沒多大改變，可是CKFinder套件就無法使用了(Oh my God!!)，新版的CKFinder全部的js都加密過了，要用原本的方法破解似乎是不可能了，看來只能想其他的方法了(砍掉重練)!!

這時候才想到由吳弘凱老師所開發的tadtools工具包模組裡面就有最新版的ckeditor編輯器加上elFinder圖片套件，可以無限上傳及刪除圖片，而且老師都已經修改好吧程式建構化了，因此只需要簡單的呼叫建構函式給參數值跟樣板js程式就能使用ckeditor編輯器，而且也會自動在uploads資料夾底下建立編輯器存放圖片的目錄，還有權限機制也寫好了，真是太感謝吳弘凱老師無私的付出，向您至上12萬分的敬意。

以下即為使用tadtools模組中的ckeditor套件方法。

1、須於php擋頭引入ckeditor.js檔

$xoopsTpl->assign('xoops_module_header', "<script src='" . XOOPS_URL . "/modules/tadtools/ckeditor/ckeditor.js'></script>");

2、須於php檔案中引入tadtools模組中的tad_function.php檔案

include_once XOOPS_ROOT_PATH."/modules/tadtools/tad_function.php";

3、加上以下的呼叫$editor建構函式語法(這樣才能建立圖片資料夾)

include_once XOOPS_ROOT_PATH . "/modules/tadtools/elrte.php";

global $xoopsModule;
$moduleid=$xoopsModule->dirname();
include_once XOOPS_ROOT_PATH . "/modules/tadtools/elrte.php";
$elrte = new elrte($moduleid, "editor_honor_content", $honor_content);
$elrte->setHeight('350px');

$editor = $elrte->render();

//$moduleid是模組的id名稱，會自動在uploads資料中建立一個以模組id名稱的資料夾存放圖片

4，於樣板端貼上以下的js語法

//紅字的id值與script的replace必須一樣!

<textarea name="honor_content" id="editor_honor_content" rows="10" cols="80"><{$honor_content}></textarea>

<script type='text/javascript'>

CKEDITOR.replace('editor_honor_content' , {
skin : 'moono' ,
width : '100%' ,
height : '350' ,
language : 'zh-TW' ,
toolbar : 'my' ,
contentsCss : ['<{xoAppUrl /}>modules/tadtools/bootstrap3/css/bootstrap.css','<{xoAppUrl /}>modules/tadtools/css/font-awesome/css/font-awesome.css'],
extraPlugins: 'syntaxhighlight,dialog,oembed,eqneditor,quicktable,imagerotate,fakeobjects,widget,lineutils,widgetbootstrap,widgettemplatemenu,pagebreak,fontawesome,prism,codesnippet,codemirror',

filebrowserBrowseUrl : '<{xoAppUrl /}>modules/tadtools/elFinder/elfinder.php?type=file&mod_dir=<{$xoops_dirname}>',
filebrowserImageBrowseUrl : '<{xoAppUrl /}>modules/tadtools/elFinder/elfinder.php?type=image&mod_dir=<{$xoops_dirname}>',
filebrowserFlashBrowseUrl : '<{xoAppUrl /}>modules/tadtools/elFinder/elfinder.php?type=flash&mod_dir=<{$xoops_dirname}>',
filebrowserUploadUrl : '<{xoAppUrl /}>modules/tadtools/upload.php?type=file&mod_dir=<{$xoops_dirname}>',
filebrowserImageUploadUrl : '<{xoAppUrl /}>modules/tadtools/upload.php?type=image&mod_dir=<{$xoops_dirname}>',
filebrowserFlashUploadUrl : '<{xoAppUrl /}>modules/tadtools/upload.php?type=flash&mod_dir=<{$xoops_dirname}>',
qtRows: 10, // Count of rows
qtColumns: 10, // Count of columns
qtBorder: '1', // Border of inserted table
qtWidth: '100%', // Width of inserted table
qtStyle: { 'border-collapse' : 'collapse' },
qtClass: 'table table-bordered table-hover table-condensed', // Class of table
qtCellPadding: '0', // Cell padding table
qtCellSpacing: '0', // Cell spacing table
qtPreviewBorder: '1px double black', // preview table border
qtPreviewSize: '15px', // Preview table cell size
qtPreviewBackground: '#c8def4' // preview table background (hover)
} );
</script>
<script>CKEDITOR.dtd.$removeEmpty['span'] = false;</script>

5、須於模組根目錄中的xoops_version.php檔案啟用$modversion['onInstall']功能(建立存放圖片的資料夾)，

$modversion['onInstall'] = "include/onInstall.php";

然後於include中置入一個onInstall.php檔案，用筆記本打開編輯!





<?php


function xoops_module_install_模組名稱(&$module) {

mk_dir(XOOPS_ROOT_PATH . "/uploads/模組名稱");

mk_dir(XOOPS_ROOT_PATH . "/uploads/模組名稱/cate");

mk_dir(XOOPS_ROOT_PATH . "/uploads/模組名稱/file");

mk_dir(XOOPS_ROOT_PATH . "/uploads模組名稱/image");

mk_dir(XOOPS_ROOT_PATH . "/uploads/模組名稱/image/.thumbs");

return true;

}


//建立目錄

function mk_dir($dir = "")

{

//若無目錄名稱秀出警告訊息

if (empty($dir)) {

return;

}


//若目錄不存在的話建立目錄

if (!is_dir($dir)) {

umask(000);

//若建立失敗秀出警告訊息

mkdir($dir, 0777);

}

}

?>
這樣安裝模組時才會自動產生ckeditor編輯器存放圖檔的資料夾。

這樣就完成使用tadtools工具包模組的ckeditor編輯器套件方法，實際來測試看看。

編輯器目前已經正常顯示在頁面上了

圖片上傳功能也是正常的，圖片都存在uploads裡面模組id名稱的資料夾中了，圖片刪除功能也是正常的。

吧圖片貼到文章中的功能也是正常的，圖片也能調整大小!!

有需要tadtools工具包模組套件的的朋友可以到這裡下載，可以節省很多模組開發的時間，裡面有非常多的工具套件都可以使用喔。

http://120.115.2.90/modules/tad_modules/index.php?module_sn=1

教學撰寫：徐嘉裕 Neil hsu