您在這裡

TinyMCE的工具列到底要調哪裡?

tky's 的頭像
tky 在 2006-12-20 (三) 18:22 發表

各位好:

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

TKY知道手冊上都有寫啊,不過就不知道那樣寫是什麼意思。

比如說TKY想改工具列的固定寬度好了,手冊是:
http://tinymce.moxiecode.com/tinymce/docs/option_width.html

Option: width

This option gives you the ability to specify the width of the editor in pixels or percent. This width can be very useful to specify if the editor is used in hidden tabs or if the editor area should be bigger than the replaced element. The default value of this option is set to the width of the HTML element TinyMCE replaces for example the pixel width of a textarea.
Example of usage of the width option:

tinyMCE.init({
...
width : "640"
});

意思應該是說,要改寬度,就要改tinyMCE.init({裡頭的width : "640"後面那個值。這TKY知道。
可是,tinyMCE.init({在模組裡頭的哪裡呢?

TKY用搜尋去找,整個資料夾裡頭,就只有doc裡頭的手冊那部分有寫這個字串。改手冊內容又不會影響到模組。

另外就是example資料夾裡頭有,但改example會改到模組?

TKY就是想不出要去改哪裡,才會一問再問的。

TKY

tky

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

tky

找了好久~ 貼一下 下面一段貼在 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;
}