所見即所得編輯器 + 圖片上傳 (tinymce + img_assist)

簡介

此文將會介紹:

  1. tinymce、image、img_assist的安裝流程
  2. tinymce搭配drupal的image、img_assist模組,整合圖片上傳、插入文章的介面,結合image的好處是將每一個圖片視為一個node,比imce方便做後續利用。
  3. tinymce附設的drupalbreak安裝方式,讓內文可以無痛插入摘要分隔
  4. tinymce總是會清掉html多餘的空白,本文提供解決方式

需求模組

Image 模組(image)
Tinymce 模組(tinymce) + tinymce 編輯器檔案 (下載)
Image Assist 模組 (img_assist)

快速安裝流程

檔案配置

  1. 將image, img_assist, tinymce三個模組解壓縮
  2. 將tinymce編輯器檔案(tinymce_2_1_1.zip) 拷貝至剛剛解壓模組的資料夾tinymce裡頭
  3. 解壓縮tinymce_2_1_1.zip,解出來的檔案會在tinymce/tinymce
  4. 到這裡,共會有三個資料夾
    image/
    img_assist/
    tinymce/

安裝tinymce plugin

  1. 找到 img_assist/drupalimage 、 tinymce/plugins/drupalbreak 這兩個資料夾,都拷貝至tinymce/tinymce/jscripts/tiny_mce/plugins
  2. 編輯tinymce/plugin_reg.php這個檔案,在return $plugins;前面加入下面給行

$plugins['drupalimage'] = array();
$plugins['drupalimage']['theme_advanced_buttons1'] = array('drupalimage');
$plugins['drupalimage']['extended_valid_elements'] = array('img[class|src|border=0|alt|title|width|height|align|name]');
$plugins['drupalbreak'] = array();
$plugins['drupalbreak']['theme_advanced_buttons3'] = array('drupalbreak', 'drupalpagebreak');

搬移及安裝

== 將三個資料夾都移至 drupal/sites/all/modules裡頭

設定

接下來都是web畫面,到admin/build/modules啟用image, tinymce, img_assist三個模組

權限設定

== 到admin/user/access設定權限, 如圖:
image和img_assist權限設定
access img_assist 打開,可以在發文時插入圖片
create image 和 access img_assist 都打開,發文時插入、上傳新圖片

建立tinymce profile

== 在tinymce設定頁面(admin/settings/tinymce)新增一個profile,然後可以選擇button,如圖:
image和img_assist權限設定
在button列表最後,可以看到多兩個DrupalImage和Drupal teaser/Body Break,勾選以打開~
注意,此設定中,可以用tinymce權限的角色,access img_assist 權限也要打開,drupalimage才有用

關掉image assist預設的button

== 在img_assist設定頁面(admin/settings/img_assist),找到Access settings底下的Textarea image link,如圖:
image和img_assist權限設定
因為image assist在沒有裝tinymce時,有自己的button,因此需要取消顯示,將他選為Do not show link,交給tinymce處理。

建立給tinymce用的圖片大小 (optional)

== 在image設定頁面,增加新的大小(admin/settings/image),如圖:
image和img_assist權限設定
== 在img_assist設定頁面,設定預設的縮圖及彈出視窗的縮圖大小,如圖:
image和img_assist權限設定

hack (optional)

取消html排版亂碼的方式

  1. 修改tinymce.module
  2. <?php
    function tinymce_config($profile) {
     
    //....
     
    $init['preformatted']       = $settings['preformatted'] ? $settings['preformatted'] : 'false';
     
    // 在這之後加入以下這一行
     
    $init['apply_source_formatting']       = true;
    ?>

  3. 到輸入格式設定(admin/settings/filters),新增一個給tinymce用的input format,把自動斷行、分段去掉

回應

kiku 的照片

Re: 所見即所得編輯器 + 圖片上傳 (tinymce + img_assist)

將三個資料夾都移至 drupal/sites/all/modules裡頭

咦 模組不是應該放在drupal/modules底下

Hipfox 的照片

Re: 所見即所得編輯器 + 圖片上傳 (tinymce + img_assist)

答案在 sites/all/README.txt

tommyk 的照片

Re:

請問 依照說明安裝, 大部分都正常, 但是 點選 DrupalImage 這個button 時,
似乎找不到網頁 ( 會跳到首頁) .
點選 Drupal Image 時, 連結的 URL 為
http://Server_ip/drupal/sites/all/index.php?q=img_assist/load/tinymce
sites/all 目錄下應該沒有這個index.php 請問是哪裡有問題? 謝謝

晚上再測試時 若改為 http://Server_ip/drupal/?q=img_assist/load/ 可以看到一個
Browse Image 或 上傳 a new image 的網頁

tommyk 的照片

Re: 所見即所得編輯器 + 圖片上傳 (tinymce + img_assist)

jp問題已經解決了
必須要將 原文裡面的
搬移及安裝
== 將三個資料夾都移至 drupal/sites/all/modules裡頭
改成 搬移到 drupal/modules 如此就可以了.

LeS 的照片

Re: 所見即所得編輯器 + 圖片上傳 (tinymce + img_assist)

我也有類似的組合
是用Excerpt + Pictures
Pictures是(image類似的功能,不過不用節點,比較像是imagecache的用法)
Excerpt則是teaser與content分開來寫,對於插入圖案的控制更容易拿來排版歐。
而且Pictures在TinyMCE的plugin也跟這篇文章提供的方法雷同。

各得其所。

charlesc 的照片

Re: 所見即所得編輯器 + 圖片上傳 (tinymce + img_assist)

Pictures 看起來不錯用,多謝推薦!
(有空的話可以寫一下模組介紹哦)

kbehouse 的照片

Re: 所見即所得編輯器 + 圖片上傳 (tinymce + img_assist)

用page建立內容之後,

沒辦法顯示圖片,

而出現以下:

[img_assist|nid=5|title=yes|desc=|link=none|align=left|width=250|height=141]

請問是什麼問題?

kooala 的照片

Re: 所見即所得編輯器 + 圖片上傳 (tinymce + img_assist)

要把 image 的語法打開

到/admin/settings/filters 的設定中
裡面有個 image 顯示之類的

kbehouse 的照片

Re: 所見即所得編輯器 + 圖片上傳 (tinymce + img_assist)

可以囉,謝謝

把admin/settings/filters/裡面的

Inline images
Add images to your posts with Image assist.

這個打勾就可以了

bigmonster 的照片

Re: 所見即所得編輯器 + 圖片上傳 (tinymce + img_assist)

我是安裝了tinymce也啟動了,但要設定時他就會說
Lastly, only users with the access tinymce permission will be able to use TinyMCE
不管我如何設定使用權限就是不給我用....我其他設定也可以成功的說
有大大知道是哪邊出了問題嗎?

charlesc 的照片

Re: 所見即所得編輯器 + 圖片上傳 (tinymce + img_assist)

有去權限設定的地方分配權限給特定角色嗎?

bigmonster 的照片

Re: 所見即所得編輯器 + 圖片上傳 (tinymce + img_assist)

謝謝大大的回應
已找到問題所在了......原來是改版面時不小心有東西給刪了
所以顯示會少了增加profile
已經沒問題了
謝謝

christine1126 的照片

Re: 所見即所得編輯器 + 圖片上傳 (tinymce + img_assist)

大家可以在image_assist模组介绍里发现,好像image_assist 模组,以后不支持tinymce了。

heres 的照片

Re: 所見即所得編輯器 + 圖片上傳 (tinymce + img_assist)

搞了一個晚上,怎麼還是沒看到呀!?
都按圖做了=.=

Drupal teaser/Body Break選鈕找不到!

charlesc 的照片

Re: 所見即所得編輯器 + 圖片上傳 (tinymce + img_assist)

去功能/按鈕設定部份找看看?
也有可能是因為版本不同,建議還是看一下 readme.txt