Skip to main content

The WYSIWYG editor

​The WYSIWYG editor in Kuroco contains a handy toolbar that enables users of all skill levels to create and edit content easily. Switch between WYSIWYG editing and HTML editing for greater customization of your content.

fetched from Gyazo


In a WYSIWYG editor, automatic corrections may occur for HTML tags, such as removal of empty tags, removal of script tags, and completion of unknown tags. If you want to strictly control the HTML, please use the HTML field.

Tool icons

fetched from Gyazo
Switch between WYSIWYG editing and html editing (i.e., source mode). After editing in source mode, click the icon again to view the layout of your text.
Image (fetched from Gyazo)
Full screen
Switch between in-line and full-screen modes.
Image from Gyazo
Select the heading level.
Image (fetched from Gyazo)
Text alignment
Select the text aligment.
Image (fetched from Gyazo)
Switch between bold (B.png) and regular typeface.
Image (fetched from Gyazo)
Switch between italic (I.png) and regular typeface.
Image (fetched from Gyazo)
Switch between underlined (U.png) and regular typeface.
Image (fetched from Gyazo)
Insert image or file
Insert an image or file from Google Cloud Storage. Firebase integration is required to use this feature. (See Tutorial: Cloud storage integration with Firebase for details.)
fetched from Gyazo
Insert image
Insert an image directly from your local drive or through a URL link. Uploaded images will be automatically saved under the 'fiese/user/topoics_img/' directory in KurocoFiles or in the directory specified in 'Resources'.
Image (fetched from Gyazo)<
Insert media
Insert embedded media via URL link.
Image from Gyazo
Image (fetched from Gyazo)
Insert or edit existing links. Select the anchor text and click the icon to enter the link URL.Image from Gyazo
Enabling "Open in a new tab" sets the target attribute to "_blank".
Image (fetched from Gyazo)
Insert table
Insert a table. Click the icon to select the number of rows and columns. For example:
Image (fetched from Gyazo)
Image (fetched from Gyazo)
Font Size
Select the font size.
Image (fetched from Gyazo)
Font Color
Select the text color.
Image (fetched from Gyazo)
Font Background Color
Select the highlighter color of the text.
Image (fetched from Gyazo)
Font Family
Select the font.
Image (fetched from Gyazo)
Bulleted List
Format the selected text into a bulleted list.
Image (fetched from Gyazo)
Numbered List
Format the selected text into a numbered list.
Image (fetched from Gyazo)
Block quote
Format the selected text (one or more paragraph(s).png) into a blockquote.
fetched from Gyazo
Insert code block
Format the selected text into a code block. Click the dropdown arrow to the right of the icon to select the programming language.
Image (fetched from Gyazo)
Undo the previous action.
Image (fetched from Gyazo)
Reverse the previous "undo" action.
fetched from Gyazo
Find and replace
Find all instances of a target string (e.g., text, number, or symbol) and replace it with another string. Click the settings icon to configure case and whole-word matches (see below).
fetched from Gyazo
Image from Gyazo
Call up a pre-saved WYSIWYG template.
Image (fetched from Gyazo)
Show more items
Display hidden icons.

Customizing the toolbar

You can customize the icons displayed when configuring the WYSIWYG editor as an additional field. For more details, see User guide: Content structure editor - Additional fields.

Available configuration options include mainly

  • Width
  • Height
  • Delete plugin
  • Custom colors
  • Large color palette
  • Simple toolbar
  • Use font size px

Sample configuration

In the content structure editor, under "Field settings" for WYSIWYG, enter the following:

Delete plugin:italic, underline
Large color palette:Enable
Image from Gyazo

You should see the field below in the corresponding content editor:

Image from Gyazo

Specifiable strings for plugin removal

You can remove unwanted icons from the toolbar by specifying a string in the "Delete plugin" field of the "Field settings".

Image from Gyazo

The specifiable icons and their corresponding strings are as follows:

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

More Information


If you have any other questions, please contact us or check out Our Slack Community.