バージョン選択

フォーラム

メニュー

オンライン状況

45 人のユーザが現在オンラインです。 (36 人のユーザが フォーラム を参照しています。)
登録ユーザ: 0
ゲスト: 45
もっと...

サイト内検索

プラグイン > バグ報告・利用に関する質問 > Wysiwygエディタのカスタマイズで画像アップロードに失敗する

バグ報告・利用に関する質問

新規スレッドを追加する

スレッド表示 | 新しいものから 前のトピック | 次のトピック | 下へ
投稿者 スレッド
h_tanaka
投稿日時: 2017/7/21 17:45
対応状況: 解決済
登録日: 2016/7/22
居住地: 愛媛県
投稿: 1610
Wysiwygエディタのカスタマイズで画像アップロードに失敗する
EC-CUBE3.0.14

Wysiwygエディタプラグインを導入しましたが、画像アップロードの機能がなかったので追加で作成しようとしています。

プラグインでは tinymce を CDN で呼んでいたため、こちらのページを参考にして jbimages プラグインを呼びました。
https://magnets.jp/web_design/6106/

以下ソースの★部分が追記・変更した箇所です。

ここまで実装した後、商品登録ページで実際にアップロードを試したところ、次のエラーが発生してしまいます。
The upload path does not appear to be valid.

imageupload_url の指定方法が悪いのだとは思うのですが、解決方法わかりますでしょうか?

app/Plugin/Wysiwyg/WysiwygEvent.php

		$mce = "<script src=\"//cdn.tinymce.com/4/tinymce.min.js\"></script>\n";
		foreach ($kws as $key) {
			if (strpos($html, $key) !== false) {
				$replace = '</head>';
				$mce .= "<script>\ntinymce.init({";
				$mce .= "imageupload_url:'" . $config['image_temp_urlpath'] . "',";	// ★画像アップロード先
				$mce .= "selector:'textarea#{$key}',";	// id=key のテキストエリア対象
				if ($lang_url) {
					$mce .= "language:'ja',"				// 日本語
						 .  "language_url:'{$lang_url}',";	// 日本語ファイル
				}
				$mce .= "force_br_newlines:true,"	// 改行に <p> を使わず <br /> を使う
					 .  "force_p_newlines:false,"
					 .  "forced_root_block:'',";
				$mce .= "apply_source_formatting: false,";
				$mce .= "convert_newlines_to_brs: true,";
				$mce .= "remove_linebreaks:false,";
				$mce .= "cleanup:false,";				// クリーンナップ機能をオフ
				$mce .= "relative_urls:false,";			// 相対パスに変換されるのを防ぐ
				$mce .= "remove_script_host:false,";	// URLのホスト部分を削除しない。
				$mce .= "plugins: ['"					// プラグイン
					 . "code "							// HTMLコード編集追加
					 . "fullscreen "					// フルスクリーン編集追加
					 . "image "							// 画像編集追加
					 . "link "							// リンク編集追加
					 . "paste "							// テキスト貼付けをフィルタリング
					 . "table "							// テーブル編集追加
					 . "textcolor "						// 文字色
					 . "image jbimages "				// ★画像アップロード
					 . "'],";
    	 		$mce .= "external_plugins: {"
        			 . "'jbimages': 'https://www.groomerchick.com/smartagon_sys/cdn/tinymce_v0-2-4_01/plugins/jbimages/plugin.min.js' "  // ★プラグイン読み込み
    				 . "},";
				$mce .= "toolbar:'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent" // ここまでデフォルト
					 . " | forecolor backcolor | image jbimages',";  // ★ツールバー表示
				$mce .= "paste_as_text:true,";			// テキスト貼付け時、改行が<p>にならないようにする。
				$mce .= "height:480,";					// デフォルトの高さを 480px にする。
				/*
				$mce .= "protect:["
					 .  "/[\\n]+/g,"					// 改行を保持。改行を保持すると JavaScript が正しく入力できない。
					 .  "/<script.*?<\/script>/g"		// Protect php code
					 .  "],";
				*/
			//	$mce .= "keep_styles:false,"; 現在のテキストスタイルを保つ
				$mce .= "entity_encoding: 'raw',";		// エスケープしない
				$mce .= "extended_valid_elements:'"		// 属性を消さないようにする。
					 . "a[*]"
					 . ",b[*],base[*],big[*],blockquote[*],body[*],br[*]"
					 . ",caption[*]"
					 . ",dd[*],div[*],dl[*],dt[*]"
					 . ",em[*],embed[*]"
					 . ",font[*],form[*]"
					 . ",h[*],head[*],hr[*],html[*]"
					 . ",i[*],iframe[*],img[*],input[*]"
					 . ",li[*],link[*]"
					 . ",meta[*]"
					 . ",nobr[*],noembed[*]"
					 . ",object[*],ol[*],option[*]"
					 . ",p[*],pre[*]"
					 . ",s[*],script[*],select[*],small[*],span[*],strike[*],strong[*],sub[*],sup[*],svg[*]"
					 . ",table[*],tbody[*],td[*],textarea[*],tfoot[*],th[*],thead[*],title[*],tr[*],tt[*]"
					 . ",u[*],ul[*],use[*]"
					 . "',";
				$mce .= "});\n</script>\n";
			}
		}


----------------
EC-CUBE 《プラチナ》ランクパートナー
トエビス株式会社 田中 宏典
EC-CUBEの機能やデザインのカスタマイズ承ります。

468
投稿日時: 2017/7/22 9:40
対応状況: −−−
登録日: 2008/10/26
居住地:
投稿: 3217
Re: Wysiwygエディタのカスタマイズで画像アップロードに失敗する
この仕組みを利用した事がないので、はっきりとした原因は分かりませんが、
アップロードパスが無効という旨のエラーですので、
ファイルアップロード先がおかしいのではないでしょうか?

こういったファイルは通常、サーバ側(PHP)でアップロード先のパスを設定すると思いますが、
その設定はどうなっていますか?
リンク先のページでは、config.phpの$config['img_path'] に画像のアップロード先を指定しているようです。

imageupload_urlは、アップロードした画像のプレビューを表示する為のURLを指定しているのですよね?(予想ですが)


----------------
株式会社シロハチ
■ECCUBE2系、3系構築カスタマイズご相談ください。
EC-CUBE3マニュアル
blog

h_tanaka
投稿日時: 2017/7/24 10:02
対応状況: −−−
登録日: 2016/7/22
居住地: 愛媛県
投稿: 1610
Re: Wysiwygエディタのカスタマイズで画像アップロードに失敗する
468さん、
ご返信ありがとうございます。

私もこの仕組みをわかっていないため、設定の仕方もよくわかっていません。

リンク先のページではTinyMCEをダウンロードして使用するケースとTinyMCEをCDNで利用するケースが紹介されており、Wysiwygエディタプラグインは後者だったためjbimagesもCDNとして利用しようとしています。
ただ、リンク先のページにもあるとおりアップロード先の指定がわからなかったです。

いろいろ調べて次のサイトに行き当たり、ここに記載されているimageupload_urlを指定する方法を試してパスもいろいろと変えてみましたが、「The upload path does not appear to be valid.」エラーは解決できませんでした。
https://stackoverflow.com/questions/23886804/jbimages-plugin-for-tinymce-does-not-insert-image


----------------
EC-CUBE 《プラチナ》ランクパートナー
トエビス株式会社 田中 宏典
EC-CUBEの機能やデザインのカスタマイズ承ります。

468
投稿日時: 2017/7/24 10:31
対応状況: −−−
登録日: 2008/10/26
居住地:
投稿: 3217
Re: Wysiwygエディタのカスタマイズで画像アップロードに失敗する
最初の参考サイトにもCDNを利用した場合の説明の中に以下のコメントがありますが、
「※この場合のアップロード先の変更がどう指定するのか分かりませんでした・・・」
通常で考えれば、画像をサーバへ送信して、それを受け取って保存するプログラムがどこかに存在するはずですが如何でしょうか?
(サーバに対しては何もファイルを追加されていないという認識でよろしいでしょうか?)

ファイルアップロードを実行した時に、リクエストは発生している状況でしょうか?
(リクエストが発生していれば、firebug等でネットワークを監視していれば、通信先のURLと結果が確認できると思います)


----------------
株式会社シロハチ
■ECCUBE2系、3系構築カスタマイズご相談ください。
EC-CUBE3マニュアル
blog

h_tanaka
投稿日時: 2017/7/24 10:36
対応状況: −−−
登録日: 2016/7/22
居住地: 愛媛県
投稿: 1610
Re: Wysiwygエディタのカスタマイズで画像アップロードに失敗する
はい、サーバーにはファイルを追加していません。
ネットワークを監視してみましたが、リクエストは発生していないようです。


----------------
EC-CUBE 《プラチナ》ランクパートナー
トエビス株式会社 田中 宏典
EC-CUBEの機能やデザインのカスタマイズ承ります。

468
投稿日時: 2017/7/24 10:46
対応状況: −−−
登録日: 2008/10/26
居住地:
投稿: 3217
Re: Wysiwygエディタのカスタマイズで画像アップロードに失敗する
The upload path does not appear to be valid.

のメッセージはどの段階で表示されますか?
エディタのアップロードアイコンを押した後、
画像アップロードのダイアログが表示されるようですが、
そこで表示されますか?


----------------
株式会社シロハチ
■ECCUBE2系、3系構築カスタマイズご相談ください。
EC-CUBE3マニュアル
blog

h_tanaka
投稿日時: 2017/7/24 10:49
対応状況: −−−
登録日: 2016/7/22
居住地: 愛媛県
投稿: 1610
Re: Wysiwygエディタのカスタマイズで画像アップロードに失敗する
The upload path does not appear to be valid.

のエラーメッセージは、画像アップロードダイアログを開き、さらにファイル選択ダイアログを開いて画像を選択し、ファイル選択ダイアログを閉じたときに、画像アップロードダイアログ内に表示されます。


----------------
EC-CUBE 《プラチナ》ランクパートナー
トエビス株式会社 田中 宏典
EC-CUBEの機能やデザインのカスタマイズ承ります。

h_tanaka
投稿日時: 2017/7/24 11:03
対応状況: −−−
登録日: 2016/7/22
居住地: 愛媛県
投稿: 1610
Re: Wysiwygエディタのカスタマイズで画像アップロードに失敗する
本件、自己解決しました。
468さん、調査とご返信ありがとうございました。

CDNでは解決が難しいと思い、最初のリンク先ページの手順を参考に、ファイルをダウンロードする方法をとりました。

プラグインの機能はそのままに、TinyMCEを別途ダウンロードして html/Wysiwyg に配置し、呼び出し側を変更しました。
//		$mce = "<script src=\"//cdn.tinymce.com/4/tinymce.min.js\"></script>\n";
		$mce = "<script src=\"" . $config['plugin_urlpath'] . "/Wysiwyg/js/tinymce/tinymce.min.js\"></script>\n";


同じように jbimages プラグインをダウンロードして html/plugin/Wysiwyg/js/tinymce/plugins/jbimages に配置しました。

その後、jbimages の config.php でファイルアップロード先を指定しました。
//	$config['img_path'] = '/images'; // Relative to domain name
    $config['img_path'] = '/upload/save_image'; // Relative to domain name


最終的に app/Plugin/Wysiwyg/WysiwygEvent.php は次のようになりました。
//		$mce = "<script src=\"//cdn.tinymce.com/4/tinymce.min.js\"></script>\n";
		$mce = "<script src=\"" . $config['plugin_urlpath'] . "/Wysiwyg/js/tinymce/tinymce.min.js\"></script>\n";
		foreach ($kws as $key) {
			if (strpos($html, $key) !== false) {
				$replace = '</head>';
				$mce .= "<script>\ntinymce.init({";
//					$mce .= "img_path:'" . $config['image_temp_urlpath'] . "',";	// 画像アップロード先
				$mce .= "img_path:'./',";	// 画像アップロード先
				$mce .= "selector:'textarea#{$key}',";	// id=key のテキストエリア対象
				if ($lang_url) {
					$mce .= "language:'ja',"				// 日本語
						 .  "language_url:'{$lang_url}',";	// 日本語ファイル
				}
				$mce .= "force_br_newlines:true,"	// 改行に <p> を使わず <br /> を使う
					 .  "force_p_newlines:false,"
					 .  "forced_root_block:'',";
				$mce .= "apply_source_formatting: false,";
				$mce .= "convert_newlines_to_brs: true,";
				$mce .= "remove_linebreaks:false,";
				$mce .= "cleanup:false,";				// クリーンナップ機能をオフ
				$mce .= "relative_urls:false,";			// 相対パスに変換されるのを防ぐ
				$mce .= "remove_script_host:false,";	// URLのホスト部分を削除しない。
				$mce .= "plugins: ['"					// プラグイン
					 . "code "							// HTMLコード編集追加
					 . "fullscreen "					// フルスクリーン編集追加
					 . "image "							// 画像編集追加
					 . "link "							// リンク編集追加
					 . "paste "							// テキスト貼付けをフィルタリング
					 . "table "							// テーブル編集追加
					 . "textcolor "						// 文字色
					 . "image jbimages "				// 画像アップロード
					 . "'],";
/*
    	 		$mce .= "external_plugins: {"
        			 . "'jbimages': 'https://www.groomerchick.com/smartagon_sys/cdn/tinymce_v0-2-4_01/plugins/jbimages/plugin.min.js' "
    				 . "},";
*/
				$mce .= "toolbar:'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent" // ここまでデフォルト
					 . " | forecolor backcolor | image jbimages',";
				$mce .= "paste_as_text:true,";			// テキスト貼付け時、改行が<p>にならないようにする。
				$mce .= "height:480,";					// デフォルトの高さを 480px にする。
				/*
				$mce .= "protect:["
					 .  "/[\\n]+/g,"					// 改行を保持。改行を保持すると JavaScript が正しく入力できない。
					 .  "/<script.*?<\/script>/g"		// Protect php code
					 .  "],";
				*/
			//	$mce .= "keep_styles:false,"; 現在のテキストスタイルを保つ
				$mce .= "entity_encoding: 'raw',";		// エスケープしない
				$mce .= "extended_valid_elements:'"		// 属性を消さないようにする。
					 . "a[*]"
					 . ",b[*],base[*],big[*],blockquote[*],body[*],br[*]"
					 . ",caption[*]"
					 . ",dd[*],div[*],dl[*],dt[*]"
					 . ",em[*],embed[*]"
					 . ",font[*],form[*]"
					 . ",h[*],head[*],hr[*],html[*]"
					 . ",i[*],iframe[*],img[*],input[*]"
					 . ",li[*],link[*]"
					 . ",meta[*]"
					 . ",nobr[*],noembed[*]"
					 . ",object[*],ol[*],option[*]"
					 . ",p[*],pre[*]"
					 . ",s[*],script[*],select[*],small[*],span[*],strike[*],strong[*],sub[*],sup[*],svg[*]"
					 . ",table[*],tbody[*],td[*],textarea[*],tfoot[*],th[*],thead[*],title[*],tr[*],tt[*]"
					 . ",u[*],ul[*],use[*]"
					 . "',";
				$mce .= "});\n</script>\n";
			}
		}


----------------
EC-CUBE 《プラチナ》ランクパートナー
トエビス株式会社 田中 宏典
EC-CUBEの機能やデザインのカスタマイズ承ります。

468
投稿日時: 2017/7/24 11:03
対応状況: −−−
登録日: 2008/10/26
居住地:
投稿: 3217
Re: Wysiwygエディタのカスタマイズで画像アップロードに失敗する
やはりjbimagesプラグインは、ソース一式をサーバに設置して、
external_pluginsでURLを指定する必要があるのではないでしょうか?

ざっとjbimagesのソースを見てみましたが、
やはりconfig.phpの編集が必要なように思われます。


----------------
株式会社シロハチ
■ECCUBE2系、3系構築カスタマイズご相談ください。
EC-CUBE3マニュアル
blog

h_tanaka
投稿日時: 2017/7/24 11:06
対応状況: −−−
登録日: 2016/7/22
居住地: 愛媛県
投稿: 1610
Re: Wysiwygエディタのカスタマイズで画像アップロードに失敗する
そのようですね。
jbimages がURL指定で使用できるようだったのでどうにか設定方法があるかと思いましたが、そうでもなかったようです。


----------------
EC-CUBE 《プラチナ》ランクパートナー
トエビス株式会社 田中 宏典
EC-CUBEの機能やデザインのカスタマイズ承ります。

スレッド表示 | 新しいものから 前のトピック | 次のトピック | トップ


 



ログイン


EC-CUBE公式 Amazon Payプラグイン

統計情報

総メンバー数は88,286名です
総投稿数は109,688件です

投稿数ランキング

1
seasoft
7365
2
468
3217
3
AMUAMU
2712
4
nanasess
2303
5
umebius
2085
6
yuh
1818
7
h_tanaka
1610
8
red
1567
9
mcontact
1240
10
tsuji
958
11
fukap
907
12
shutta
835
13
tao_s
796
14 ramrun 789
15 karin 689
16 sumida 641
17
homan
633
18 DELIGHT 572
19
patapata
502
20
flealog
485


ネットショップの壺

EC-CUBEインテグレートパートナー

Copyright© EC-CUBE CO.,LTD. All Rights Reserved.