{{{ #!trachtml

TinyMCEWikiPlugin

概要

WikiをWISiWYGで編集可能にするプラグインです。
!TracLink ,Macro,Links,Processerを使用可能です。
標準のWikiModuleを置き換える形で動作します。

注意

このプラグインで保存したデータは、Wiki文法にのっとったデータではありません。TracLinkやMacro等をHTMLに混ぜたものです。
今後デフォルトのWikiエディタでデータを編集するのは難しくなります。

使い方

必要なもの

インストール

  1. tinyMceをダウンロードし解凍する。できたtinymceという名前のフォルダ(tiny_mceではない)を、share/trac/htdocs配下に配置する。
  2. tinymce_trac.css を上記のtinymceフォルダ直下に配置する。
  3. デフォルトの Wiki Module を使用不可にする。 このプラグインはWiki Moduleを置き換える形で動作します。 trac.iniに以下を追加してください。
    [components]
    trac.wiki.web_ui.WikiModule= disabled

    もし、デフォルトハンドラがWiki Moduleになっていたら、以下の記述も加えてください。

    [trac]
    default_handler = TinyMceWikiPlugin
  4. TinyMceWiki-0.1-py2.3.eggを [!TracEnv]/templates/plugins/に配置する。

TinyMCEをカスタマイズするには

tinymceconf.csというファイルをTracEnvのtemplatesに置 くと、そちらを優先して読み込みます。ソースにあるtinymceconf.csをtemplatesフォルダにおいてから、TinyMCEのドキュメン トを読んで、このファイルを編集してください。

各国語対応するには

tinymcewiki.csというファイルをTracEnvのtemplatesに置くと、そちらを優先して読み込みます。ソースにあるtinymcewiki.csをtemplatesフォルダにおいてから、このファイルを編集してください。

日本語版のtinymcewiki.csを置いておきます。TracEnvのtemplatesフォルダに置いてください。[http://www.i-act.co.jp/project/products/products.html インタアクトさん] の trac-0.9.2-ja-1 のwiki.csをベースにしてます。
trac-0.9.4-ja-1 でも変更はなさそう。

Trac用TinyMCEのお勧め設定

TinyMCE pluginでは、tinymceconf.csを置くことで、TinyMCEの表示をカスタマイズできます。で、標準ではいっぱい表示されてうざいので、適当に選んでみました。こんな感じの1行のツールバーが表示されます。


あと、日本語ファイル(ja.js)も直してます。

以 下の内容をtinymceconf.csというファイル名でTracEnvのtemplatesフォルダに保存してください。なお、 force_p_newlineはEnterキーを押したときに<P>ではなく<BR />を挿入する「Enterキーを押したら改行だろう」というWord好きの人向けの設定となっています。「Enterキーを押したら< P>に決まってる!」というHTMLエディタ好きの人は、trueに設定してください。
注:ブログに載せた記述は誤りがありました。以下が正しいです。m(_ _)m

<script language="javascript" type="text/javascript" xsrc="<?cs var:htdocs_location ?>tinymce/jscripts/tiny_mce/tiny_mce.js"></script>

<script language="javascript" type="text/javascript">
tinyMCE.init({
mode : "textareas",
width : "100%",
language : "ja",
content_css : "<?cs var:htdocs_location ?>tinymce/tinymce_trac.css",
force_p_newlines : false,
theme : "advanced",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,
theme_advanced_resize_horizontal : false,
plugins : "table,contextmenu,emotions,save,searchreplace",
theme_advanced_layout_manager : "SimpleLayout",
theme_advanced_buttons1 : "save,search,replace,separator,bold,italic,insertdate,underline,strikethrough,separator,bullist,numlist,outdent,indent,formatselect,separator,hr,table,link,unlink,emotions,separator,cleanup,help,code",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : ""

});

</script>
ところで、TinyMCEではlanguageとして言語を指定可能なのですが、標準でついているja.jsはJISで保存されているため、文字化けが発 生します。さらに、一部はなぜかテキストエディタで開こうとしても文字化けします(ー’`ー;) 。で、直してみました。以下の内容をUTF-8で保存すれば正しく表示されます。

langs/ja.js UTF-8で保存すればOK
plugins/table/langs/ja.js 文字が化けてる。以下の内容を保存。
themes/advances/langs/ja.js そもそも古いようだ。以下の内容を保存。

themes/advances/langs/ja.js

// JP lang variables

tinyMCE.addToLang('',{
theme_style_select : 'スタイル',
theme_paragraph : '段落',
theme_address : 'アドレス',
theme_pre : '整形済み',
theme_h1 : 'H1',
theme_h2 : 'H2',
theme_h3 : 'H3',
theme_h4 : 'H4',
theme_h5 : 'H5',
theme_h6 : 'H6',
theme_div : 'Div',
insert_anchor_title : 'アンカーの挿入/編集',
insert_anchor_name : 'アンカーの名前',
theme_anchor_desc : 'アンカーの挿入/編集',
theme_code_desc : 'HTMLの直接編集',
theme_code_title : 'HTMLの編集',
theme_code_wordwrap : 'Word wrap',
theme_hr_desc : '水平線',
theme_removeformat_desc : '整形情報削除',
theme_visualaid_desc : '補助情報の視覚化(トグル)',
theme_sub_desc : '添字下',
theme_sup_desc : '添字上',
theme_charmap_desc : '特殊文字の入力',
theme_charmap_title : '特殊文字を選択して下さい',
insert_image_dimensions : '大きさ指定',
insert_image_border : '境界幅',
insert_image_vspace : '縦余白',
insert_image_hspace : '横余白',
insert_image_align : '位置合わせ',
insert_image_align_default : '暗黙',
insert_image_align_baseline : '基準線',
insert_image_align_top : '上',
insert_image_align_middle : '中',
insert_image_align_bottom : '下',
insert_image_align_texttop : '文字の上',
insert_image_align_absmiddle : '絶対に中',
insert_image_align_absbottom : '絶対に下',
insert_image_align_left : '左',
insert_image_align_right : '右',
theme_font_size : '-- フォントサイズ --',
theme_fontdefault : '-- フォント --',
theme_block : '-- 書式 --',
theme_colorpicker_title : '色の選択',
theme_colorpicker_apply : '適用',
theme_forecolor_desc : 'テキストの色',
theme_backcolor_desc : '背景色',
theme_charmap_title : '文字の表',
theme_charmap_desc : '文字の挿入',
theme_visualaid_desc : 'ガイドライン/非表示要素の表示',
insert_anchor_title : 'アンカーの挿入/編集',
insert_anchor_name : 'アンカーの名前',
theme_anchor_desc : 'アンカーの挿入/編集',
theme_insert_link_titlefield : 'タイトル',
theme_clipboard_msg : 'コピー/切り取り/貼り付けはMozillaとFirefoxでは使用出来ません。\n詳しい情報を参照しますか?',
theme_path : 'パス',
cut_desc : '切り取り',
copy_desc : 'コピー',
paste_desc : '貼り付け',
link_list : 'リンクの一覧',
image_list : '画像の一覧',
browse : 'ブラウズ',
image_props_desc : '画像のプロパティ',
newdocument_desc : '新しいドキュメント',
class_name : 'クラス',
newdocument : '全ての記事をクリアしてよろしいですか?',
about_title : 'TinyMCEについて',
about : 'About',
license : 'License',
plugins : 'Plugins',
plugin : 'Plugin',
author : 'Author',
version : 'Version',
loaded_plugins : 'Loaded plugins',
help : 'Help',
not_set : '-- Not set --',
close : '閉じる',
toolbar_focus : 'ツールボタンへ移動 - Alt+Q, エディタへ移動 - Alt-Z, 要素のパスへ移動 - Alt-X'
});

plugins/table/langs/ja.js

// JP lang variables

tinyMCE.addToLang('table',{
general_tab : '全般',
advanced_tab : '上級',
general_props : '全般プロパティ',
advanced_props : '上級プロパティ',
desc : '表',
row_before_desc : '行の挿入(前)',
row_after_desc : '行の挿入(後)',
delete_row_desc : '行の削除',
col_before_desc : '列の挿入(前)',
col_after_desc : '列の挿入(後)',
delete_col_desc : '列の削除',
rowtype : '行のタイプ',
title : '表の挿入/編集',
width : '幅',
height : '高さ',
cols : '列',
rows : '行',
cellspacing : 'セルのスペース',
cellpadding : 'セルのパディング',
border : '境界線',
align : '配置',
align_default : 'デフォルト',
align_left : '左詰め',
align_right : '右詰め',
align_middle : '中央寄せ',
row_title : '行のプロパティ',
cell_title : 'セルのプロパティ',
cell_type : 'セルのタイプ',
row_desc : '行のプロパティ',
cell_desc : 'セルのプロパティ',
valign : '縦の配置',
align_top : '上寄せ',
align_bottom : '下寄せ',
props_desc : '表のプロパティ',
bordercolor : '境界線の色',
bgcolor : '背景色',
merge_cells_title : 'セルの結合',
split_cells_desc : 'セルの分割',
merge_cells_desc : 'セルの結合',
cut_row_desc : '行の切り取り',
copy_row_desc : '行のコピー',
paste_row_before_desc : '行の貼り付け(前)',
paste_row_after_desc : '行の貼り付け(後)',
id : 'ID',
style: 'スタイル',
langdir : '言語の方向',
langcode : '文字コード',
mime : 'ターゲットMIMEタイプ',
ltr : '左から右',
rtl : '右から左',
bgimage : '背景画像',
summary : '概要',
td : "データ",
th : "ヘッダ",
cell_cell : 'このセルを更新',
cell_row : '行の全てのセルを更新',
cell_all : '表の全てのセルを更新',
row_row : 'この行を更新',
row_odd : '表の奇数行を更新',
row_even : '表の偶数行を更新',
row_all : '表の全ての行を更新',
thead : '表のヘッダ',
tbody : '表のボディ',
tfoot : '表のフッタ',
del : '表の削除',
scope : 'スコープ',
row : '行',
col : '列',
rowgroup : '行のグループ',
colgroup : '列のグループ',
table_props_desc : '表のプロパティ',
missing_scope: 'このテーブルのヘッダセルのスコープを特定しないと、利用者によっては表示されている内容を理解することが困難になります。続けてよろしいですか?'
});

}}}