Author: | yusufsefasezer |
---|---|
Views Total: | 3,301 views |
Official Page: | Go to website |
Last Update: | February 27, 2023 |
License: | MIT |
Preview:

Description:
ysEditor.js is a simple, lightweight, extensible WYSIWYG editor for the web. You can customize the toolbar and editor buttons as per your needs.
How to use it:
Install the ysEditor.js with NPM.
# NPM $ npm install yseditor --save
Import and initialize the editor.
import('./yseditor.js') .then(function () { var myEditor = new ysEditor(); });
Create a DIV element where you want to generate the editor.
<div id="yseditor"></div>
Possible options to customize the editor.
var myEditor = new ysEditor({ // Editor wrapper wrapper: '#yseditor', // Toolbar options toolbar: [ 'undo', 'redo', 'bold', 'italic', 'underline', 'strikethrough', 'h1', 'h2', 'h3', 'p', 'quote', 'left', 'center', 'right', 'justify', 'ol', 'ul', 'sub', 'sup', 'removeformat'], bottom: false, // Content options height: 200, scroll: false, includeContent: true, // Footer options footer: true, footerText: 'Created by Yusuf SEZER' });
Predefined button options.
var predefinedButtons = { 'bold': { title: 'Bold', command: 'bold', text: '<b>B</b>' }, 'italic': { title: 'Italic', command: 'italic', text: '<i>I</i>' }, 'underline': { title: 'Underline', command: 'underline', text: '<u>U</u>' }, 'strikethrough': { title: 'Strike through', command: 'strikeThrough', text: '<strike>S</strike>' }, 'left': { title: 'Align left', command: 'justifyLeft', text: 'Left' }, 'center': { title: 'Align center', command: 'justifyCenter', text: 'Center' }, 'right': { title: 'Align right', command: 'justifyRight', text: 'Right' }, 'justify': { title: 'Align justify', command: 'justifyFull', text: 'Justify' }, 'sub': { title: 'Subscript', command: 'subscript', text: 'X<sub>2</sub>' }, 'sup': { title: 'Superscript', command: 'superscript', text: 'X<sup>2</sub>' }, 'ol': { title: 'Ordered list', command: 'insertOrderedList', text: '<b>#</b>' }, 'ul': { title: 'Unordered list', command: 'insertUnorderedList', text: '<b>•</b>' }, 'removeformat': { title: 'Clear formatting', command: 'removeFormat', text: 'CF' }, 'undo': { title: 'Undo', command: 'undo', text: '↶' }, 'redo': { title: 'Redo', command: 'redo', text: '↷' }, 'h1': { title: 'Heading 1', command: 'formatBlock', text: 'H1', value: 'h1' }, 'h2': { title: 'Heading 2', command: 'formatBlock', text: 'H2', value: 'h2' }, 'h3': { title: 'Heading 3', command: 'formatBlock', text: 'H3', value: 'h3' }, 'p': { title: 'Paragraph', command: 'formatBlock', text: '¶', value: 'p' }, 'quote': { title: 'Quote', command: 'formatBlock', text: '❝❞', value: 'blockquote' } };
Add a custom button to the editor.
myEditor.defineButton("name", { command: "", text: "", title: "", value: "", callback: function(button, editor){} });
API methods.
// gets the editor text myEditor.getText() // set the editor text myEditor.setText() // Gets the html content. myEditor.getHTML() // sets the html content myEditor.setHTML() // destroy the editor myEditor.destroy()
Changelog:
02/27/2023
- v0.1.1