各位好:
TKY很久之前問過可否調整TinyMCE的工具列寬度這個問題,後來忙測試別的模組,就沒再管了。今天開始修改的結果,發現情況不只是改改設定這麼簡單而已。
TKY去官網搜尋了好一會兒,發覺可以用CSS設定直接改掉一些地方:整個工具列的寬度、選單的排列方式等等。
http://drupal.org/node/75844
這解決了TKY的一個大問題。
後來又解決了字型顯示太小的問題,也是在CSS中針對body.mceContentBody和body.mceContentBody pre做共同的設定。提供如下:
body.mceContentBody, body.mceContentBody pre{
font-family: "新細明體", "細明體", "Times New Roman";
background: #fff;
color: #000;
font-size: 1em!important; 16px;
}
我用!impartant在不同的瀏覽器顯示近似的大小。(該死的IE!每次都是為了它)
接下來的問題就卡住了。
TKY想要更改字型選單和字體大小選單的預設值。字型想要加上標楷體、新細明體之類的字體,字體大小想要全部改為以px為單位(預設是pt),比較符合網頁使用的習慣、避免瀏覽器不同造成顯示差異。
可問題是TKY不曉得要改哪裡!
另外就是TinyMCE似乎預設就是提供三個工具列,TKY幾乎全選的結果,搞得工具列非常難看。因為如果瀏覽器的大小改變了,這三行就會分別擠出多一倍的空間,變成六行,每一行又有很多多餘的空間。
而且工具按鈕的優先順序也不知道要怎麼改、到哪裡去改。
看了老半天,猜想應該是要改modules\tinymce\tinymce\jscripts\tiny_mce\themes\advanced下面的editor_template.js和editor_template_src.js這兩個檔案。不過不是很確定要怎麼改,不敢貿然動手。
不曉得版上有沒有人可以幫幫忙咧?
感恩啊!
TKY
Re: TinyMCE的工具列到底要調哪裡?
這可以直接去看 TinyMCE 的手冊,裡面都有解。
Re: TinyMCE的工具列到底要調哪裡?
TKY知道手冊上都有寫啊,不過就不知道那樣寫是什麼意思。
比如說TKY想改工具列的固定寬度好了,手冊是:
http://tinymce.moxiecode.com/tinymce/docs/option_width.html
意思應該是說,要改寬度,就要改tinyMCE.init({裡頭的width : "640"後面那個值。這TKY知道。
可是,tinyMCE.init({在模組裡頭的哪裡呢?
TKY用搜尋去找,整個資料夾裡頭,就只有doc裡頭的手冊那部分有寫這個字串。改手冊內容又不會影響到模組。
另外就是example資料夾裡頭有,但改example會改到模組?
TKY就是想不出要去改哪裡,才會一問再問的。
TKY
Re: TinyMCE的工具列到底要調哪裡?
看一下這模組的說明,後面有提到 "TWEAKING THE TINYMCE THEME",配合 TinyMCE 的手冊,就成了!
Re: TinyMCE的工具列到底要調哪裡?
OK,TKY看了老半天說明,還是沒有很懂。在網路上找到一些文章,他們都是改.js檔案。
不過TKY後來發現,在Drupal下面,修改TinyMCE工具列的按鈕順序與工具列數量,只要修改TinyMCE模組下面的plugin_reg.php這個檔案內容就好。
TKY把所有的按鈕放在一列裡頭,並且按照官網上的一些指示修改了CSS檔案與.js檔案的一些小地方,讓這些按鈕不會因為排在一列太長而撐開版面。
不過TKY發現另一個跟瀏覽器有關的問題:如果在TinyMCE模組的選項設定裡,開啟版面可以任意調整大小的選項,在Firefox中版面會不管CSS指令而撐開、蓋掉旁邊的區塊;但是在IE中則正常,可以把區塊擠到一旁、自動增加瀏覽器畫面大小。
關掉這個指令,那麼在兩個瀏覽器中,不管你的版面大小是1024*768還是800*600,TinyMCE都會自動調整大小。只是很可惜的地方是,就不能任意改變編輯區的大小了。這樣對很多本就很窄的文字區域來說,是很大的缺點。
雖然TinyMCE模組有提供「全螢幕」外掛,但是一來很少人會用,二來開全螢幕時、再開其他有工具視窗的按鈕功能,全螢幕會遮掉那些工具視窗。非得要關掉全螢幕才能看到。也就是說在全螢幕模式下,不能做進階的圖片、水平線設定。
所以,想請教各位一下,雖然可能很少人會碰到這個「僅限火狐」才有的bug,但有沒有辦法讓TinyMCE模組能夠正常的在火狐中自動調整大小同時又能任意變更大小呢?
TKY
Re: TinyMCE的工具列到底要調哪裡?
找了好久~ 貼一下 下面一段貼在 template.php width 就會是 100% 了
/**
* Customize a TinyMCE theme.
*
* @param init
* An array of settings TinyMCE should invoke a theme. You may override any
* of the TinyMCE settings. Details here:
*
* http://tinymce.moxiecode.com/wrapper.php?url=tinymce/docs/using.htm
*
* @param textarea_name
* The name of the textarea TinyMCE wants to enable.
*
* @param theme_name
* The default tinymce theme name to be enabled for this textarea. The
* sitewide default is 'simple', but the user may also override this.
*
* @param is_running
* A boolean flag that identifies id TinyMCE is currently running for this
* request life cycle. It can be ignored.
*/
function phptemplate_tinymce_theme($init, $textarea_name, $theme_name, $is_running) {
switch ($textarea_name) {
// Disable tinymce for these textareas
case 'log': // book and page log
case 'img_assist_pages':
case 'caption': // signature
case 'pages':
case 'access_pages': //TinyMCE profile settings.
case 'user_mail_welcome_body': // user config settings
case 'user_mail_approval_body': // user config settings
case 'user_mail_pass_body': // user config settings
case 'synonyms': // taxonomy terms
case 'description': // taxonomy terms
unset($init);
break;
// Force the 'simple' theme for some of the smaller textareas.
case 'signature':
case 'site_mission':
case 'site_footer':
case 'site_offline_message':
case 'page_help':
case 'user_registration_help':
case 'user_picture_guidelines':
$init['theme'] = 'simple';
foreach ($init as $k => $v) {
if (strstr($k, 'theme_advanced_')) unset($init[$k]);
}
break;
}
// Add some extra features when using the advanced theme.
// If $init is available, we can extend it
if (isset($init)) {
switch ($theme_name) {
case 'advanced':
$init['width'] = '100%';
break;
}
}
// Always return $init
return $init;
}