htmlエディタ(TinyMCE)
本システムではhtmlドキュメントの編集に、世界中で最も使用されているオープンソースのwysiwyg(ウィジウィグ)エディタ 「TinyMCE」を採用し、弊社オリジナルのプラグインでカスタマイズされています。
この部分で、デザインされたレイアウトのままドキュメントを編集することができます。
htmlの知識は有るに超した事はありませんが特に必要ではありません。 専用ツールバーの機能を駆使して、初心者の方にも綺麗なページをデザインしていただけます。
【特徴】
htmlの知識は有るに超した事はありませんが特に必要ではありません。 専用ツールバーの機能を駆使して、初心者の方にも綺麗なページをデザインしていただけます。
【特徴】
- 海外で開発されたソフトウェアにもかかわらず、日本語対応で作成するドキュメントはもちろん、 ツールバーにカーソルをセットしたとき表示されるツールチップまで日本語で表示されます。
- 全ての装飾は直感的なアイコンのツーバーで選択するだけです。 誤ったツールボタンを押した場合での直前の処理を簡単に取り消すことができます。
- 現在主流となっているxhtml対応ですので、複数のスタイルシートを利用可能です。 エディタで使用するスタイルシートは、[ファイル]-[動作環境の設定]で設定することができます。
- 専用ファイルダイアログの装備で、簡単に画像などファイルを選択できます。
- テンプレートのサポートで、予め作成された良く利用するレイアウトやドキュメントを挿入することが出来ます。
- htmlエディタ(TinyMCE)ではiframeをサポートしません。
ページ内のiframeタグは自動的に削除されますのでご注意ください。
同一サイト内に有るコンテンツであればiframeを使用しなくてもAjaxで挿入することが出来ます。
このようなコードは以下のように置き換えるだけでフレームを使用しないでコンテンツが挿入できます。
<iframe src="/inqury.html" name="inquiry" id="inquiry" width="480" height="400"></iframe><script type="text/javascript" src="/trycms/system.js"></script> </head> <body> <div id="inquiry" style="width:480px;height:400px;overflow:auto;"></div> </body> <script type="text/javascript"> getAjaxText('/inqury.html', 'inquiry'); </script>- 1行目は、Ajaxを使用するためにシステムのjavascriptを読み込んでいます。 これは</head>の上部に置いてください。
- 4行目はコンテンツを挿入するエレメントを宣言しています。ここで挿入されるサイズも設定しておいてください。
- 最後にAjaxでコンテンツを読み込むjavascriptを</body>以降に置きます。
推奨するブラウザFirefoxまたは、Chromeをお使いの管理者は以下のように書くことも出来ます。この場合もヘッダー部でsystem.jsをインクルードしておく必要が有ります。<div id="inquiry" style="width:480px;height:400px;overflow:auto;"></div> <script type="text/javascript"> // <![CDATA[ getAjaxText('/inqury.html', 'inquiry'); // ]]> </script>
どちらもAjaxでの挿入は自サイト内のコンテンツのみです。他のサイトのコンテンツを自サイトのように挿入して表示することは出来ません。 また、Ajaxではコンテンツとしてではなく、テキストとして挿入しますのでhtmlドキュメントのヘッダーやフッタなどのタグは必要有りません。 - それでは編集に使用するツールバーを簡単にご説明しましょう。
選択(反転)された文字列を「太字(bold)」に設定します。 記号つきリスト、箇条書きを設定 ソースコードの整形 選択(反転)された文字列を「斜体(italic)」に設定します。 番号つきリスト、箇条書きを設定 やり直し、取り消しを取り消し 選択(反転)された文字列に「取り消し線」を設定 選択(反転)された文字列に「下線(underline)」を設定 直前の操作を取り消します。 アンカーの挿入。xhtmlではあまり使用しません。 特殊文字を選択。文字コードに依存する記号も存在しますので使用には注意が必要 編集中のドキュメントのソースコードの表示。ソースレベルでの編集も可能です。 クリップボードにコピー。Firefoxではブラウザのセキュリティのため使用できません。 クリップボードの使用は[Ctrl]+[c]のキー操作で行います。 選択した範囲を切り取り、切り取った内容をクリップボードにコピーします。 Firefoxではブラウザのセキュリティのため使用できません。 切り取りは[Ctrl]+[x]のキー操作で行います。 TinyMCEのバージョン情報を表示します。 水平線を挿入 画像の挿入。 
ボタンを押して、専用ダイアログから選択することも出来ます。
段下げ(indent)を設定 中央寄せ 均等割り付け 左寄せ 右寄せ 選択した範囲にリンクを設定 編集中のドキュメントをすべて破棄し、最初(白紙)からやり直す。 段下げを取り消し クリップボードの貼り付け。 Firefoxではブラウザのセキュリティのため使用できません。 貼り付けは[Ctrl]+[v]のキー操作で行います。 フォーマットの解除 下付き文字 上付き文字 リンクの解除 ガイドラインの表示/非表示の切り替え。 ガイドラインとは、実際には表示されない編集を助けるための罫線です。 前景色を選択
背景色を選択
前景色同様にカラーダイアログから背景色を選択します。装飾付き水平線の挿入 エレメントの左付け エレメントの右付け アイコンの挿入。 予め設定されているアイコン一覧から選択してカーソルの位置に挿入します。
エディタを最大表示して編集します。 元に戻す場合はもう一度押します。 
このように、上部のコマンドバーをなくして広い領域で編集可能になります。
現在の日付を挿入 現在の時刻を挿入 絶対位置指定の切り替え 最前面へ移動
Microsoft Internet Exploror6以前のバージョンでは、z-indexより設定順が優先されますので正常に機能しません。最背面へ移動
Microsoft Internet Exploror6以前のバージョンでは、z-indexより設定順が優先されますので正常に機能しません。編集可能レイアウト枠(divエレメント)を挿入 動画やフラッシュなど、オブジェクトの挿入 改行しないスペースの挿入 Microsoft Wordの文章をhtmlとして貼り付けます。 wordの文章にはword独特のフォーマットが存在するため、そのままではレイアウトを崩すだけでなく、 必要以上にサイトを重くしてしまいます。この機能を使用することで無駄なフォーマットを削除できます。 編集中のドキュメントをプレビュー表示します。 ただ、この機能はhtmlのヘッダー部が存在しませんので、外部ファイルを参照している場合は正確ではありません。 完成イメージは、エディタのプレビューではなく、それぞれのコンポーネントに用意された 
など、専用のプレビュー機能をご利用ください。印刷 検索と置き換え 検索と置き換え スタイル編集 テーブルの挿入 セルのプロパティ 列の削除 行の削除 列の追加 列の挿入 行の追加 行の挿入 セルの結合 行のプロパティ セル結合の解除 テンプレートの挿入 制御文字の表示/非表示 略語 頭文字のプロパティ エレメントの削除 エレメントの挿入 属性の挿入と設定