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.
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
| Icon | Description |
|---|---|
 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. |
 Full screen | Switch between in-line and full-screen modes. |
 Heading | Select the heading level. |
 Text alignment | Select the text aligment. |
 Bold | Switch between bold (B.png) and regular typeface. |
 Italic | Switch between italic (I.png) and regular typeface. |
 Underline | Switch between underlined (U.png) and regular typeface. |
 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.) |
 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'. |
| < Insert media | Insert embedded media via URL link. |
 Link | Insert or edit existing links. Select the anchor text and click the icon to enter the link URL. Enabling "Open in a new tab" sets the target attribute to "_blank". |
 Insert table | Insert a table. Click the icon to select the number of rows and columns. For example: |
 Font Size | Select the font size. |
 Font Color | Select the text color. |
 Font Background Color | Select the highlighter color of the text. |
 Font Family | Select the font. |
 Bulleted List | Format the selected text into a bulleted list. |
 Numbered List | Format the selected text into a numbered list. |
 Block quote | Format the selected text (one or more paragraph(s).png) into a blockquote. |
 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. |
 Undo | Undo the previous action. |
 Redo | Reverse the previous "undo" action. |
 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). |
 Templates | Call up a pre-saved WYSIWYG template. |
 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:
Width::800
Height:500
Delete plugin:italic, underline
Large color palette:Enable
You should see the field below in the corresponding content editor:
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".
The specifiable icons and their corresponding strings are as follows:
| Icon | String |
|---|---|
| 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 |
| Templates | templates |
Relative Path Completion
In the WYSIWYG editor, relative paths starting with /files/ will automatically have the KurocoFiles domain (kuroco-img.app) added when retrieved via the API.
More Information
Support
If you have any other questions, please contact us or check out Our Slack Community.