Awesome Bootstrap Rich Text Editor summernote_javascript skills

Source: Internet
Author: User
Tags sendfile
Summernote is a simple, flexible, WYSIWYG editor built on jQuery and Bootstrap. If you are interested in the bootstrap text editor, learn about it. Summernote is a simple and flexible WYSIWYG editor built on jQuery and Bootstrap. All major operations of Summernote support shortcut keys. There is a powerful API that provides a large number of custom options for design (width, height, and effective projects) and functions. This project provides integration examples for major scripting languages or frameworks (PHP, Ruby, Django, and NodeJS.

Bootstrap summernote is introduced on its official website as "Super Simple WYSIWYG editor". However, in my opinion, it should be simpler than the "bootstrap-wysiwyg" provided on the Chinese official website of bootstrap, more beautiful and easier to use!

Although I have tried bootstrap-wysiwyg before, I can refer to how Bootstrap wysiwyg Rich Text data is saved to mysql, but Zhuge Liang's experience tells me that summernote is definitely a better Rich Text Editor, click for the team !!!!!

After a day of exploration, I have some knowledge about summernote, so to facilitate the majority of front-end enthusiasts, I will try my best to introduce summernote, a super benefit.

1. Download the official API and source code

To do a good job, you must first sharpen the tool. First, get the source code of summernote and the corresponding official API to tell everyone that it is the first task!

Official website (demo and api)

Download github source code. Pay attention to download the development version.

II,

1

2

3

Iii. Opening lecture content

The general direction is as follows:

Page Layout of summernote (resource introduction and initial parameters)
How to upload images from a local device using summernote (front-end onImageUpload method and backend springMVC file storage)
Data submission of form in which summernote is located

①. Page Layout of summernote

<% @ Include file = "/components/common/taglib. jsp" %>
 
 Summernote-bs3fa4
 

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.