pukiwikiプラグイン/tableedit
表記、そんな感じのものを作ったので、一応公開しておきます。
プラグイン概要 †
pukiwiki での表編集をアシストするためのプラグインです。
MITライセンスで公開されている「a-table」という Javascript を使用して、
WYSIWYG 的な表編集を実現します。
このページの下のほうに具体的な実施例を提示していますので、使い勝手はそちらをご覧ください。
- pukiwiki 1.5.1 で動作確認済。
「a-table」はこちら: テーブル編集用UIライブラリ、a-table.js
https://www.appleple.com/blog/javascript/a-table.html
インストール方法 †
- 「a-table」をセットアップします。
- 上記リンク先から a-table のzipファイルをダウンロードしてください。
- ダウンロードしたzipファイルを解凍してください。
- あなたのpukiwiki 環境に、以下のような位置関係でフォルダツリーを構築し、a-table の各ファイルをコピーしてください(下記はこのサイトのツリーのスクリーンショットです。「junk」フォルダがpukiwikiのルートフォルダです)
- 本ページに添付されている a-table.js ファイルをダウンロードし、js/a-table/build にある同名ファイルを置き換えてください。
- 本ページに添付されている下記ファイルをダウンロードし、pukiwiki の pluginフォルダに「tableedit.inc.php」の名前でおいてください。
- pukiwikiのcasheフォルダのアクセス権を見直し、「tableedit(.*)\.html」をブラウザから参照できるようにしてください。
使い方 †
表を書き込みたいページ・場所に、以下のように記載してください。
#tableedit(表ページ名称)
ここで指定する「表ページ名称」の名前で、pukiwiki 上に新しいページが作成されます。 見かけ上、この表ページに記述した表を、このプラグインを置いたページに「インポート」するような体裁になります。
上記のように記載したページには、「表」と「WYSIWYG編集ボタン」「Pukiwiki編集ボタン」とが表示されます。
「WYSIWYG編集」ボタンを押すと、新規にwindowが1つ開き、そこに表編集用の画面が構築されます。
編集用画面で「変更終了」ボタンを押すと、「変更完了」画面になります:そこにある「元ページに戻る」ボタンを押すと
編集用に使っていたWindowが閉じます。
「pukiwiki編集」は、普通に表ページを「編集」するのと同じふるまいです。
パラメータ †
#tableedit(表ページ名称<,fix>)
- 表ページ名称
- 表のデータを置くページの名称です。省略できません。
- fixパラメータ
- 表の編集を禁止する設定。このオプションが記載されると、「編集ボタン」が表示されません。
これによりこのプラグインは実質的に「別ページをインポートする」だけのためのものになります。
制約事項 †
- pukiwiki記述と再編集
- このプラグインでの表編集中、セル内にpukiwiki書式を記載することは可能です。
が、そのようにして作られた表をこのプラグインで「再編集」すると、pukiwiki書式は失われてしまいます。
- 例えばセル内に &colorプラグインを使って以下のように「赤文字指定」することは可能です:編集完了後、そのセル内に赤文字表示されるでしょう。
&color(red){赤文字記述};
- ですがこれを「再編集」した場合、a-tableの編集画面からは&color部分が消えてしまいます。
- 「pukiwiki書式→HTML化」する表生成メカニズムを再開発するような手間をかければ、できないことはないのですが・・・
- 例えばセル内に &colorプラグインを使って以下のように「赤文字指定」することは可能です:編集完了後、そのセル内に赤文字表示されるでしょう。
- このプラグインでの表編集中、セル内にpukiwiki書式を記載することは可能です。
実施例 †
実施例1 †
#tableedit(:tableedit_test)
表ページに「:tableedit_test」指定。このJunkyardでは :tableedit_testページを「誰でも編集可能」にしてあるため、ここで実際に編集テストできます)
h1 | h2 | h3 | h4 | foobar |
---|---|---|---|---|
1-1 | 1-2test | 1-3 | 1-4 | foobar |
2-1 | 2-2 | 2-3 | ||
3-1 | 3-2htht | 3-3ttththt | 3-4 | aflll |
4-1left | 4-2あ | 4-4 | 4-4改行a | 1-1 |
5-1 | 5-2long text | 5-3 | 5-4 | abbc |
実施例2:fix指定 †
#tableedit(:tableedit_test,fix)
fix指定してあると、ページの編集可否に関係なく「編集」ボタンが表示されません。
h1 | h2 | h3 | h4 | foobar |
---|---|---|---|---|
1-1 | 1-2test | 1-3 | 1-4 | foobar |
2-1 | 2-2 | 2-3 | ||
3-1 | 3-2htht | 3-3ttththt | 3-4 | aflll |
4-1left | 4-2あ | 4-4 | 4-4改行a | 1-1 |
5-1 | 5-2long text | 5-3 | 5-4 | abbc |
実施例3:編集権限なしページを指定の例 †
#tableedit(:aaa)
編集許可されていないページを対象にした場合、編集ボタンが表示されません。
下記、許可していない「:aaa」指定を指定した場合の動作です。
h1 | h2 | h3 | h4 | h5 |
---|---|---|---|---|
1-1h | test | 1-3 | 1-4 | 1-5 |
2-1 | 2-2 | 2-3 | 2-5 a | |
3-1 | 3-3 | 3-4 | 3-5 |
実施例4:参照権限なしページを指定の例 †
#tableedit(:非公開_表)
他の人が参照許可されていないページを対象にした場合、その人には「参照権限がない」旨の表示がなされます。
下記、一般に参照許可していない「:非公開_表」指定を指定した場合の動作です。
参照権限のない表です。 |
技術的な話。 †
a-table.js に対する改造 †
上記設置手順に記述したとおり、本プラグインでは a-table ライブラリの一部を変更しています。
その変更内容は、a-table の編集画面上でいじったデータを「pukiwiki書式」にするためのメカニズムの追加です。より詳しくは、以下を参照のこと。
改造のヒント †
- a-table のセル編集機能で、「選択できる背景色」は変更・追加・削除できます。
- tableeditプラグインのファイルを開き、xxxを検索してください。
「赤:red」というような、「日本語色名:英語色名」が列挙されている部分があると思います。
ここを編集してください。- 日本語の色名が、編集画面のドロップメニューに表示される名称です。
- 対応する英語色名が、いわゆる「Web指定カラー」です。
- 日本語の色名が、編集画面のドロップメニューに表示される名称です。
- a-table.js を開き、xxxxを検索してください。
そこに switch 〜case 文があります。
ここを、tableeditプラグインで行った編集(追加・変更した色名)にあわせて編集してください。
- tableeditプラグインのファイルを開き、xxxを検索してください。
pukiwiki本体・tableeditプラグイン・a-table.js の関係・動作 †
このプラグインが書かれているページが「表示」されたときの流れは以下の通りです。 以下、ざっくりと振る舞いを記載します。
変更履歴 †
- 2020.Jan.23 Ver1.2
- 対象の表について参照権限を確認するように修正。以前の版では「権限のない表を表示できてしまう」セキュリティホールになっていました。
コメント †
ご意見などがあれば。
- >tomoseDBG("match?" . $reg);
>をコメントアウトすると正常に動作しました。
うわ。レポートありがとうございます。修整・差し替えを行いました。「12a」の名前がついています。 -- ともせ%管理人。 2022-03-01 (火) 18:41:00 - PHP8、PukiWiki 1.5.4リリース候補版では
tomoseDBG("match?" . $reg);
をコメントアウトすると正常に動作しました。
//tomoseDBG("match?" . $reg); -- 2022-02-27 (日) 01:15:14 - 〇hogeringoさん
ありゃ。その動作だと、「編集」ボタンのJavascriptが適切に動いていないのかな。 403ということは「閲覧禁止」なのでアクセス権を疑ったのですが・・・「編集」ボタンを押すと別窓が開くつもりなのですが、403エラーはどこにでますか?別窓?それとも同じ窓?
さらにちなみに、ちなみにご使用のブラウザはなんでしょうか? -- ともせ%管理人。 2020-07-21 (火) 00:40:13 - お返事ありがとうございます、作成した表のhtmlデータ自体はブラウザで読み込んでくれるのを確認できたのですが、編集ボタンを押すとリンクを取得してくれないようです・・・DATAの部分をいじってみたのですがそちらも駄目でした・・・ -- 2020-07-20 (月) 23:29:49
- 〇hogeringoさん
すみません、今気づきました。
このphpではテーブルデータをpukiwikiの cache ディレクトリに置いていて、WYSIWYG編集するとそれを直接取得&ブラウザ表示します。
「casheディレクトリからの html 取得ができるように、chaseディレクトリのアクセス権を変更する」、あるいはプラグイン内に何か所かある「CACHE_DIR」部分の記述をいじってアクセスできるディレクトリにテーブルデータを置く(例えばCASHE_DIR でなく DATA_DIR にする)ようにするような対応ができないか、当たってみていただけますか? -- ともせ@管理人 2020-07-20 (月) 00:00:07 - はじめましてPukiwiki(1.5.2 PHP7.1環境下)でこちらのプラグインを入れたのですがWYSIWYGで編集の部分が403エラーとなってしまいます。(アクセス権限の部分も確認したのですが管理者の部分をすべて許可しても駄目でした)
何か対策等あればご教授いただけると助かります -- hogeringo 2020-07-15 (水) 23:20:49
添付ファイル:




