Using the WYSIWYG editor

​ The WYSIWYG editor used in Kuroco is as intuitive as Microsoft Word, making it easy for anyone to create and edit content.
If you switch to Source mode, you can also edit HTML directly, so those who have knowledge of HTML can create content more flexibly.
You can switch to Source mode by clicking on the [Source] tool icon, which allows you to smoothly edit HTML while checking the design and layout.

Image from Gyazo

Tools Icons Description

ToolDescription
Image from Gyazo
Source
Switches between design editing and HTML editing modes.
Image from Gyazo
FullScreen
Changes the WYSIWYG editor to full-screen mode.
Image from Gyazo
Heading
Set the heading tag.
Image from Gyazo
Text alignment
Controls the [Left justification], [Right justification], [Center justification], and [Even justification] of the text.
Image from Gyazo
Bold
Sets the Bold(B).
Image from Gyazo
Italic
Sets the Italic(I).
Image from Gyazo
Underline
Sets the Underline (U).
Image from Gyazo
Insert image or folder
You can select and insert images stored in Google's Cloud Storage.
To use this feature, you need to integrate with Firebase.
Reference: Link with Firebase to store files in Storage
Image from Gyazo
Insert image
You can insert images directly from your local storage (e.g. desktop). The inserted image will be automatically saved directly under KurocoFiles.
Image from Gyazo
Link
Insert and edit links. Select the text you want to set a link to, and click the icon.
The following pop-up window will appear, and you can enter the URL.
Image from Gyazo
Image from Gyazo
Insert table
Insert a table. Click on the icon to display the following window, and specify the rows and columns.
Image from Gyazo
Image from Gyazo
Font Size
You can change the size of the text.
Image from Gyazo
Font Family
You can change the font of the text.
Image from Gyazo
Font Color
You can change the color of the text.
Image from Gyazo
Font Background Color
You can change the background color of text.
Image from Gyazo
Bulleted List
Lists the sentences as bullet points. Select the sentences you want to list and click on the icon.
Image from Gyazo
Numbered List
Lists the sentences in a numbered order. Select the sentences you want to number and click on the icon.
Image from Gyazo
Block quote
Used to cite a text (e.g. to quote an entire paragraph).
Image from Gyazo
Undo
You can undo the previous action(s).
Image from Gyazo
Redo
You can cancel the previous "Undo" change(s).
Image from Gyazo
Show more icon
Displays currently hidden tools.

How to customize the toolbar

When configuring the WYSIWYG editor as an "Extra column", it's possible to customize which icons to display from Extra columns of the Topics group edit.

Please refer to the following website for the possible config options.
Reference: CKEditor Ecosystem Documentation

Settings field:

Image from Gyazo

Settings example:

uiColor::#4169e1
width::600
removePlugins::heading, undo, redo

Display example:

Image from Gyazo