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.png)を設定します。
Image (fetched from Gyazo)
Italic
イタリック文字(I.png)を設定します。
Image (fetched from Gyazo)
Underline
下線(U.png)を設定します。
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)
利用可能なMedia URLについてはCKEditorのドキュメントをご参照ください。
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)

削除するプラグインで指定できる文字列の一覧

項目設定の「削除するプラグイン」フィールドに文字列を指定することで、ツールバーより不要なアイコンを削除できます。

Image (fetched from Gyazo)

フィールドに利用可能な文字列は以下の通りです。

項目文字列
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

お探しのページは見つかりましたか?解決しない場合は、問い合わせフォームからお問い合わせいただくか、Slackコミュニティにご参加ください。