An API Driven Rich Text Editor in 5 Steps.
Hey everyone I hope you have your pot pockets ready because we are building a Text-Editor using Quill.js in just 5 steps.
Quill is basically a Microsoft word that runs inside of the browser. Many people refer to WYSIWYG (What You See Is What You Get ) as it helps us to do blogging .Although QuillJS is the same thing but the real magic of Quill comes in its flexibility and extensiblity .
Now lets’s just start creating your Text-Editor.
Step 1 :
First of all we need to have an Editor for writing code.
Here I am using Sublime Text-editor.
In case you don’t have an Editor you can download it form here .
Now create a new file index.html and paste the following code.
<!DOCTYPE html>
<html>
<head>
<title>Text-editor</title>
</head>
<body>
</body>
</html>
Step 2 :
Now we have to add some script tags in head portion.
<script src=”https://cdn.quilljs.com/1.1.3/quill.js"></script>
<script src=”https://cdn.quilljs.com/1.1.3/quill.min.js"></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
These are publicly available scripts that we need for Quill in order to work.
And then we are going to add two Stylesheets that allow Quill to be styled.
<link rel=”stylesheet” type=”text/css” href=”https://cdn.quilljs.com/1.1.3/quill.snow.css">
<link rel=”stylesheet” type=”text/css” href=”https://cdn.quilljs.com/1.1.3/quill.bubble.css">
Step 3 :
Now we need two simple div tags in body.
<div id=”toolbar”>
</div>
<div id=”editor”>
</div>
Now, we have to write some script wrapped in a script tag.
<script type=”text/javascript”>
var toolbarOptions= [ ];
var quill =new Quill(‘#editor’,{
modules: {
toolbar: toolbarOptions
},
theme: ‘snow’
});
</script>
as you can see in this javascript code we are telling quill that we want to use <div id=”#editor”></div> as Editor and we are assigning toolbaroptions to toolbar. and let toolbaroptions be an empty array for now.
now if you run index.html ,
there will be two bars
one for the editor and
another one for the toolbar .
Step 4 :
Now we need to add options to our toolbar like bold, italic and many more.
var toolbarOptions= [
[‘bold’, ‘italic’, ‘underline’, ‘strike’,’blockquote’, ‘code-block’],
[{‘header’ :[1 ,2 ,3 ,4 ,5 ,6 ,false] }],
[{‘list’ :’ordered’}, {‘list’ :’bullet’}],
[{‘script’ :’sub’}, {‘script’ :’super’}],
[{‘indent’ :’-1'}, {‘indent’ :’+1'}],
[{‘direction’ :’rtl’}],
[{‘size’ : [‘small’, false, ‘large’, ‘huge’] }],
[‘link’, ‘image’ ,’video’, ‘formula’],
[{‘color’ :[] }, {‘background’ :[] }],
[{‘font’ : [] }],
[{‘align’ : []} ]
];
we have to pass these values to toolbarOptions.
Step 5 :
Now if you want the content of text editor then use
quill.getContents()
Now whenever we click on that button Show data, it will display all the contents in the form of javascript object.
Hence powerful rich Text-Editor is ready in 5 easy steps.
