メインコンテンツまでスキップ

WYSIWYGエディタの使用方法

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

Image (fetched from Gyazo)

備考

WYSIWYGエディタでは、空のタグが消される、scriptタグが消される、不明なタグが補完されるなど、HTMLのタグに自動で修正が入る場合があります。 HTMLを厳密に管理したい場合はHTMLの項目を利用してください。

アイコンツールの説明

項目説明
Image from Gyazo
ソース
デザイン編集とHTML編集モードの切り替えを行います。
Image (fetched from Gyazo)
FullScreen
WYSIWYGエディタをフルスクリーンモードにします。
Image (fetched from Gyazo)
見出し
見出しタグを設定します。
Image (fetched from Gyazo)
文字揃え
文章の[左揃え][右揃え][中央揃え][均等揃え]を制御します。
Image (fetched from Gyazo)
ボールド
太文字(B.png)を設定します。
Image (fetched from Gyazo)
イタリック
イタリック文字(I.png)を設定します。
Image (fetched from Gyazo)
アンダーライン
下線(U.png)を設定します。
Image (fetched from Gyazo)
画像やファイルの挿入
KurocoFilesに保存した画像を選択して挿入することができます。
Image (fetched from Gyazo)
画像挿入
直接自分のローカル(デスクトップ等)から画像を挿入します。挿入した画像は自動的にKurocoFilesの/fiese/user/topoics_img/配下もしくは「リソースを指定」で設定したディレクトリに保存されます。
Image (fetched from Gyazo)
メディアの挿入
動画を挿入します。アイコンをクリックすると下記のウィンドウが表示されますので、URLを入力してください。
Image from Gyazo
利用可能なMedia URLについてはCKEditorのドキュメントをご参照ください。
Image (fetched from Gyazo)
リンク
リンクの挿入と編集を行います。リンクを設定したい文字列をドラッグし、アイコンをクリックしてください。リンクを設定する場合は、下記のウィンドウが表示されますので、URLを入力してください。
Image from Gyazo
Open in a new tabを有効にすると、aタグにtarget="_blank"が設定されます。
Image (fetched from Gyazo)
表の挿入
表を挿入します。アイコンをクリックすると下記のウィンドウが表示されるので、行・列を指定します。
Image (fetched from Gyazo)
Image (fetched from Gyazo)
フォントサイズ
文字の大きさを変更できます。
Image (fetched from Gyazo)
文字色
文字の色を設定します。
Image (fetched from Gyazo)
背景色
文字の背景の色を設定します。
Image (fetched from Gyazo)
フォントファミリー
文字の種類(フォント)を変更できます。
Image (fetched from Gyazo)
箇条書きリスト
文章をリスト形式で表示します。箇条書きにしたい文章をドラッグし、アイコンをクリックしてください。
Image (fetched from Gyazo)
番号付きリスト
文章を数字のリスト形式で表示します。箇条書きにしたい文章をドラッグし、アイコンをクリックしてください。
Image (fetched from Gyazo)
ブロッククオート(引用)
文書を引用する際に使用します(段落ごと引用する場合など)
Image (fetched from Gyazo)
コードブロックの挿入
コードブロックを追加します。コードブロックしたいソース部分をドラッグし、アイコンをクリックしてください。
Image (fetched from Gyazo)
元に戻す
行った編集作業を元に戻すことができます。
Image (fetched from Gyazo)
やり直し
元に戻した作業をやり直すことができます。
Image (fetched from Gyazo)
検索して置換
検索と置換ができます。アイコンをクリックすると下記のウィンドウが表示されます。
Image from Gyazo
Image from Gyazo
Templates
事前に保存したWYSIWYGテンプレートを呼び出します。
Image (fetched from Gyazo)
他の項目を表示
隠れているアイコンを表示します。

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

WYSIWYGエディタを拡張項目で設定する場合、表示するアイコンはコンテンツ定義編集の拡張項目で調整が可能です。
設定可能な項目は主に以下になります。

  • 横幅
  • 縦幅
  • 削除するプラグイン
  • カスタムカラー
  • 大きなカラーパレット
  • シンプルなツールバー
  • フォントサイズをpx指定

設定例

コンテンツ定義画面の拡張項目の項目設定で以下のように設定してください。

横幅:800
縦幅:500
削除するプラグイン:italic, underline
大きなカラーパレット:有効にする
Image from Gyazo

表示例

Image from Gyazo

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

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

Image from Gyazo

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

項目  文字列  
  ソース  SourceEditing
  FullScreen  fullScreen
  見出しheading  
  文字揃え  alignment
  ボールド    bold
  イタリック  italic
  アンダーライン  underline
  画像やファイルの挿入  ckfinder
  画像挿入    insertImage  
  メディアの挿入    mediaEmbed
  リンク    link
  表の挿入    insertTable  
  フォントサイズ  fontSize
  文字色  fontColor
  背景色  fontBackgroundColor  
  フォントファミリーfontFamily
  箇条書きリスト  bulletedList
  番号付きリスト  numberedList
  ブロッククオート(引用)blockQuote
  コードブロックの挿入  codeBlock
  元に戻す    undo
  やり直し    redo
  検索して置換    findAndReplace
  Templatestemplates

相対パスの補完

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

関連ドキュメント


サポート

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