華龍國小LifeType學習網

修改TinyMCE

Published on 12/08,2005

之前將文字編輯器改用TinyMCE後,發覺要改變文字的顏色似乎有點問題,今天在lss實驗室看到lss及其他網友的訊息,似乎去下載新版本的tinymce2.0.1就可以解決這問題。

yes,改好了,這問題已解決。


看看我修改的步驟: 

1.備份:
先備份原本的/js/tinymce/jscripts/tiny_mce --> tinymce_bak

2.上傳:
上傳新版本的tinymce 

3.複製:
複製原本 tinymce_bak 裡的tiny_mce-plog-resourcelist.js 及  tiny_mce-plog.js 到新的tinymce裡。

4.修改語言檔:
2.01的tinymce裡頭已內建zh_tw_utf8.js,修改tiny_mce-plog.js,

language : "zh_tw",

改成

language : "zh_tw_utf8",

這樣按鍵功能及跳出視窗的提示說明就可以變成中文了。 

5. 修改編輯區及跳出視窗的字型大小:
修改/tiny_mce/themes/advanced/css裡的editor_content.css及editor_popup.css,將一些font-size改大一點就可以,可以參考lss寫的這一篇調整 TinyMCE 編輯區的字型大小

6.複製insertresource這個plugin:
這個insertresource plugin是markwu所寫的外掛,可以用來直接插入資料夾裡的圖片,在原本官方的tinymce裡是沒有的。

將原本/tiny_mce_bak/plugins/裡的insertresource這個目錄複製到/tiny_mce/plugins/裡。

94.12.13補充說明:

7. 修改部分plugins為中文語系:

TinyMCE官網的 TinyMCE2.0.1final 已內建zh_tw_utf8的中文語系,但部分plugins卻沒加上zh_tw_utf8中文語系的設定,所以我自己動手來改改。

未加上zh_tw_utf8語系的plugins有 :

fullscreen(轉成全螢幕模式)
  insertdatetime (插入日期、時間)
insertresource (插入資料夾裡的圖片或檔案)

要修改 fullscreen、insertdatetime 這兩個plugin的中文化,只要進入/js/tinymce/jscripts/tiny_mce/plugins的相對應資料夾裡,去修改 editor_plugin.js ,找到

tinyMCE.importPluginLanguagePack('fullscreen','zh_tw_utf8,en,...略

 加上上面的 zh_tw_utf8 ,這樣就可以了。

至於 insertresource,本來就沒有utf8的中文語系,所以要自己動手加上去。

打開./insertresource/editor_plugin.js ,找到

tinyMCE.importPluginLanguagePack('insertresource', 'en,zh_tw_utf8'); 

一樣加上 zh_tw_utf8

再進入 ./insertresource/langs/目錄 ,新增一個 zh_tw_utf8.js 的檔案,裡面寫上

tinyMCELang['lang_insertresource_title'] = '插入資料夾裡的檔案或圖片';
tinyMCELang['lang_insertresource_desc'] = '插入資料夾裡的檔案或圖片';

上面 '  ' 裡的中文,你可以自己改成你想要的,這樣就全部OK了!

 lss 已寫了這篇更新 TinyMCE 編輯器版本至 2.0.1 final,並且已打包好了修改完成的檔案,有需要的可以去那裡下載。

另外關於TinyMCE的一些說明,官網上當然都是英文, 不過我找到了一個簡體中文的TinyMCE說明網頁

跟我一樣英文爛爛的朋友可以去那裡看看(連結進去你可能會看到一堆亂碼,只要把瀏覽器的編碼改成簡體中文就可以了,若想要看繁體中文,Fx請使用同文堂,IE底下你可以安裝 ALiBaBar)。


Leave a Reply

Comments

  1. 12/18,2005 | 00:14

    lss:
    之前我有想過redcolt是不是從word貼表格過來,但我剛剛貼個word的表格過來,看html碼,在word的語法(一堆東西)中背景色語法是「background: #ffeeff」,並不是redcolt所說的「bgcolor=#ffeeff 」。

  2. lss
    12/18,2005 | 00:03

    如果是用 word 先製作表格,再 複製/貼上 的話,那是很可能會變的亂七八糟的。

    lss

  3. 12/17,2005 | 23:07

    redcolt:
    突然想到,您的tinymce是那個版本呢?

    我這邊目前是 2.0.1版,印象中,在我這邊tinymce未改成2.0.1版之前,好像有你說的問題存在的樣子(不太記得了!我是無辜的)。

    假如您的tinymce不是2.0.1 版,您要不要先試試改用tinymce2.0.1版來看看。


  4. 12/17,2005 | 22:59

    redcolt:
    抱歉,先請教一下,什麼是「粘貼」?是我們  這邊所謂的「貼上」(ctrl + V)嗎?

    假如是,那你所謂的粘貼入的表格,這個表格是從哪裡貼過來的呢?

    我剛剛在我這邊測試,利用TinyMCE的表格工具,插入了一個表格,背景色設為#ffeeff,看來是正常的!
    看看示範網頁

    不過在tinymce裡的,表格背景顏色的語法是「style="background-color: #ffeeff"」,但我在上面網頁的測試二裡,自己設定背景色的語法為「bgcolor="#ffeeff"」

    兩個的結果應該是一樣的,在我這裡,似乎看不到你說的問題耶!


  5. 12/17,2005 | 12:26

    老师,你好,请教tinymce表格背景问题.
    我用tinymce,但粘贴入的表格,它的背景色会变没了,不知什么原因?
    好象是把bgcolor=#ffeeff 给换空了.不知如何修改.

  6. lss
    12/15,2005 | 22:46

    阿欣:
    不好意思,這時回應你,你大概改好了吐舌頭
    全螢幕的 fullscreen.htm 裡面把語言編碼寫死了,所以只有英文可以正常顯示,其他語系就完蛋了。把 fullscreen.htm 裡面指定語系那一行刪掉就行了。

    這也提醒我想寫的關於 TinyMCE 的一些心得好像該動手了。酷喔

    lss

  7. 12/13,2005 | 03:01

    Hi,yung:
    忙忙忙,年底了,趕著送一些計畫的憑證,只寫了一篇簡單的介紹,你先看看,不過要適合你們學校的版面,你可能就要再自己多試試了。

    我的功力其實一點也不高(自認差的很、半瓶水),還有許多許多應該學、想要學的,都還不會呢!

    看看吧!
    阿欣部落:將gallery2的圖片區塊放在一般網頁上

  8. 12/09,2005 | 21:57

    哈囉阿欣老師
    因為今天又被抓去替代役服勤管理
    所以都沒有上來看文章
    我所說的slideshow我想要的呈現方式就是
    你第一種呈現的方式範例
    因為我們學校的就網頁太舊囉!
    所以就要由我這一個替代役來幫忙修改
    而我的想法是想要在新的網站右上角的部分
    放進去gallery2的slideshow的阿
    但是因為我功力沒有那麼高
    試了幾次都不行加上看到貴校也有在玩Gallery2
    所以就想要請問阿欣老師ㄧ下
    不知道阿欣老師可以教學一下的嗎???
    謝謝的喔???
    PS:雖然只是各小小的替代役
    但是還是很想在服務的學校留下一個紀錄
    在一次的謝謝阿欣老師的喔!!

  9. 12/09,2005 | 16:08

    看完你的文章我才注意到有些plugin的說明還是英文的,正嘗試自己改改看(自己動手樂趣多)。

    剛好順便請教您,全螢幕的 tool tips 我這邊是顯示英文(我沒用你那個lifetype-1.0.2b-tinymce-2.0.1.zip檔案),因為不知道改那邊,我就試著改/plugins/fullscreen/editor_plugin.js,

    在tinyMCE.importPluginLanguagePack('fullscreen','en,....
    語言的部分,我試著加上zh_tw_utf8,不過,只要一改完,全螢幕的那個圖示就會消失不見,即使把zh_tw_utf8再刪除掉,圖示還是顯示不出來,只能把備份檔再copy回來才又可以顯示圖示。

    ???

  10. lss
    12/09,2005 | 15:33

    不知道這部份你有改到嗎?眨眼

  11. 12/09,2005 | 02:34

    其實不用將php加入asp裡,因為好像也不可能。

    想到用<iframe>的語法,就像網路上有些很多blog就是用iframe來將Flickr放在網誌上。

    所以做成了這個測試網頁(gallery的圖在網頁的最下面)。

    不過這還有問題,點選那張圖後,它只會在我指定的<iframe>區塊大小來顯示連結的結果,若能改成以新視窗開啟,好像就差不多了!

    突然想到,如果再配合上頁框,再加上表格,似乎就可以讓它的連結都在新視窗開啟而且也可以做版面位置的編排了......。

    不玩了,睡覺去,zzz...。

  12. 12/09,2005 | 01:17

    hi,yung:
    關於gallery2的問題,你的想法還真是個不錯的主意,假如在學校首頁上,也可以顯示gallery2的一些圖片區塊,感覺蠻不錯的喔!

    你說的slideshow應該是幻燈片放映的方式,看看這個範例網頁

    假如是跟放在blog一樣的,應該是圖片區塊,看看這個範例網頁

    是這樣嗎?

    目前我大概還不會用到,因為學校的www網頁,目前是跑asp,不知道可不可以將php加到asp裡?還沒試過!

  13. 12/09,2005 | 00:22

    我想應該是我說的不夠詳細的吧!
    抱歉了!!
    之前我有更新過一次了
    也就是使用tinymce2.0.1從新覆蓋過暸一次
    此時我就發現有UTF8的語系檔
    我就在tiny_mca-plog.js的地方加上了
    language:"zh_tw_utf8",
    然後就發現了
    他就是讀取不到/tinymce/jscripts/tiny_mce/themes/advanced/langs/的語言檔
    會出現語法
    但是可以讀取到/tinymce/jscripts/tiny_mce/langs的語言檔
    重覆試了幾次之後我就放棄了
    在看到阿欣老師你發這一篇文章之後
    我就再重新覆蓋一次就OK暸
    所以我再猜會不會當初我有哪些地方沒有覆蓋到的吧....
    謝謝阿欣老師幫我解決暸這樣的問題
    我很喜歡你的文章的喔!!!
    PS:順便想請問阿欣老師ㄧ下,
    不知道阿欣老師有沒有試過想要抓取
    Gallery2裡面的slideshow放到一般的網頁上
    不是BLOG的喔
    感謝的喔

  14. 12/08,2005 | 22:04

    前面說到用tinymce插入圖片,發表文章後,若再重新編輯,會發現圖片看不到的問題。

    回家中,才發現,這並不是tinymce的問題,而是firefox的問題。

    在學校的電腦,firefox的版本是1.5版,家中的電腦是1.07版,所以剛剛用1.07版的firefox去編輯就會發現圖片又不見了。

    剛剛去更新firefox 1.5版,就沒有了這樣的問題了(在IE也沒有這問題)。

    good,又解決了一件困惑的事。太可笑嘍

  15. 12/08,2005 | 16:04

    你是加上了
    language : "zh_tw_utf8",
    才解決的嗎?

  16. 12/08,2005 | 15:45

    阿欣老師你好
    我最後發現不是tiny_mca-plog.js的問題
    因為我使用暸你的js也是會出現問題
    所以最後我又從新在跟新一次
    覆蓋tiny整各資料夾就好了
    謝謝你幫我測試找出問題的ㄚ
    感恩
    二溪國小替代役微笑

  17. 12/08,2005 | 15:10

    之前在編輯文章時,若插入了圖片,發表文章後,若再進入修改、編輯文章,會發現圖片看不到。

    需要進入html編輯模式,再將一些多出的amp;刪除掉,才能再看到圖片。

    現在改用tinymce2.0.1,這問題好像就解決了。微笑

  18. 12/08,2005 | 12:59

    中文語系,目前在我這裡是正常可用的。看看迴響編輯區塊那幾個圖示就知道了。

    很奇怪的,剛剛去看了你的tiny_mce-plog.js那檔案,又看了lss的tiny_mce-plog.js,你們的檔案內容是一樣的,可是我的tiny_mce-plog.js怎麼跟你們的不太一樣?

    可是我的檔案應該也是從lss那裡拿過來的呀!難道是lss老師曾經改變過那個檔案嗎?我真的不清楚了,不過,至少目前為止,我這邊可以用中文語系,使用上好像也沒問題。

    你要不要先試試看去將我的tiny_mce-plog.js複製回去,看看能不能用。

    ps:剛剛才發覺這個迴響編輯區的文字太小了,等一下去改改

  19. 12/08,2005 | 12:04

    阿欣老師你好
    我就是那一個在lss實驗室發言的那一個
    想請問你一下語言包可以使用的嗎
    因為我也有修改過了
    但是他就是讀取不到 /tinymce/jscripts/tiny_mce/themes/advanced/langs/的語言包
    但是可以讀取到/tinymce/jscripts/tiny_mce/langs
    所以想請問阿欣老師一下
    是不是我的修改有哪裡出暸問題的ㄚ
    二溪國小老師留