Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

JPIERE-0109:WYSIWYG エディター

1,283 views

Published on

WYSIWYG(ウィジウィグ) Editor(エディター)は、Webサイト上の表示に近い状態でコンテンツを編集する事のできるエディターです。JPiereのWYSIWYGエディターもiDempiereで標準機能として搭載されているCKEditorを使用していますが、次のような機能の違いがあります。
◆多言語コンテンツを編集できる。
◆画像ファイルを使用したりアップロードするパスが選択できる。

Published in: Business
  • Be the first to comment

JPIERE-0109:WYSIWYG エディター

  1. 1. Copyright © 2015 OSS ERP Solutions All Right Reserved. JPIERE-0109:WYSIWYG Editor オープンソースのERP iDempiereの日本商習慣対応ディストリビューション
  2. 2. Copyright © 2015 OSS ERP Solutions All Right Reserved. 1 JPiere WYSIWYG Editorの概要 • WYSIWYG(ウィジウィグ) Editor(エディター)は、Webサ イト上の表示に近い状態でコンテンツを編集する事のでき るエディターです。 • JPiereのWYSIWYGエディターもiDempiereで標準機能と して搭載されているCKEditorを使用していますが、次のよ うな機能の違いがあります。 画像を使用したりアップロードするためのパスを選択できる。 多言語のコンテンツを編集できる。
  3. 3. Copyright © 2015 OSS ERP Solutions All Right Reserved. 2 JPiere WYSIWYG Editorの使用方法 JPiere WYSIWYG Editorは任意のフィールドで使用する事ができ、多言語対応 しています。 JPiere WYSIWYG Editorの起動 JPiere WYSIWYG Editorは、ウィンドウのプロセスアイコンから起動する事ができます。
  4. 4. Copyright © 2015 OSS ERP Solutions All Right Reserved. 3 JPiere WYSIWYG Editorの多言語対応 翻訳テーブルがある場合のJPiere WYSIWYG Editor 編集するコンテンツに翻訳テーブルがある場合、画面上に言語選択リストが表示されます。何も選択し ない場合は、ベース言語のコンテンツの編集となります。ベース言語以外の言語を選択して編集すると編 集したデータは翻訳テーブルに保存されます。
  5. 5. Copyright © 2015 OSS ERP Solutions All Right Reserved. 4 JPiere WYSIWYG Editorの多言語対応 翻訳テーブルが無い場合のJPiere WYSIWYG Editor 編集するコンテンツに翻訳テーブルが無い場合は、画面上にはCKEditorと保存ボタンだけ表示されます。
  6. 6. Copyright © 2015 OSS ERP Solutions All Right Reserved. 5 JPiere WYSIWYG Editorの画像ファイルのパス選択 JPiere WYSIWYG Editorでは、予めシステムコンフィグ設定で画像のファイル パスを設定しておく事により、画像のファイルパスの選択ができます。 【注意】画像ファイルのパスを選択しなおすと編集中のコンテンツが リフレッシュされます。 画像ファイルのパスを選択しなおすと、編集中のコンテン ツがリフレッシュされます。そのため画像ファイルのパス を選択する前に、編集中のコンテンツを保存するようにし て下さい。
  7. 7. Copyright © 2015 OSS ERP Solutions All Right Reserved. 6 JPiere WYSIWYG Editorの設定 JPiereのWYSIWYG Editorを使用するためには次の設定が必要です。 フォームの設定 JPiereのWYSIWYG Editorはフォーム上で動作するように作られています。フォームを新規作成し、ク ラス名に”jpiere.plugin.wysiwygeditor.form.JPiereCKEditor”と入力して下さい。 フォーム [ 選択レコード/表示レコード数] フォーム Systemクライアント* *組織* アクティブ 全部データアクセスレベル* JPiere WYSIWYG Editor名称* 説明 ▼ JPiereエンティティタイプ* ▼ コメント ▼ ベータ機能 jpiere.plugin.wysiwygeditor.form.JPiereCKEditorクラス名 ヘルプコンテキスト ▼
  8. 8. Copyright © 2015 OSS ERP Solutions All Right Reserved. 7 JPiere WYSIWYG Editorの設定 プロセスの設定 WYSIWYG Editorのフォームをツールバーのプロセスアイコンから起動するために、プロセスに WYSIWYG Editorのフォームを設定して下さい。
  9. 9. Copyright © 2015 OSS ERP Solutions All Right Reserved. 8 JPiere WYSIWYG Editorの設定 ウィンドウのツールバーボタンタブの設定 WYSIWYG Editorのフォームをツールバーのプロセスアイコンから起動するために、ウィンドウのツー ルバーボタンタブにWYSIWYG Editorのプロセスを設定して下さい。そして、コンポーネント名称には WYSIWYG Editorで編集するカラムを設定して下さい。 ウィンドウ > タブ > ツールバーボタン [ 選択レコード/表示レコード数] ツールバーボタン Systemクライアント* *組織* アクティブ HTMLコンポーネント名称* 10シーケンスNo ○×△タブ* WYSIWYG Editorプロセス ▼ 表示ロジック WYSIWYG Editor名称*
  10. 10. Copyright © 2015 OSS ERP Solutions All Right Reserved. 9 JPiere WYSIWYG Editorの設定 画像ファイルのパス設定 画像ファイルのパスの設定は、システムコンフィグ設定で行います。クライアント毎にアクセスするフォ ルダ(ディレクトリ)を分ける事ができます。 名称のフィールドに”JPIERE_CKEDITOR_IMAGE_PATH”と入力し、設定値のフィールドにフォルダ(ディレクトリ)の パスを入力して下さい。設定のレベルは”クライアント”にして下さい。”;”で区切る事により複数のパスを設定する事ができます。 システムコンフィグ設定 [ 選択レコード/表示レコード数] システムコンフィグ設定 OSS ERP Solutionsクライアント* *組織* アクティブ JPIERE_CKEDITOR_IMAGE_PATH名称* 説明 JPiereエンティティタイプ* ▼ ▼ images/xxxxx;images/yyyyy;images;設定値 クライアントConfiguration Level ▼
  11. 11. Copyright © 2015 OSS ERP Solutions All Right Reserved. 10 JPiere WYSIWYG Editorの設定 システムコンフィグ設定 [ 選択レコード/表示レコード数] システムコンフィグ設定 OSS ERP Solutionsクライアント* *組織* アクティブ JPIERE_CKEDITOR_CUSTOM_CONFIGURATIONS_PATH名称* 説明 JPiereエンティティタイプ* ▼ ▼ /images/config.js設定値 クライアントConfiguration Level ▼ CKEditorのコンフィグ設定 JPiere WYSIWYG Editorでは、CKEditorを作成する際に"config.js"ファイルを読み込むようになってい ます。"config.js"にはCKEditorのカスタマイズ情報を記述しておき、そのファイルの場所をシステムコン フィグ設定で指定しておく事で、CKEditorをカスタマイズする事ができます。 システムコンフィグ設定で名称欄に "JPIERE_CKEDITOR_CUSTOM_CONFIGURATIONS_PATH"と設定し、 設定値に"/images/config.js"のようにconfig.jsまで含めて記述して下さい。CKEditorのコンフィグファイ ルは設定しなくても問題はありません。コンフィグファイルが無い場合は、CKEditorはフル機能で表示され ます。
  12. 12. Copyright © 2015 OSS ERP Solutions All Right Reserved. 11 JPiere WYSIWYG Editorの注意点 WYSIWYG Editorで編集することのできるフィールドは1つのタブの中で1つだけ WYSIWYG Editorで編集することのできるフィールドは1つのタブの中で1つだけです。1つのタブの中 で2つ以上のフィールドを編集対象とする事はできません。 WYSIWYG Editorで編集対象となるテーブルの主キーについて WYSIWYG Editorの編集対象となるテーブルの主キーは”テーブル名+_ID”となっている事が前提です。 入力コンポーネントの値は受け取れません フル機能のCKEditorには、チェックボックスやテキストボックなどを簡単に配置する事ができる入力コ ンポーネントがありますが、それらを使用して画面に入力コンポーネントを配置しても、その値を取得す る事はできません。 画像ファイルが格納されているディレクトリの取り扱について 画像が格納されているディレクトリは基本的にiDempiere(JPiere)のサーバー内になるかと思います ので、iDempiere(JPiere)をバージョンアップする場合などでシステム全体を差し替える場合などは注意 して下さい。画像が格納されているディレクトリを移行しないと画像のリンク切れが発生します。
  13. 13. Copyright © 2015 OSS ERP Solutions All Right Reserved. 12 http://www.oss-erp.co.jp/ オープンソースのERPを活用し、 企業が抱えている課題を 素早く低コストで解決します!

×