how to use Summernote rich text editor

Hello guys, we will explain how to add Summernote rich text editor on the HTML page

how to use Summernote rich text editor

In HTML, we used <TEXTAREA> element to require a text, comment or article from a user but the difficulty is to make the formatting of the entered text, like Microsoft Word as you know.

how to use Summernote rich text editor

Why to use Summernote rich text editor

If you want to know more about the advantages of Summernote, It`s completely free and open-source, it is also lightweight and supports Arabic, English and word-wide languages like:

ar-AR, bg-BG, ca-ES, cs-CZ, da-DK, de-DE, el-GR, es-ES, es-EU, fa-IR, fi-FI, fr-FR, gl-ES, he-IL, hr-HR, hu-HU, id-ID, it-IT, ja-JP, ko-KR, lt-LT, lt-LV, mn-, N, nb-NO, nl-NL, pl-PL, pt-BR, pt-PT, ro-RO, ru-RU, sk-SK ,sl-SI, sr-RS-Latin, sr-RS, sv-SE, ta-IN, th-TH, tr-TR, uk-UA, uz-UZ, vi-VN, zh-CN, zh-TW

It is also compatible with the all Major Browsers:

Safari, Chrome, Firefox, Opera, Edge and Internet Explorer 9+

and it`s Supports Bootstrap 3.x.x to 4.x.x

 

How to use Summernote rich text editor

After we got to know the advantages of Summernote, we will start by explaining how to add it to the HTML page

First, you may create a new page like index.html

Then you need to write the structure of a page

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Hello Summernote</title> 
</head>
<body> 
</body> 
</html>

Summernote built-on jQuery so you need to add

  • jquery 
  • Summernote CSS
  • Summernote JS

don't forget to download the Summernote CSS/JS from the official website

https://summernote.org/

put them in the same directory

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Hello Summernote</title>
	<!-- include libraries(jQuery, bootstrap) -->
	<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" />
	<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>

	<!-- include summernote css/js-->
	<link href="summernote.css" rel="stylesheet">
	<script src="summernote.js"></script>
</head>
<body> 
</body> 
</html>

Now we need to specify where the editor will appear, we will use this command to determine this

<div id="summernote">Hello Summernote</div>

Finally, you need to create an instance after DOM created 

$(document).ready(function() {
  $('#summernote').summernote();
});

you can take to the full code from here 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Hello Summernote</title>
	<!-- include libraries(jQuery, bootstrap) -->
	<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" />
	<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>

	<!-- include summernote css/js-->
	<link href="summernote.css" rel="stylesheet">
	<script src="summernote.js"></script>
</head>
<body>
	<div id="summernote">Hello Summernote</div>
	<script>
	$(document).ready(function() {
	$('#summernote').summernote();
	});
	</script>
</body>

</html>

Thank you for reading this article, in case you liked it, I hope you share it with your friends and colleagues

 

 

 

Last modified