WYSIWYGエディタの使用方法

​ Kurocoで利用するWYSIWYGエディタは、Microsoft Wordのような直観的で、誰でも簡単にコンテンツを作成・編集することができます。
また、Sourceモードに切り替えると、直接HTMLを編集することもできますので、HTMLの知識がある方はより柔軟にコンテンツ制作が行えます。
Sourceモードへの切替えはアイコンツールの[Source]のクリックで切り替わりますので、デザインやレイアウトを確認しながらHTML編集をスムーズに行うことができます。

Image (fetched from Gyazo)

アイコンツールの説明

項目説明
Image (fetched from Gyazo)
Source
デザイン編集とHTML編集モードの切り替えを行います。
Image (fetched from Gyazo)
FullScreen
WYSIWYGエディタをフルスクリーンモードにします。
Image (fetched from Gyazo)
Heading
見出しタグを設定します。
Image (fetched from Gyazo)
Text alignment
文章の[左揃え]、[右揃え]、[中央揃え]、[均等揃え]を制御します。
Image (fetched from Gyazo)
Bold
太文字(B)を設定します。
Image (fetched from Gyazo)
Italic
イタリック文字(I)を設定します。
Image (fetched from Gyazo)
Underline
下線(U)を設定します。
Image (fetched from Gyazo)
Insert image or folder
KurocoFilesに保存した画像を選択して挿入することができます。
Image (fetched from Gyazo)
Insert image
直接自分のローカル(デスクトップ等)から画像を挿入します。挿入した画像は自動的にKurocoFiles直下に保存されます。
Image (fetched from Gyazo)
Insert media
動画を挿入します。アイコンをクリックすると下記のウィンドウが表示されますので、URLを入力してください。
Image (fetched from Gyazo)
Image (fetched from Gyazo)
Link
リンクの挿入と編集を行います。リンクを設定したい文字列をドラッグし、アイコンをクリックしてください。リンクを設定する場合は、下記のウィンドウが表示されますので、URLを入力してください。
Image (fetched from Gyazo)
Image (fetched from Gyazo)
Insert table
表を挿入します。アイコンをクリックすると下記のウィンドウが表示されるので、行・列を指定します。
Image (fetched from Gyazo)
Image (fetched from Gyazo)
Font Size
文字の大きさを変更できます。
Image (fetched from Gyazo)
Font Color
文字の色を設定します。
Image (fetched from Gyazo)
Font Background Color
文字の背景の色を設定します。
Image (fetched from Gyazo)
Font Family
文字の種類(フォント)を変更できます。
Image (fetched from Gyazo)
Bulleted List
文章をリスト形式で表示します。箇条書きにしたい文章をドラッグし、アイコンをクリックしてください。
Image (fetched from Gyazo)
Numbered List
文章を数字のリスト形式で表示します。箇条書きにしたい文章をドラッグし、アイコンをクリックしてください。
Image (fetched from Gyazo)
Block quote
文書を引用する際に使用します(段落ごと引用する場合など)
Image (fetched from Gyazo)
Insert code block
コードブロックを追加します。コードブロックしたいソース部分をドラッグし、アイコンをクリックしてください。
Image (fetched from Gyazo)
Undo
行った編集作業を元に戻すことができます。
Image (fetched from Gyazo)
Redo
元に戻した作業をやり直すことができます。
Image (fetched from Gyazo)
Find and replace
検索と置換ができます。アイコンをクリックすると下記のウィンドウが表示されます。
Image (fetched from Gyazo)
Image (fetched from Gyazo)
Show more icon
隠れているアイコンを表示します。

アイコンツールの編集方法

WYSIWYGエディタを拡張項目で設定する場合、表示するアイコンはコンテンツ定義編集の拡張項目で調整することが可能です。
設定可能な項目はCKEditorのドキュメントサイトをご確認ください。

設定箇所

コンテンツ定義画面の拡張項目、設定項目フィールドに記入してください。

Image (fetched from Gyazo)

設定例

width::800
removePlugins::heading, bold, italic, underline

表示例

Image (fetched from Gyazo)