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

相対パスの補完

WYSIWYGエディタ内で/files/から始まる相対パスはAPIで取り出す際に、KurocoFilesドメイン(kuroco-img.app)が自動で付与されます。

関連ドキュメント

• WYSIWYG カスタムカラーの設定方法
• Iframely自動変換を利用するには？
• WYSIWYGエディタに入力されたソースが自動変換されないように出来ますか？
• コンテンツ定義で利用できる拡張項目一覧