CMS「すぐ使えるCGI」の開発者がご質問にお答えします

 

WYSIWYG HTML エディタでテーブルアイコンが出ません。 (No. 1849)

回答日: 2016-06-14

質問

○WYSIWYG HTMLエディタ組込み済 CMS(日本語UTF-8版)
○Ver5
○Win8.1

http://sugutsukaeru.jp/support/214/
こちらを参照してインストールは出来たようなのですが、
このページのサンプルにあるような、
テーブルを作成するアイコンが出ていないのです。

CLEditorのページを見ても見当たりません。
http://premiumsoftware.net/cleditor/

フォルダwebdir>cleditoer>imgの中身を見ると
テーブルのアイコンだけが単独になっているのも気になります…

もしかして機能自体が無くなってしまったのでしょうか?
気軽にテーブルが入力出来たら、と思ったのですが…
投稿日時: 2016-06-14 15:20

回答

「すぐ使えるCGI」のご利用ありがとうございます。

■製品の更新情報

お使いの製品に付いてですが、

> ○WYSIWYG HTMLエディタ組込み済 CMS(日本語UTF-8版)
> ○Ver5
>  http://sugutsukaeru.jp/support/214/

実はこのサンプルは先日 2016年6月7日に更新して、ファイルのディレクトリ構造などが変わりました。

もしかしたらお手元のサンプルは古いバージョン、読んでいる説明等は新しいバージョン、という食い違いがあるかもしれません。また、サンプルファイルをそのまま設定して動かしているのか、お手元の「すぐ使えるCGI」に導入しているのかによっても少しずつ手順が違います。その点を念頭に置いて以下を読んでいただければ幸いです。


■テーブル画像について

まずテーブル画像に関するご質問ですが、

> このページのサンプルにあるような、
> テーブルを作成するアイコンが出ていないのです。
>
> CLEditorのページを見ても見当たりません。
>  http://premiumsoftware.net/cleditor/

> フォルダwebdir>cleditoer>imgの中身を見ると
> テーブルのアイコンだけが単独になっているのも気になります…

テーブル描画は、CLEditor 本家の開発とは別のプラグインなのです。

プラグインとは下記のページにあるもので、CLEditor 本体に機能を追加するものです。第3者が開発しています。
http://premiumsoftware.net/cleditor/plugins

このため、このようなプラグインの機能はアイコン画像が分かれているのです。

なお、現在の上記ページには、「すぐ使えるCGI」で現在配布している「Advanced Table Plugin」というものは無くなっています。機能はほぼ同じようですが、開発者も異なります。


■対応方法の選択肢

テーブル入力機能を使うには、以下の選択肢があります。

1. 上記のプラグインサイトから本家サイトで配布している「Table Plug-in」をダウンロードして設定する。
2. 「すぐ使えるCGI」で配布しているテーブル入力機能が使言えるように調整する。

以下では、2の方法をご説明します。

なお、「すぐ使えるCGI」で配布しているテーブル入力プラグインは、昔 CLEditor サイトで配布していた「Advanced Table Plugin」というものに、「すぐ使えるCGI」で多少の改変(スタイルの初期設定の追加など)を加えたものです。


■「すぐ使えるCGI」のテーブル入力機能の調整

〇状況確認
「インストールはできたよう」という事ですので、基本的な機能は使えるという事でよろしいですね?

次の確認ですが、「テーブルを作成するアイコンが出ていない」というのは、その場所が空欄になっているという事でしょうか?それとも、アイコンのスペース自体が無いですか?


〇アイコンのスペース自体が無い場合
アイコンのスペース自体が無い場合、JavaScript ファイルが読み込まれていないと考えられますので、templates/admin/2.html で jquery-cleditor-advancedtable.js を読み込んでいる script タグの記載が正しいか確認して下さい。

例)
<script type="text/javascript" src="/path/to/cleditor/js/jquery-cleditor-advancedtable.js" charset="utf-8"></script>

※この部分で、サイトコードサンプルにディレクトリ名のミススペルがありました。もしお手元の製品にWYSIWYGエディタを追加導入していて、コードサンプルをそのままコピー&ペーストした場合はそこが問題ですので、リンク先が正しくつながっているか確認して下さい。


〇スペースはあるがアイコンが見えていない場合
スペースはあるがテーブルのアイコン画像が見えていない、という場合、サンプル更新後のディレクトリ構成の変更に対応できていません。

確認ですが、現在お手元のファイルで関連のアイコン画像は全て webdir/cleditor/img/ 内に、CSSファイルは全て webdir/cleditor/css/ 内にありますね?その場合は、新しいバージョンの webdir/cleditor/js/jquery-cleditor.js を設置場所に上書きアップロードして下さい。

もしディレクトリの相対構成を変えている場合、ファイルの配置状況を再度ご連絡下さい。
回答日: 2016-06-14