WYSIWYGエディタの使用方法
Kurocoで利用するWYSIWYGエディタは、Microsoft Wordのような直観的で、誰でも簡単にコンテンツを作成・編集できます。
また、Sourceモードに切り替えると、直接HTMLを編集できますので、HTMLの知識がある方はより柔軟にコンテンツ制作が行えます。
Sourceモードへの切替えはアイコンツールの[Source]のクリックで切り替わりますので、デザインやレイアウトを確認しながらHTML編集をスムーズに行うことができます。
備考
WYSIWYGエディタでは、空のタグが消される、scriptタグが消される、不明なタグが補完されるなど、HTMLのタグに自動で修正が入る場合があります。 HTMLを厳密に管理したい場合はHTMLの項目を利用してください。
アイコンツールの説明
| 項目 | 説明 |
|---|---|
 ソース | デザイン編集とHTML編集モードの切り替えを行います。 |
 FullScreen | WYSIWYGエディタをフルスクリーンモードにします。 |
 見出し | 見出しタグを設定します。 |
 文字揃え | 文章の[左揃え]、[右揃え]、[中央揃え]、[均等揃え]を制御します。 |
 ボールド | 太文字(B.png)を設定します。 |
 イタリック | イタリック文字(I.png)を設定します。 |
 アンダーライン | 下線(U.png)を設定します。 |
 画像やファイルの挿入 | KurocoFilesに保存した画像を選択して挿入することができます。 |
 画像挿入 | 直接自分のローカル（デスクトップ等）から画像を挿入します。挿入した画像は自動的にKurocoFilesの/fiese/user/topoics_img/配下もしくは「リソースを指定」で設定したディレクトリに保存されます。 |
 メディアの挿入 | 動画を挿入します。アイコンをクリックすると下記のウィンドウが表示されますので、URLを入力してください。 利用可能なMedia URLについてはCKEditorのドキュメントをご参照ください。 |
 リンク | リンクの挿入と編集を行います。リンクを設定したい文字列をドラッグし、アイコンをクリックしてください。リンクを設定する場合は、下記のウィンドウが表示されますので、URLを入力してください。 Open in a new tabを有効にすると、aタグに target="_blank"が設定されます。 |
 表の挿入 | 表を挿入します。アイコンをクリックすると下記のウィンドウが表示されるので、行・列を指定します。 |
 フォントサイズ | 文字の大きさを変更できます。 |
 文字色 | 文字の色を設定します。 |
 背景色 | 文字の背景の色を設定します。 |
 フォントファミリー | 文字の種類（フォント）を変更できます。 |
 箇条書きリスト | 文章をリスト形式で表示します。箇条書きにしたい文章をドラッグし、アイコンをクリックしてください。 |
 番号付きリスト | 文章を数字のリスト形式で表示します。箇条書きにしたい文章をドラッグし、アイコンをクリックしてください。 |
 ブロッククオート（引用） | 文書を引用する際に使用します（段落ごと引用する場合など） |
 コードブロックの挿入 | コードブロックを追加します。コードブロックしたいソース部分をドラッグし、アイコンをクリックしてください。 |
 元に戻す | 行った編集作業を元に戻すことができます。 |
 やり直し | 元に戻した作業をやり直すことができます。 |
 検索して置換 | 検索と置換ができます。アイコンをクリックすると下記のウィンドウが表示されます。 |
 Templates | 事前に保存したWYSIWYGテンプレートを呼び出します。 |
 他の項目を表示 | 隠れているアイコンを表示します。 |
アイコンツールの編集方法
WYSIWYGエディタを拡張項目で設定する場合、表示するアイコンはコンテンツ定義編集の拡張項目で調整が可能です。
設定可能な項目は主に以下になります。
- 横幅
- 縦幅
- 削除するプラグイン
- カスタムカラー
- 大きなカラーパレット
- シンプルなツールバー
- フォントサイズをpx指定
設定例
コンテンツ定義画面の拡張項目の項目設定で以下のように設定してください。
横幅:800
縦幅:500
削除するプラグイン:italic, underline
大きなカラーパレット:有効にする
表示例
削除するプラグインで指定できる文字列の一覧
項目設定の「削除するプラグイン」フィールドに文字列を指定することで、ツールバーより不要なアイコンを削除できます。
フィールドに利用可能な文字列は以下の通りです。
| 項目 | 文字列 |
|---|---|
| ソース | SourceEditing |
| FullScreen | fullScreen |
| 見出し | heading |
| 文字揃え | alignment |
| ボールド | bold |
| イタリック | italic |
| アンダーライン | underline |
| 画像やファイルの挿入 | ckfinder |
| 画像挿入 | insertImage |
| メディアの挿入 | mediaEmbed |
| リンク | link |
| 表の挿入 | insertTable |
| フォントサイズ | fontSize |
| 文字色 | fontColor |
| 背景色 | fontBackgroundColor |
| フォントファミリー | fontFamily |
| 箇条書きリスト | bulletedList |
| 番号付きリスト | numberedList |
| ブロッククオート（引用） | blockQuote |
| コードブロックの挿入 | codeBlock |
| 元に戻す | undo |
| やり直し | redo |
| 検索して置換 | findAndReplace |
| Templates | templates |
関連ドキュメント
サポート
お探しのページは見つかりましたか？解決しない場合は、問い合わせフォームからお問い合わせいただくか、Slackコミュニティにご参加ください。