PukiWikiをTinyMCEで編集することができるプラグインを作成しました


投稿日:2018年1月3日
  • 0
  • 0



GUIエディタのTinyMCEを利用するtinymceedit

PukiWikiを編集するにはWiki独自の記述方法を覚える必要があります。
Wikiの記述方法は近年人気のMarkdown形式のように作業効率の良いものですが、どうしても慣れが必要です。

編集に参加したいけど記述方法がわからずない」という利用者も一定数存在します。
Wikiの場合、そうした層を取り込めるかどうかが、サイトの質に直結します。
そういった方に参加してもらうのに便利なのがリッチエディタ(WYSIWYGエディタ)です。

PukiwikiにはPukiWiki Plus!用のguieditというプラグインがありました。
ただし本体であるPukiWiki Plus!が開発を終了し、プラグインを配布していたサイトも閉鎖されています。運良く手に入ったとしても、脆弱性のある古いタイプのCKEditorを利用しているため、非常に危険です。

そこで今回、前出のguieditを元に、最新のTinyMCEを利用したtinymceeditというプラグインを作成しました。
なぜCKEditorではなく、TinyMCEを採用したかですが、WordPress等で採用されるなど脚光を浴びている点もありますが、どうせ作り直すなら独自色を出したいという色気ですw


更新履歴

0.1.1 プラグインを書き出す際のEntity処理を追加(&noteが正しく出力できない問題の対策)
0.1.2 マルチラインプラグインの改行が勝手に削除される問題に対処


tinymceeditを導入する方法

このプラグインはPukiWikiのページを必要に応じてWikiの形式にしたり、XHTMLの形式にしたりという、大掛かりな動作を伴います。
また、ビジュアルエディタはバージョンの違いはもちろん、OSやブラウザによっても動作が異なります。

こうした特性から、以下の条件に限り安定動作します。

前提条件

1.動作するのは公式のPukiWikiのみ

このプラグインはPukiWikiでのみ動作します。PukiWiki Plus!はサイトが閉鎖されており、動作確認ができないためサポートしません。

1.ブラウザはWindows 10のChromeのみ

ブラウザはWindows 10のChromeのみ検証。ブラウザの差異まで吸収するとなると膨大な時間がかかるため。(有志の方による、より良いコードの提案は受け付けています)

1.マルチラインプラグインが有効

pukiwiki.ini.phpにある「PKWKEXP_DISABLE_MULTILINE_PLUGIN_HACK」の項目は「0」で、マルチラインプラグインを有効にしていること。

1.改行の扱いは$line_breakで有効

上と同じくpukiwiki.ini.phpにある「$line_break」の項目が「1」で有効になっていること。
改行が全て無視されるというオリジナルの仕様は明らかにおかしいため。また、ほとんどのサイトで有効になっているため。

1.以下の変更を自分のサイトに合わせて応用できること

このプラグインはPukiWiki本体のファイルを編集する必要があります。skinなど、構成はサイトごとに異なります。そのため、この解説はあくまで一例です。自分のサイト合わせて応用してください。

ファイルのダウンロード

以下のリンクからファイルをダウンロード、解凍してください。
tinymceedit 0.1.2

pluginフォルダの以下の三点をPukiWikiのpluginフォルダへ移動

  • tinymceedit.inc.php – プラグインの本体
  • xhtml2wiki.php – TinyMCEエディタのxhtmlをPukiWikiの書式へ変換するファイル
  • wiki2html.php – PukiWikiの書式をTinyMCEの形式へ変換するファイル

skinフォルダのtinymceフォルダをskinフォルダへ移動

  • tinymce – TinyMCEエディタの各種jsファイル エディタ設定部分のhtml 追加したプラグインボタン

PukiWikiの以下のファイルを編集

lib\html.php

62行目あたり

$_LINK['edit']     = "$script?cmd=edit&page=$r_page";

以下のように追加。

$_LINK['edit']     = "$script?cmd=edit&page=$r_page";
$_LINK['tinymceedit']     = "$script?cmd=tinymceedit&page=$r_page";

286行目あたり以下の部分を。

$s_postdata  = htmlsc($refer . $postdata);

以下のように編集。

// TinyMCEにより自動でEntity化してしまうため振り分ける
if ( $vars['cmd'] == "edit" ){
	$s_postdata  = htmlsc($refer . $postdata);
} elseif ( $vars['cmd'] == "tinymceedit" ){
	$s_postdata  = $refer . $postdata;
}

308行目あたりの上に

// 'margin-bottom', 'float:left', and 'margin-top'

以下のように追加。

// 通常のeditとtinymceeditによって振り分けを行う。
if ( $vars['cmd'] == "edit" ){
	$cmd = "edit";
} elseif ( $vars['cmd'] == "tinymceedit" ){
	$cmd = "tinymceedit";
}

// 'margin-bottom', 'float:left', and 'margin-top'

256行目あたりのヘッダー部分を編集

	$body = <<<EOD
<div class="edit_form">
 <form action="$script" method="post" style="margin-bottom:0px;">
$template
  $addtag
  <input type="hidden" name="cmd"    value="edit" />
  <input type="hidden" name="page"   value="$s_page" />
  <input type="hidden" name="digest" value="$s_digest" />
  <textarea name="msg" rows="$rows" cols="$cols">$s_postdata</textarea>
  <br />
  <div style="float:left;">
   <input type="submit" name="preview" value="$btn_preview" accesskey="p" />
   <input type="submit" name="write"   value="$_btn_update" accesskey="s" />
   $add_top
   $add_notimestamp
  </div>
  <textarea name="original" rows="1" cols="1" style="display:none">$s_original</textarea>
 </form>
 <form action="$script" method="post" style="margin-top:0px;">
  <input type="hidden" name="cmd"    value="edit" />
  <input type="hidden" name="page"   value="$s_page" />
  <input type="submit" name="cancel" value="$_btn_cancel" accesskey="c" />
 </form>
</div>
EOD;

以下のように編集。

$body = <<<EOD
<div class="edit_form"><form style="margin-bottom: 0px;" action="$script" method="post">$template
$addtag
<input name="cmd" type="hidden" value="$cmd" />
<input name="page" type="hidden" value="$s_page" />
<input name="digest" type="hidden" value="$s_digest" />
<textarea id="tinymce" cols="$cols" name="msg" rows="$rows">$s_postdata</textarea>

<textarea id="tinymce" style="display: none;" cols="1" name="original" rows="1">$s_original</textarea>
<div style="float: left;"><input accesskey="p" name="preview" type="submit" value="$btn_preview" />
<input accesskey="s" name="write" type="submit" value="$_btn_update" />
$add_top
$add_notimestamp</div>
</form><form style="margin-top: 0px;" action="$script" method="post"><input name="cmd" type="hidden" value="$cmd" />
<input name="page" type="hidden" value="$s_page" />
<input accesskey="c" name="cancel" type="submit" value="$_btn_cancel" /></form></div>
EOD;

ja.lng.phpの編集(必要であればen.lng.phpも編集)

メニューの表示ですがGUIエディタを利用するユーザー層を想像すると、「WYSIWYGエディタ」や「リッチテキストエディタ」と書いても何のことか理解しにくいのではないでしょうか。
同じ理由で「GUIエディタ」というのも向いていないと思います。
ということで、人気のCMS WordPressで採用されている「ビジュアルエディタ」という文言を採用しました。このへんはサイトの利用者層によって、自由に設定してください。

109行目あたり

$_LANG['skin']['edit']      = 'ページの編集';

以下を追加。

$_LANG['skin']['edit']      = 'ページの編集';
$_LANG['skin']['tinymceedit']      = 'ビジュアルエディタで編集';

skin/pukiwiki.skin.phpを編集

まずはheadの最後あたりにjQueryを追加します。(既に読み込んでいる場合は不要。jqueryは2系でも動作するはず)

</head>

以下のように追加

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>

例として、GUIエディタを追加したい場所に追加。(アイコンも変化をつけたい場合は用意した画像に差し替えてください)

$_IMAGE['skin']['edit']     = 'edit.png';

以下のように追記。

$_IMAGE['skin']['edit']     = 'edit.png';
$_IMAGE['skin']['tinymceedit']     = 'edit.png';

あとは表示したい部分に「_navigator(‘tinymceedit’)」を追加するだけです。例としてヘッダーに追加するには、129行目あたり

<?php _navigator('edit') ?> |

以下のように追記。

<?php _navigator('edit') ?> |
<?php _navigator('tinymceedit') ?> |

メニュー(toolbar)に表示するには244行目あたり、

<?php _toolbar('edit') ?>

以下のように追記。

<?php _toolbar('edit') ?>
<?php _toolbar('tinymceedit') ?>

以上で動作するはずです。以下はPukiWiki1.5.1をインストールした直後に上の変更を加えた表示サンプル。


サポートしている書式

PukiWikiで採用されている基本的な記法はサポートしています。
具体的には以下のとおりです。

段落

~ インライン要素

引用文

> インライン要素

リスト構造

- インライン要素

リスト構造

+ インライン要素

表組み

| インライン要素 | インライン要素 |

CSV形式の表組み

,データ,データ,…

見出し

*、**、*** の3段階

左寄せ・センタリング・右寄せ

LEFT:インライン要素
CENTER:インライン要素
RIGHT:インライン要素

水平線

----

スマイルマーク

現状使う人がいるかも疑問ですが、一応オリジナルと同じスマイルマークが選べるようにボタンを実装しました。

----

行間開け

#br

改行は結論から書くと連続した改行はそのまま返します
この仕様には賛否あると思いますが、可能な限り作成された文章に手を加えないという判断をしました。

TinyMCEの仕様上、改行は段落を意味し、pタグで囲まれます。
pタグ内(テーブル内など)で改行をしたい場合は「Shift + Enter」をご利用ください。

追記:早速要望を頂いたので改行ボタンを追加しました。以下のボタンをクリックすると段落で改行が可能になります。

添付ファイル・画像の貼り付け(プラグイン用の記述)

通常、画像の貼り付けにはrefプラグインを使うと思います。
今回、プラグインは独自のボタンを設置しました。
以下のプラグインボタンをクリックすると記述することができます。

添付ファイルを追加するrefプラグインの場合。

1.プラグインボタンをクリック

2.「タイプ」で「インライン型」もしくは「ブロック型」を選びます。
ちなみにインライン要素は「&」ではじまり「;」で終わるもの(&size(12){ほげ};など)。ブロック要素は「#」で始まるもの。(#brなど)

3.「プラグイン名」はそのままプラグインの名前。refプラグインなら「ref」といった具合。

4.「オプション」はプラグインのオプションを設定します。いわゆる、プラグインに渡す引数の部分です。refプラグインなら「sample.jpg,around,nolink,400×300」など

5.「インライン要素」は少し特殊で、インライン要素を示す「{}」の部分から記述する必要があります。サイズの指定を行う場合は「&size(12){ほげ};」といった具合に記述します。ちなみに最後の「;」は自動でつくので必要ありません。

プラグイン部分をダブルクリックすることでプラグインウィンドウが開きます。入力した情報は新しいウィンドウに引き継がれます。

プラグイン部分を選択した状態でプラグインボタンをクリックした場合も同じ仕様を考えていたのですが、editor.addButtonのコールバックにエディタの情報を渡す方法が思いつかなかったのでペンディング。

他にもエディタの機能で画像を表示したり、refプラグインの形式に変換して書き換えることも可能ですが、画像をページにアップロードするというPukiWikiの記述方法を考えると蛇足な気がするので実装しませんでした。
(プレビューを押せば確認できます)

強調・斜体

(''インライン要素''、'''インライン要素''')

文字サイズ

&size(サイズ){インライン要素};

PukiWikiではpx指定が一般的なので、慣習にならっています。
実装しておいてなんですが、レスポンシブ時代に逆行するため、例外的な仕様に留めて、基本はCSSでの指定がおすすめです。ちなみに一番右端にあるボタン「書式をクリア」ボタンで指定を解除できます。

文字色

&color(文字色,背景色){インライン要素};

テキストの色」というプルダウンメニューから色を指定することができます。

指定できる色はTinyMCEで設定されている色だけです。

"000000", "Black",
"993300", "Burnt orange",
"333300", "Dark olive",
"003300", "Dark green",
"003366", "Dark azure",
"000080", "Navy Blue",
"333399", "Indigo",
"333333", "Very dark gray",
"800000", "Maroon",
"FF6600", "Orange",
"808000", "Olive",
"008000", "Green",
"008080", "Teal",
"0000FF", "Blue",
"666699", "Grayish blue",
"808080", "Gray",
"FF0000", "Red",
"FF9900", "Amber",
"99CC00", "Yellow green",
"339966", "Sea green",
"33CCCC", "Turquoise",
"3366FF", "Royal blue",
"800080", "Purple",
"999999", "Medium gray",
"FF00FF", "Magenta",
"FFCC00", "Gold",
"FFFF00", "Yellow",
"00FF00", "Lime",
"00FFFF", "Aqua",
"00CCFF", "Sky blue",
"993366", "Red violet",
"FFFFFF", "White",
"FF99CC", "Pink",
"FFCC99", "Peach",
"FFFF99", "Light yellow",
"CCFFCC", "Pale green",
"CCFFFF", "Pale cyan",
"99CCFF", "Light sky blue",
"CC99FF", "Plum"

取消線

%%インライン要素%%

アンダーライン

%%%インライン要素%%%

注釈

((インライン要素))

ルビ構造

&ruby(ルビ){インライン要素};

プラグイン対応の一部。

リンク

[[リンク名:URL]]、[[リンク先URL&gt;リンク元テキスト]]

リンクにしたい文字列を選択した状態で「リンクボタン」をクリックするとリンク先URLが指定できます。

上付き文字 下付き文字・添え字

&sup{"."$1"."}; &sub{"."$1"."};

オリジナルのguieditでは対応していましたが、公式では対応していないため削除。


作成後記

冒頭で紹介した通り、このプラグインはPukiWiki Plus!のguieditというプラグインを元に作成させていただきました。
大きな変更点として、エディタをCKEditorからTinyMCEに変更しました。
WordPressを利用している方にとっては親しみやすいのでは、と考えています。

以上の変更によって、プラグインの多くの部分に手を加えています。動作テストをするにあたり、一通りの書式は網羅したつもりです。
ただし、PukiWikiには無数のプラグインが存在するため、検証は限定的です。

この段階で公開するのは早計かとも考えましたが、ひとまずベータ版として公開し、様々な環境でテストしていただいたほうが結果として、より早く完成度の高いプラグインになるのではないかと考えました。
そこで「テストに付き合ってあげてもいいよ」「もっと良いコードの書き方があるよ」といった有志の方はダウンロードして利用してみてください。

よろしければこのページのコメントや、当ブログのフォームからご提案いただけると幸いです。



現在のページを共有する



現在のページに関連する記事


おすすめの記事


コメントを残す

コメントは認証制のため、すぐには反映されません。

プログラミングに関する質問は「日本語でプログラミングの悩みを解決するQ&Aサイト sukegra」をご利用ください。