【PukiWiki】WYSIWYGエディタ（easyedit）に画像アップロード機能を追加

2021-12-232024-03-20

追記

プラグイン開発者の方がeasyedit.inc.php事態にkcfinderを組み込んでくださいました（v1.11以降）。新しいバージョンのプラグインを使う場合はkcfinderのインストールは不要で、画像の大きさも変更できます。

• https://pukiwiki.sourceforge.io/?%E8%87%AA%E4%BD%9C%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3/easyedit.inc.php

新しいバージョンのeasyeditでも設定の変更が必要になる場合もあります。

• 【PukiWiki】WISYWIG入力プラグイン「easyedit」を使うための微修正（24.03月） -ConoHa WING-

本文

仕事で使っている業務マニュアルを気付いた時に修正できるようにPukiwikiに移行することにしましたが、一番の問題になる「誰でも簡単に編集する」点を解決するためにWYSIWYGエディタ（ビジュアルエディタ）を導入します。

また、画像も添付しやすくなるようにエディタから画像アップロード・添付できるように機能を追加しました。

業務マニュアルの運用改善とナレッジベース作成のため社内wikiを導入

業務マニュアルやナレッジベース作成のためにPukiWikiを導入したため、導入までの経緯や選定理由を記載 ...

 https://uura.site/wiki-arrival/

注１）2021年12月時点の情報です。
注２）セキュリティの脆弱性は大幅に増加すると思われるため、各自の理解・判断のもとで導入して下さい。

動作環境

• Pukiwikiバージョン：1.5.3
• システム条件：Windows10 Pro + XAMPP（PHP Ver7.4.27）
• Pukiwikiのマルチラインプラグインが有効化されていること

難易度：中（スクリプトファイルの修正が必要）

導入手順

1. easyeditのインストール

Pukiwikiプラグインのwebサイト

インストール方法の詳細はプラグインのwebサイトに記載。

自作プラグイン/easyedit.inc.php - PukiWiki-official

自作プラグイン/easyedit.inc.php - PukiWiki-official 自作プラグイン/easyedit.inc.php Top / 自作プ ...

 https://pukiwiki.osdn.jp/?自作プラグイン/easyedit.inc.php

pukiwiki/skin/pukiwiki.skin.phpの122行と123行の間に以下を追記。

<?php global $vars;echo '<a href="./?cmd=easyedit&page='.$vars['page'].'">編集(CKEditor)</a>'; ?> |

2.KCFinderのインストール

参考サイト

WYSIWYG エディタの CKEditor4 にアップロード機能を追加する (CKEditor+KCFinder) |

高機能な WYSIWIG エディタである CKEditor に、KCFinder を連携させて、画像やファイルのアップロード ...

 https://goodlife.tech/posts/ckeditor-kcfinder.html

フォルダ構成（例）と編集ファイル

pukiwiki
    |-easyedit
        |-ckeditor.js
        |-config.js　←編集ファイル
        |-kcfinder-master
            |-conf
                |-config.php　←編集ファイル

KCFinderの設定ファイルを編集（pukiwiki/easyedit/kcfinder-master/conf/config.php）

24～26行目を以下の内容に修正。

'disabled' => false,
'uploadURL' => "http(s)://pukiwikiのインストールドメイン/フォルダ/easyedit/kcfinder-master/upload",
'uploadDir' => realpath(dirname(__FILE__)) . "/../upload/",

補足：uploadURLはアップロード後のファイルパスの都合で絶対URLを入れています。

CKEditorに設定追加（pukiwiki/easyedit/config.php）

末尾に以下を追記。

CKEDITOR.editorConfig = function( config ) {
config.filebrowserImageBrowseUrl = 'http(s)://pukiwikiのインストールドメイン/フォルダ/easyedit/kcfinder-master/browse.php?type=images';
config.filebrowserImageUploadUrl = 'http(s)://pukiwikiのインストールドメイン/フォルダ/easyedit/kcfinder-master/upload.php?type=images';
};

こちらも絶対URLで指定していますが、相対パスでも動くとは思います。

3. pukiwiki/plugin/easyedit.inc.phpの編集

この時点では画像のタグ置換がうまく動いていない（コメントアウトされている）ため、アンコメントと再編集時のタグ置換コードを追加します。

145行、156行のコメントタグ削除。

157行目に以下のコード追加。

	if (preg_match_all("/<img\ssrc=\"(.+?)\"\sstyle=\"height:px;\swidth:px\"\s\/>/u", $msg, $match_msg,PREG_SET_ORDER)){
        foreach ($match_msg as $value) {
            $msg = str_replace($value[0],"&ref(".$value[1].");",$msg);
        }
    }

ここまででビジュアルエディタとしては機能していると思いますが、細かい注意点は以下に記載します。

結果

編集画面

2行目右から4番目のアイコンクリックで画像添付の画面が開きます。

多少の注意点

画像添付は画像情報タブのサーバブラウザを使用

アップロードタブを使わずにサーバブラウザを使って下さい。私の環境では、アップロードタブでは「サーバーの応答が不正です」となって添付できませんでした（画像自体はアップロードされています）。

PHPのバージョン、ブラウザによっては動作が不明

アップロード後にPHPのwarningメッセージが出ます。（eachは使わないで、のような）
今の環境では動いていますが、PHPのバージョンによっては動作しなくなる可能性はあります。

また、ChromeとEdgeでは問題なく動作しましたが、他のブラウザは試していないため不明です。

最後に

以上でビジュアルエディタの導入と画像添付機能の追加が終了です。見た目にこだわりが無ければ表もeasyeditから追加できるため、wikiの記法を知らない人でも一般的なワープロソフトと同じような感覚で入力できるようになりました。

誰でもその場で編集できるのがwikiのいい点ですが、職場で使うとなると記法を知らない人もいるため入力しやすい環境を整えることも内容を充実させるには大切です。

ただし、最初の注意でも述べていますがファイルアップロード機能に加えてアップロードフォルダに実行権限が必要になるためセキュリティ面はかなり不安になります。私の場合は部署内の閉じたLAN内で使うためそのままにしていますが、導入の際は環境に応じたセキュリティ設定をお願いします。

• https://www.cottonwool.jp/laboratory/security/kcfinder-installation-notes/