What is a WYSIWYG Text Editor and how to implement it?
WYSIWYG stands for “What You See Is What You Get.” These editors allow you to format text directly within the editor, just like you would in WordPress. You can easily add bold, italics, headings, images, links, and more, and see the changes reflected instantly. This makes content creation much easier and faster compared to writing raw HTML code
Implementing a WYSIWYG Editor in an HTML Form:
One popular and user-friendly option is the Summernote JavaScript library. It’s lightweight and easy to use, perfect for most projects.
To add a Summernote editor to your form, simply include the necessary JavaScript and CSS files in your HTML code, then create a <textarea> element. Summernote will transform this plain textarea into a powerful editor, making your forms more user-friendly and enhancing the overall user experience.
1. Add required CSS and JS file at the header:
<!-- Bootstrap 5.3 CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Summernote CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/summernote-lite.min.css" rel="stylesheet">
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Bootstrap 5.3 Bundle JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<!-- Summernote JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/summernote-lite.min.js"></script>
2. Form Content, besides other fields, add WYSIWYG editor
<textarea id="editor" name="textbox">
</textarea>
3. If required there are multiple editors in a single form, then use as follows:
<textarea id="editor1" name="textbox1"> </textarea>
<textarea id="editor2" name="textbox2"> </textarea>
<textarea id="editor3" name="textbox3"> </textarea>
4. JavaScript for handling the WYSIWYG editor textarea
<script>
const toolbar = [
['style', ['style']],
['font', ['bold', 'italic', 'underline', 'clear']],
['fontname', ['fontname']],
['fontsize', ['fontsize']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['height', ['height']],
['table', ['table']],
['insert', ['link', 'picture', 'video']],
['view', ['fullscreen', 'codeview']]
];
$('textarea[id^="editor"]').summernote({
height: 300, // height of the text editor
toolbar: toolbar
});
</script>
Conclusion:
When you submit this form, the text you enter in the box will be saved in the database in a special code. This code makes sure that the text looks exactly the way you formatted it (like bold, italics, headings) when you see it on the page.
recent comments