lss實驗室

lss實驗室 http://blog.nlhs.tyc.edu.tw/blog/2 我的心得記事，包括 pLog 、 PHP 、 Moodle 、網路管理、電腦科教學、 Wiki ...... lss 2008-11-21T11:28:41Z pLog-TinyMCE-1.0.2-full Part III http://blog.nlhs.tyc.edu.tw/post/2/23 我調測過的編輯環境是我自己認為已經夠用了。但是每個人的感覺不同，不能一概而論。可以調整的部份，大概就是工具列按鈕了。這個部份，<a href="http://ajer001.blog.twntwn.info/">阿駕</a>在他的部落格發表了篇文章「<a target="_blank" href="http://ajer001.blog.twntwn.info/post/1/535">修改 TinyMCE 編輯器的按鈕</a>」，寫的蠻清楚的，值得參考。我只打算寫下一些注意事項及個人調校心得。 調整 TinyMCE 環境，要編輯的檔案為 /var/www/blog/js/tinymce/jscripts/tinymce/tiny_mce-plog.js 。TinyMCE 有許多 plugin 可以調用，這些 plugin 安裝在 /var/www/blog/js/tinymce/jscripts/tinymce/plugins 目錄下。要調用時，請修改 tiny_mce-plog.js 裡的第 6 行：<blockquote>plugins : "fullscreen,table,contextmenu,emotions,flash,insertresource",</blockquote>將 plugin 的名稱(也是是 plugins 目錄下的各子目錄名稱)寫在雙引號之內，用逗號分隔。我調用的 plugin 有：<blockquote><table width="400" border="1"><tbody><tr><td align="center">fullscreen</td><td>使用全螢幕編輯模式 </td></tr><tr><td align="center">table </td><td>插入表格及各項表格功能 </td></tr><tr><td align="center">contextmenu </td><td>編輯區的右鍵選單 </td></tr><tr><td align="center"> emotions</td><td>表情符號圖示 </td></tr><tr><td align="center"> flash</td><td>支援插入 flash 動畫檔 </td></tr><tr><td align="center"> insertresource</td><td>Mark 寫的 plugin ，支援插入檔案中心的檔案。 </td></tr></tbody></table></blockquote>其它還有很多 plugin 可用。關於各 plugin 的說明，請官方網站的 <a href="http://tinymce.moxiecode.com/tinymce/docs/reference_plugins.html">plugin 說明(英文)</a> 。這邊要特別注意一件事： insertresource 一定要放在第 6 行所有列出 plugin 的最後面，否則其它 popup 視窗的 plugin 如 emotions 、 table 、 flash 等都會無法使用。為了測這一點花了我一下午的時間。我猜這可能跟 Mark 寫 insertresource 時，調用 popup 視窗的方法跟 TinyMCE 內建的方法不同所引起，目前無暇深究，況且 javascript 也非我強項。這個就等待有心人解決吧！調用了 plugin 之後，接下來要把 plugin 提供的按鈕加到工具列上。  tiny_mce-plog.js 裡的第 9 、10 、11 行分別用來設定編輯區工具列的第 1 、 2 、3 列。有那些內建的按鈕可用，可以參考官方網站的 <a href="http://tinymce.moxiecode.com/tinymce/docs/option_theme_advanced_buttons_n.html">theme_advanced_buttons<1-n></a> 說明。這裡就只要注意別讓工具列太長而破壞編輯區的版面就行了。哦！還有，就是不要打錯字啦！<img border="0" alt="Wink" title="Wink" src="http://blog.nlhs.tyc.edu.tw/js/tinymce/jscripts/tiny_mce/plugins/emotions/images/smiley-wink.gif" />那就這樣囉！如果對這一系列三篇文章有意見，歡迎討論！如果是有關技術支援的討論，請移駕 pLog 中文開發論壇<a href="http://forum.plogworld.org.tw/index.php?topic=1292.0">這裡</a>集中討論。  LifeType實驗室 LifeType架站系列 TinyMCE實驗室 2005-10-18T22:21:44Z lss pLog-TinyMCE-1.0.2-full Part II http://blog.nlhs.tyc.edu.tw/post/2/22 在開始動手前，當然先談談免責聲明，也就是說，這是我的筆記，所寫的內容已證實在我的主機上是可行的。但不保證在任何機器上都是可行的(意外難免嘛！)。在跟著動手之前，最好先做個備份，以免發生任何意想不到的狀況導致資料的毀損。那就開始吧！ 首先，請先下載我重新打包的 <a title="完整整合TinyMCE與pLog，替代Xinha的良方。" href="http://blog.nlhs.tyc.edu.tw/resserver.php?blogId=2&resource=pLog-TinyMCE-1.0.2-full.zip">pLog-TinyMCE-1.0.2-full.zip</a> (以下簡稱 full 包)。再次聲明，這裡面是原版的 TinyMCE 2.0RC2 加上 Mark 的 pLog-TinyMCE-1.0.2.zip 裡面針對 pLog 增加的功能部份，以及我的一番精心調測的結果。先說明 full 包裡面的內容：<ul><li>js 目錄：裡面是 TinyMCE 和 Mark 寫的 pLog 整合程式。</li><li>templates 目錄：裡面是 Mark 修改過管理界面會用到的樣版檔。 </li></ul>安裝的步驟與 <a title="使用TinyMCE取代HTMLArea" href="http://blog.nlhs.tyc.edu.tw/post/2/17">使用TinyMCE取代HTMLArea</a> 文章大同小異，當然，先記得備份哦！<blockquote><pre>#先將下載的 full 包解壓縮，得到 js 與 templates 兩個目錄</pre><pre>cd /tmp</pre><pre>unzip pLog-TinyMCE-1.0.2-full.zip </pre><pre>#備份原來的 js 目錄</pre><pre>cd /var/www/blog</pre><pre>tar zcvf js.tar.gz js</pre><pre>#將解開的 js 目錄覆蓋 pLog 的 js 目錄</pre><pre>cp -Rpf /tmp/js/* js</pre><pre>#備份 admin 樣版</pre><pre>cd /home/plogdata/templates</pre><pre>tar zcvf admin.tar.gz admin</pre><pre>#將解開的 templates 裡的 admin 目錄下的樣版覆蓋 pLog 的 admin 樣版</pre><pre>cp -f /tmp/templates/admin/* admin/</pre><pre>#完成</pre></blockquote>接下來可能得重新設定一次 WYSIWYG 選項：<blockquote>以管理員進管理界面 -> 全部站台管控 -> 全域設定 -> WYSIWYG 選項，先選「否」，更新，再選「是」，再更新一次。</blockquote>然後就可以脫離 HTMLArea 的魔掌，好好享用 TinyMCE 的樂趣了。下一篇則用來說明如何自行調校 TinyMCE 的工具列，讓他更符合個人需求。   LifeType實驗室 LifeType架站系列 TinyMCE實驗室 2005-10-18T21:44:30Z lss pLog-TinyMCE-1.0.2-full Part I http://blog.nlhs.tyc.edu.tw/post/2/21 根據 Mark 在 Mantis 裡的<a target="_blank" title="Mantis 的相關討論" href="http://bugs.plogworld.net/view.php?id=659">描述</a>，當初因為上載檔案的限制，他把 TinyMCE 給減肥了。於是，當我想使用 TinyMCE 的 plugin 時，沒東西可用。於是，我決定下載完整的新版 <a title="TinyMCE 2.0RC3" href="http://prdownloads.sourceforge.net/tinymce/tinymce_2_0RC3.zip?download">TinyMCE 2.0RC3</a> ，並整合 Mark 的 <a title="pLog-TinyMCE-1.0.2.zip" href="http://bugs.plogworld.net/file_download.php?file_id=300&amp;amp;amp;type=bug">pLog-TinyMCE-1.0.2.zip</a> ，製作一個全功能的 pLog-TinyMCE-1.0.2-full.zip 。先看看完成後的文章編輯介面： <blockquote> <a href="http://blog.nlhs.tyc.edu.tw/resserver.php?blogId=2&resource=tinymce-font-size.png"><img border="0" alt="16pt 大字型的 TinyMCE 編輯區" src="http://blog.nlhs.tyc.edu.tw/resserver.php?blogId=2&resource=tinymce-font-size.png&mode=preview" /></a> </blockquote> 可以看到，工具列變成兩列，除了原來的  Xinha  的工具之外，還有： <ul> <li>文字的顏色及背景顏色。</li> <li>文字的上標及下標功能。</li> <li>製作 blockquota 和階層式項目符號及編號的</li> <ul> <li>段落縮排及凸排。</li> </ul> <li>段落格式。</li> <li>插入表格。 <table width="200" border="1" style="border-width: 1px"><tbody> <tr> <td> 表格</td> <td>表格 </td> </tr> <tr> <td> 表格</td> <td> 表格</td> </tr> </tbody></table> </li> <li>水平線。 <hr width="100%" size="2" /></li> </ul> 除此之外，我還加入了： <ul> <li>插入 flash 動畫。</li> </ul> <blockquote><object classid="D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="300" height="255"><param name="movie" value="http://web.nlhs.tyc.edu.tw/~lss/homework/110753movie.swf" /><param name="quality" value="high" /><param name="menu" value="false" /><param name="wmode" value="" /><embed src="http://web.nlhs.tyc.edu.tw/~lss/homework/110753movie.swf" wmode="" quality="high" menu="false" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="300" height="255"></embed></object> </blockquote> 最重點：斜線不會隨便被吃掉了。 <blockquote><pre><?php</pre><pre>require_once 'HTML/QuickForm/Controller.php';</pre><pre>require_once 'HTML/QuickForm/Action.php';</pre>// Start the session <pre>session_start();</pre><pre>$hwupload =& new HTML_QuickForm_Controller('homeworkUpload', true);</pre><pre>$hwupload->addPage(new DisplayLogin('login'));</pre><pre>$hwupload->addPage(new DisplayHomeworkList('homeworklist'));</pre><pre>$hwupload->addPage(new DisplayUploadFile('uploadfile'));</pre><pre>$hwupload->addPage(new DisplayResult('result'));</pre><pre>$hwupload->addAction('gethomeworklist',  new ActionGetHomeworkList());</pre><pre>$hwupload->addAction('ftpfile', new ActionFtpFile());</pre><pre>$hwupload->addAction('logout', new ActionLogout());</pre><pre>$hwupload->addAction('display', new ActionDisplay());</pre><pre>$hwupload->run();</pre><pre>?></pre></blockquote> 下一篇接著說明如替換我另外打包的整合包。  LifeType實驗室 LifeType架站系列 TinyMCE實驗室 2005-10-18T19:58:01Z lss pLog安裝系列(一)-安裝環境 http://blog.nlhs.tyc.edu.tw/post/2/11 這次的安裝，不再只是試玩，而是準備做為全校的 blog 平台，所以在安裝上特別做了一些考量：<ol><li>要有獨特的網址：這點必需事先在 DNS 主機上做好處理，並在 apache 上設定相對的虛擬主機。</li><li>將資料與程式分開：把 pLog 裡可以自訂的部份與 pLog 程式完全分開，包括語系、樣版、檔案中心、暫存檔…等目錄放在網路無法直接存取的地方。這樣可以兼顧未來升級時覆蓋已修改檔案的風險和備份的方便。</li><li>資料庫的定期備分：自己玩玩，玩死了就算了。但是提供服務，那就有幫用戶備份的義務了。</li></ol>接下來是安裝環境：<ul><li>IBM x236 主機</li><li>1GB RAM</li><li>Raid5 HD(80GB x 4)</li><li>Mandrav Linux 2005LE</li><li>MySQL 4.1.11</li><li>Apache 2.0.53</li><li>PHP 4.3.10</li></ul>看似很迷人的主機，可惜不是 blog 專用。它同時還得負擔全校所有教職員生的個人網站、各處室網站、Moodle 線上課程網站…等各項工作。未來如果 blog 用戶及使用率達到一定程度之後，再爭取獨立主機執行 pLog 。 LifeType實驗室 LifeType架站系列 2005-10-17T09:04:26Z lss