Summernote Editor
Introduction
In Tiki CMS, we have several editors, such as Markdown, Summernote, and the default tiki editor, which allow users to create and edit web pages without any knowledge of HTML or CSS.
With Tiki, you don’t need to be a developer to create something amazing, and you are never limited by the tools Tiki CMS offers because it provides thousands of features designed to make your life easier.
It is with this vision that we added Summernote, which is a very cool, intuitive, and easy-to-use editor
Summernote in tiki
Summernote was introduced in Tiki 29.0 as the default editor. The previous default editor was CKEditor, but they changed their license. Since Tiki remains open source, another open source solution was needed, and that’s what our developers worked on.
As you can see in the previous image, Summernote requires no prior knowledge to use. You have a writing space and very intuitive icons above it to help you make your text beautiful and visually appealing. The way you write your text will be an exact reflection of how your web page will look. Cool, right? (What can’t be done in Tiki CMS? So coooool!)
Let’s take a quick tour of the icons, just in case
The first icon allows you to make your text bold.
The second icon lets you italicize your text.
The third icon allows you to strike through a line of text, somewhat like crossing it out.
(image)
The fourth and fifth icons are mainly for mathematicians (subscripts and superscripts—a little something for the intellectuals... lol).
(image)
The sixth icon is for adding color to your text, and it’s super simple to use. Just select your text, click on the icon, choose the color, and boom—it’s done! Your text now has a new color. Cool, right? Alright, I know you probably already knew that. I just wanted to chat and play the intellectual... lol.
(image)
The seventh icon allows you to insert an image. Click on it, and a window will open showing the images in your gallery. Select the image, and boom—the image is now in your editor.
(image)
The eighth and ninth icons let you insert links (wiki page links and URLs).
(image)
The tenth icon, the Text Replace icon, helps you replace specific matched text with another text in your content.
(image)
The eleventh icon is for Special Characters. You can choose a special character from there to insert into your text. (image)
The twelfth icon is for Paragraphs. It helps you arrange the paragraphs in your content. (image)
The thirteenth icon is the Style Icon. It allows you to choose the style of your different headers, specifying which header you want to insert into your text. (image)
The fourteenth and fifteenth icons are for Ordered Lists and Unordered Lists. They help you insert an ordered list (with numbers in front of the items) or an unordered list (without numbers, using dots or other special characters instead). (image)
Horizontal Rule Icon: Helps insert a horizontal line to separate content. (image)
Code View Icon: Allows you to see how Summernote formats your text in the backend, so you don’t have to worry about HTML or other special languages. It takes care of it for you. (image)
Help Icon: Provides tips and guidance to help you become more productive with the editor. (image)
Launch Plugin Icon: An interesting feature! You don’t need to memorize every syntax of a wiki plugin. Just click this icon, and the syntax will appear for you. (image)
Switch Editor Icon: Allows you to switch between editors if you don’t want to use Summernote.
Admin Toolbar Icon: Helps you access your settings in the control panel, where you can modify anything if you have the necessary permissions. (image)
Full Screen Icon: Enables you to use your editor in full-screen mode.