1,459 瀏覽數

Drupal – TinyMCE Modules

Modules – TinyMCE
系統預設的編輯器是很陽春,什麼功能都沒有,所以先介紹這的 Module TinyMCE (所見即所得編輯器) 因為 TinyMCE 整個模組的架構很大但最精簡的需要下載三個檔案

  1. TinyMCE 2.1 Editor
    http://drupal.org/project/tinymce
    tinymce01
    目前 drupal 正式的版本為5.x 所以我們只需下載這個 official releases 版本即可.
  2. TinyMCE 核心程式
    http://tinymce.moxiecode.com/download.php
    tinymce02
    目前穩定的版本為 2.1.2 至於 3.x 是還在測試階段的版本,如果要用於正式架站就請用穩定的版本.至於你要用 .tgz 還是 .zip 都可以,在 Linux 下可以用不同的工具解開(.tgz -> tar ; .zip -> unzip)
    我們會下載到兩個檔案
    tinymce-5.x-1.9.tar.gz 直接解壓縮到 /var/www/html/modules 就可以用了.

    [root@benjr ~]# tar zxvf tinymce-5.x-1.9.tar.gz
    

    但是要注意的是 tinymce_2_1_2.gz 則要放在/var/www/html/modules/tinymce/tinymce

    [root@benjr ~]# mkdir tinymce/tinymce
    [root@benjr ~]# cp tinymce_2_1_2.gz tinymce/
    [root@benjr ~]# cd tinymce
    [root@benjr tinymce]# tar zxvf tinymce_2_1_2.gz
    

    最後再將整個目錄複製到 /var/www/html/modules

    [root@benjr ~]# cp -a tinymce /var/www/html/modules/
    
  3. TinyMCE 中文語言套件
    因為 tinyMCE有提供中文套件語言,不過還是要額外再下載.下載的網址 http://tinymce.moxiecode.com/download.php
    tinymce03
    在下載 Download 的網站你可以看到 Language Packages 選擇中文(Chinese)套件來下載.
    tinymce04
    這中文套件包括了繁體中文.拉到最面就可以看到 "Download" 按下來下載.
    tinymce05
    tinymce06
    在 Linux 下可以你要解開  .zip 可以用 unzip

    [root@benjr ~]# cp tinymce_lpackage.tgz /var/www/html/modules/tinymce/
    [root@benjr ~]# cd /var/www/html/modules/tinymce
    [root@benjr tinymce]# gunzip zxvf tinymce_lpackage.zip
    

    不過還要先設定一下才能使用.在管理/模組/網站建置下的 other 可以看到我們剛剛複製到 module 目錄下的新模組(TinyMCE).把他啟用在設定儲存起來.
    tinymce07
    在設定 Tinymce 設定開始前.我們還要針對 管理/使用者管理/權限 作設定.我們讓一般人擁有使用權就好了而 administrators 可以做設定.
    tinymce08
    接下來我們會在 管理/模組/網站設定 多出 TinyMCE 的設定.點進去這一下設定. 因為 tinymce 可以依據不同的使用者來設定出不同的編輯環境.所以這裡要設定至少一個 profile.你也可以依據需求幫大家設定出不同的編譯環境.
    tinymce09
    Profile name 就隨便設定了,找一個你方便記的名稱.Enabled default state 時可讓編譯器預設就顯示 tool bar 的設定.Roles allowed to use this profile 看你這個設定,是要給有登入的使用者(Authenticated user)來使用,還是沒登入的使用者(Anonymous user)來使用.語言就選擇中文 Zh_tw_utf8
    tinymce10
    接下來就是 Buttons and plugins 可以看到很多圖示,這就是將來我們使用的編輯器會有什麼功能就是在這裡選擇,先選一些基本的功能就好了.
    tinymce11
    至於其他的設定就先預設的好了.按下 create profile後回到 建立內容/Page看看我的編輯器是長的怎麼樣.現在看到的編輯器是系統預設的,但是你按下 enable rich-text 就可以看到 tinymce 的編輯器.
    tinymce12
    如果你看到 粗,斜,字 是亂碼那代表剛剛你的中文字型沒安裝好或這剛剛選擇字型和下載字型沒有一樣.
    tinymce13
    note:
    在編輯時按 enter 和 shift + enter 鍵會有不同的作用.按下 enter 換行時,編輯器會使用 <p> 當作Html 分段語法,但是按下 shift+enter 換行時會用 <br> 當作換行的 Html 語法.<p>與<br> 最大的不同點是<p>它是分段,.也就是行跟行之間會有間距,但是<br>就真的是換行不會特別大的間距,所以你可以依據你的需求使用 enter 或是 shift + enter.

2 個網友的想法 “Drupal – TinyMCE Modules

  1. 自動參照通知: Drupal | Benjr.tw

  2. 自動參照通知: Druapl 7 Modules – TinyMCE 文字編輯器(一) | Benjr.tw

發表迴響