History: Summernote
Source of version: 8 (current)
Copy to clipboard
!Summernote Editor Thank you to the Summernote community: https://github.com/summernote/ !!Introduction In Tiki, we have ((Editors comparison|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 offers because it provides thousands of features designed to make your life easier. It is with this vision that we integrated Summernote, which is a very cool, intuitive, and easy-to-use ((WYSIWYG)) editor. {img src="display2116" link="display2116" width="400" rel="box[g]" imalign="center" desc="Click to expand" align="center" styleimage="border"} !!Summernote in Tiki Summernote was [https://gitlab.com/tikiwiki/tiki/-/merge_requests/6892|introduced] in ((Tiki29|Tiki 29.0)) as the default editor for the ((WYSIWYG)) mode. The previous ((WYSIWYG)) 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? So coooool!) !!!Let’s take a quick tour of the icons, just in case The first icon allows you to make your text bold. {img src="display2117" link="display2117" width="400" rel="box[g]" imalign="center" desc="Click to expand" align="center" styleimage="border"} The second icon lets you italicize your text. {img src="display2118" link="display2118" width="400" rel="box[g]" imalign="center" desc="Click to expand" align="center" styleimage="border"} The third allows you to put underline. {img src="display2119" link="display2119" width="400" rel="box[g]" imalign="center" desc="Click to expand" align="center" styleimage="border"} The fourth icon allows you to strike through a line of text, somewhat like crossing it out. {img src="display2120" link="display2120" width="400" rel="box[g]" imalign="center" desc="Click to expand" align="center" styleimage="border"} The fourth and fifth icons are mainly for mathematicians (subscripts and superscripts—a little something for the intellectuals... lol). {img src="display2121" link="display2121" width="400" rel="box[g]" imalign="center" desc="Click to expand" align="center" styleimage="border"} 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. {img src="display2123" link="display2123" width="400" rel="box[g]" imalign="center" desc="Click to expand" align="center" styleimage="border"} The seventh icon allows you to insert an image. Click on it, and a window will open showing the images in your file gallery. Select the image, and boom—the image is now in your editor. {img src="display2124" link="display2124" width="400" rel="box[g]" imalign="center" desc="Click to expand" align="center" styleimage="border"} The eighth and ninth icons let you insert links (wiki page links and URLs). {img src="display2125" link="display2125" width="400" rel="box[g]" imalign="center" desc="Click to expand" align="center" styleimage="border"} {img src="display2126" link="display2126" width="400" rel="box[g]" imalign="center" desc="Click to expand" align="center" styleimage="border"} The tenth icon, the Text Replace icon, helps you replace specific matched text with another text in your content. {img src="display2127" link="display2127" width="400" rel="box[g]" imalign="center" desc="Click to expand" align="center" styleimage="border"} The eleventh icon is for Special Characters. You can choose a special character from there to insert into your text. {img src="display2128" link="display2128" width="400" rel="box[g]" imalign="center" desc="Click to expand" align="center" styleimage="border"} The twelfth icon is for Paragraphs. It helps you arrange the paragraphs in your content. {img src="display2129" link="display2129" width="400" rel="box[g]" imalign="center" desc="Click to expand" align="center" styleimage="border"} 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) {img src="display2130" link="display2130" width="400" rel="box[g]" imalign="center" desc="Click to expand" align="center" styleimage="border"} 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) {img src="display2131" link="display2131" width="400" rel="box[g]" imalign="center" desc="Click to expand" align="center" styleimage="border"} Horizontal Rule Icon: Helps insert a horizontal line to separate content. (image) {img src="display2133" link="display2133" width="400" rel="box[g]" imalign="center" desc="Click to expand" align="center" styleimage="border"} Table icon, helps you insert table in your page. {img src="display2135" link="display2135" width="400" rel="box[g]" imalign="center" desc="Click to expand" align="center" styleimage="border"} Code View Icon: Allows you to see how Summernote formats your text in the backend Tiki syntax, so you don’t have to worry about HTML or other special languages. It takes care of it for you. {img src="display2134" link="display2134" width="400" rel="box[g]" imalign="center" desc="Click to expand" align="center" styleimage="border"} Help Icon: Provides tips and guidance to help you become more productive with the editor. {img src="display2136" link="display2136" width="400" rel="box[g]" imalign="center" desc="Click to expand" align="center" styleimage="border"} 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. {img src="display2137" link="display2137" width="400" rel="box[g]" imalign="center" desc="Click to expand" align="center" styleimage="border"} {img src="display2138" link="display2138" width="400" rel="box[g]" imalign="center" desc="Click to expand" align="center" styleimage="border"} Switch Editor Icon: Allows you to switch between editors if you don’t want to use Summernote. {img src="display2139" link="display2139" width="400" rel="box[g]" imalign="center" desc="Click to expand" align="center" styleimage="border"} Admin Toolbar Icon: Helps you access your settings in the control panel, where you can modify anything if you have the necessary permissions. {img src="display2140" link="display2140" width="400" rel="box[g]" imalign="center" desc="Click to expand" align="center" styleimage="border"} Full Screen Icon: Enables you to use your editor in full-screen mode. !!Conclusion You can easily build or edit your web pages with Tiki CMS using the Summernote editor. Tiki offers many features, so start using it and you should never be disappointed.