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

Tool icons

IconDescription
fetched from Gyazo
Source
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 (fetched from Gyazo)
Heading
Select the heading level.
Image (fetched from Gyazo)
Text alignment
Select the text aligment.
Image (fetched from Gyazo)
Bold
Switch between bold (B.png) and regular typeface.
Image (fetched from Gyazo)
Italic
Switch between italic (I.png) and regular typeface.
Image (fetched from Gyazo)
Underline
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 are automatically saved to KurocoFiles.
fetched from Gyazo
Insert media
Insert embedded media via URL link.
Image (fetched from Gyazo)
Image (fetched from Gyazo)
Link
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
Undo the previous action.
Image (fetched from Gyazo)
Redo
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 (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.

Refer to the CKEditor Ecosystem documentation for the available config options.

Sample configuration

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

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

Image (fetched from Gyazo)

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

Image (fetched from Gyazo)

Specifiable strings for plugin removal

In the content structure editor, click [Settings] in the respective "Field settings" entry to open the settings dialog. Here, you can remove unwanted icons from the toolbar by entering them as a comma-separated string in the "Delete plugin" field.

Image (fetched from Gyazo)

The specifiable icons and their corresponding strings are as follows:

IconString
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

If you have any other questions, please use our contact form or Slack workspace.