首頁

所見即所得編輯器 + 圖片上傳 (tinymce + img_assist) 於 週三, 2007-05-09 18:10 的修訂版本

週三, 2007-05-09 18:10 — jimmy

簡介

此文將會介紹：

  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三個模組
新增給tinymce使用的輸入格式

hack

取消html排版亂碼的方式

<?php
function tinymce_config($profile) {
  $init['preformatted']       = $settings['preformatted'] ? $settings['preformatted'] : 'false';
  // 加入以下這一行
  $init['apply_source_formatting']       = true;
?>