跳到主要內容

模組使用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工具包模組套件的的朋友可以到這裡下載，可以節省很多模組開發的時間，裡面有非常多的工具套件都可以使用喔。



教學撰寫：徐嘉裕 Neil hsu
標籤：

留言

張貼留言

這個網誌中的熱門文章

好用的windows備份檔案dos指令XCOPY-教學撰寫:徐嘉裕Neil hsu

要快速的備份某個硬碟全部資料到備份硬碟中，雖然是可以用windows內建的備份與還原，但如果重灌windows可會有key不同而無法還原的問題，還要改一堆設定煩死了，直接用dos指令XCOPY來做檔案的複製就很快了，資料也不會丟失，好朋友可以參考看看!! 首先開啟windows所有程式->附屬應用程式->開啟命令提示字元! 然後輸入以下指令 XCOPY C:\xxx   F:\xxx /s 藍字的 C:\xxx  為複製檔案來源位置例如要複製整個C槽就輸入 C:\ 綠色的   F:\xxx 為複製目的位置，例如要放到F槽的備份資料夾，就輸入  F:\ 備份 紅字的 S 為複製類型參數，可以自行修改為以下的參數設定： ================================================================= /A    只複製設定成保存屬性的檔案，不要改變屬性的設定。 /M    只複製設定成保存屬性的檔案，並清除保存屬性。 /D:m-d-y  複製指定日期當天或之後變更的檔案。如果沒給日期，只複製那些來源檔案日期比目的檔案日期為新的檔案。 /EXCLUDE:file1[+file2][+file3]...         指定檔案清單字串。每個字串應在不同行。如果有字串對應到要進行複製的檔案絕         對路徑的任何部分，這個檔案會被排除複製。例如，指定字串         \obj\ 或 .obj 的話，會排除所有在 obj 目錄下副檔名是.obj 的檔案複製。 /P    在建立每個目的檔案時顯示提示。 /S    複製每個目錄及其包含的子目錄，不複製空目錄。 /E    複製每個目錄及其包含的子目錄，也複製空目錄。/S 與 /E相同，能夠用來修改 /T。 /V   ...
3 則留言
閱讀完整內容

jQuery取得下拉選單selected中數值與內容的方法

假設選單狀態為： <select id='selectname '> <option value='v1' data-id="d1">選單A</option> <option value='v2' data-id="d2">選單B</option> <option value='v3' data-id="d3">選單C</option> </select> 以jQuery取得選單數值與內容方法如下： 1、取得下拉選單 value 數值的方法 $selectname=$('#selectname').val(); alert($selectname); //顯示選單中 selected 狀態的value數值v1 or  v2  or  v3。 2、取得下拉選單中 data-id 數值的方法 $data-id= $(this).find(':selected').attr('data-id'); alert($data-id); //顯示選單中 selected 狀態的data-id數值d1 or  d2 or  d3。 3、取得下拉選單中 文字 的方法 $selecttext=$(this).find(':selected').text(); alert($selecttext); //顯示選單中 selected 狀態的文字內容，如選單A or  選單B or 選單C。 教學撰寫：徐嘉裕 Neil hsu
張貼留言
閱讀完整內容

PhpSpreadsheet電子表格PHP匯出excel排版範例->Xoops-教學撰寫:徐嘉裕Neil hsu

在開發模組時如果要吧資料表內容匯出excel，最常用的套件因該就是PHPExcel，但是官網已經說明PHPExcel套件因升級不易只能支援到php5.6， 該物件已於2017年正式棄用，並於2019年永久歸檔 ，換句話說PHPExcel套件對於日後新版的excel格式均不支援，為保持程式在最新狀態只好棄用PHPExcel改使用PhpSpreadsheet電子表格套件，該套件也是能匯出excel，還能匯出LibreOffice Calc，感覺還不錯! 唯一比較麻煩的是使用PhpSpreadsheet要先佈署composer，如果沒佈署composer是沒辦法使用的，還好官方有釋出已經設定好的phpoffice套件可以直接引入使用，省了很多麻煩，使用PhpSpreadsheet方法如下： 1、先下載PhpSpreadsheet套件，我已經幫大家吧phpoffice一起打包上傳 https://drive.google.com/file/d/1jw73diWVjbcr1ycY-gtqM2cGfpLp1zS_/view?usp=sharing 下載回來後解壓縮吧phpoffice跟PhpSpreadsheet丟到Xoops模組的class資料夾中，未來如需更新PhpSpreadsheet可到官網下載最新版覆蓋即可 https://github.com/PHPOffice/PhpSpreadsheet 2、然後建立一個excel.php放在模組根目錄中 以下為編排excel表格常用的函數設定 include_once "header.php"; //先引入autoload.php檔 include_once XOOPS_ROOT_PATH.'/modules/ 模組ID /class/phpoffice/vendor/autoload.php'; use PhpOffice\PhpSpreadsheet\Spreadsheet; use PhpOffice\PhpSpreadsheet\IOFactory; $spreadsheet = new Spreadsheet(); //實體化Excel工作表 //設置電子表格元數據的操作： $spreadsheet->getProperties() ->setCreator...
張貼留言
閱讀完整內容