WYSIWYGエディタの使用方法
Kurocoで利用するWYSIWYGエディタは、Microsoft Wordのような直観的で、誰でも簡単にコンテンツを作成・編集できます。
また、Sourceモードに切り替えると、直接HTMLを編集できますので、HTMLの知識がある方はより柔軟にコンテンツ制作が行えます。
Sourceモードへの切替えはアイコンツールの[Source]のクリックで切り替わりますので、デザインやレイアウトを確認しながらHTML編集をスムーズに行うことができます。
アイコンツールの説明
| 項目 | 説明 |
|---|---|
 Source | デザイン編集とHTML編集モードの切り替えを行います。 |
 FullScreen | WYSIWYGエディタをフルスクリーンモードにします。 |
 Heading | 見出しタグを設定します。 |
 Text alignment | 文章の[左揃え]、[右揃え]、[中央揃え]、[均等揃え]を制御します。 |
 Bold | 太文字(B.png)を設定します。 |
 Italic | イタリック文字(I.png)を設定します。 |
 Underline | 下線(U.png)を設定します。 |
 Insert image or folder | KurocoFilesに保存した画像を選択して挿入することができます。 |
 Insert image | 直接自分のローカル（デスクトップ等）から画像を挿入します。挿入した画像は自動的にKurocoFiles直下に保存されます。 |
 Insert media | 動画を挿入します。アイコンをクリックすると下記のウィンドウが表示されますので、URLを入力してください。 利用可能なMedia URLについてはCKEditorのドキュメントをご参照ください。 |
 Link | リンクの挿入と編集を行います。リンクを設定したい文字列をドラッグし、アイコンをクリックしてください。リンクを設定する場合は、下記のウィンドウが表示されますので、URLを入力してください。 Open in a new tabを有効にすると、aタグに target="_blank"が設定されます。 |
 Insert table | 表を挿入します。アイコンをクリックすると下記のウィンドウが表示されるので、行・列を指定します。 |
 Font Size | 文字の大きさを変更できます。 |
 Font Color | 文字の色を設定します。 |
 Font Background Color | 文字の背景の色を設定します。 |
 Font Family | 文字の種類（フォント）を変更できます。 |
 Bulleted List | 文章をリスト形式で表示します。箇条書きにしたい文章をドラッグし、アイコンをクリックしてください。 |
 Numbered List | 文章を数字のリスト形式で表示します。箇条書きにしたい文章をドラッグし、アイコンをクリックしてください。 |
 Block quote | 文書を引用する際に使用します（段落ごと引用する場合など） |
 Insert code block | コードブロックを追加します。コードブロックしたいソース部分をドラッグし、アイコンをクリックしてください。 |
 Undo | 行った編集作業を元に戻すことができます。 |
 Redo | 元に戻した作業をやり直すことができます。 |
 Find and replace | 検索と置換ができます。アイコンをクリックすると下記のウィンドウが表示されます。 |
 Show more icon | 隠れているアイコンを表示します。 |
アイコンツールの編集方法
WYSIWYGエディタを拡張項目で設定する場合、表示するアイコンはコンテンツ定義編集の拡張項目で調整が可能です。
設定可能な項目は以下になります。
- 横幅
- 縦幅
- カスタムカラー
- カラーパレットの大きさ
- アイコンの削除
設定箇所
コンテンツ定義画面の拡張項目、設定項目フィールドに記入してください。
設定例
width::800
removePlugins::heading, bold, italic, underline
表示例
削除するプラグインで指定できる文字列の一覧
項目設定の「削除するプラグイン」フィールドに文字列を指定することで、ツールバーより不要なアイコンを削除できます。
フィールドに利用可能な文字列は以下の通りです。
| 項目 | 文字列 |
|---|---|
| Source | SourceEditing |
| FullScreen | fullScreen |
| Heading | heading |
| Text alignment | alignment |
| Bold | bold |
| Italic | italic |
| Underline | underline |
| Insert image or folder | ckfinder |
| Insert image | insertImage |
| Insert media | mediaEmbed |
| Link | link |
| Insert table | insertTable |
| Font Size | fontSize |
| Font Color | fontColor |
| Font Background Color | fontBackgroundColor |
| Font Family | fontFamily |
| Bulleted List | bulletedList |
| Numbered List | numberedList |
| Block quote | blockQuote |
| Insert code block | codeBlock |
| Undo | undo |
| Redo | redo |
| Find and replace | findAndReplace |