Minimal WYSIWYG Editor In Pure JavaScript – Suneditor

Category: Recommended , Text | January 16, 2020
Author: JiHong88
Views Total: 4,246
Official Page: Go to website
Last Update: January 16, 2020
License: MIT


Minimal WYSIWYG Editor In Pure JavaScript – Suneditor


Suneditor is a lightweight, flexible, customizable, pure JavaScript WYSIWYG text editor for your web applications.

How to use it:

Load the needed suneditor.css and suneditor.js in the html document.

<link href="suneditor/css/suneditor.css" rel="stylesheet">
<script src="suneditor/js/suneditor.js"></script>

Create a normal textarea element for the WYSIWYG editor.

<textarea id="editor">Hello World!</textarea>

Create a new editor from the textarea element. Done.


All default options to customize the WYSIWYG editor.

SUNEDITOR.create('editor', {

  // plugins to load
  plugins: [

  // language object
  lang: lang['en'],

  // change default formatBlock array.
  formats: ['p', 'div', 'blockquote', 'pre', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'],

  // show the number of characters in the editor.   
  charCounter: false,

  // the maximum number of characters allowed to be inserted into the editor.
  maxCharCount: null,

  // the min-width size of the editor.
  minWidth: null,

  // the max-width size of the editor.
  maxWidth: null,

  // the size of the total uploadable images (in bytes).
  imageUploadSizeLimit: null,

  // 'classic', 'inline', 'balloon'
  mode: 'classic',

  // toolbar width
  toolbarWidth: 'max-content',

  // Sets to -1 or false or null to turn off
  // Sticky Toolbar
  // Default: 0px (offset)
  stickyToolbar: 0,

  // the position property of suneditor.   
  position: null,

  // places content in the iframe
  iframe : false,

  // allows the usage of HTML, HEAD, BODY tags and DOCTYPE declaration.
  fullPage: false,

  // CSS file to apply inside the iframe
  iframeCSSFileName: 'suneditor',

  // CodeMirror option object
  codeMirror: null,

  // Shows the bottom resizing bar.
  resizingBar: true,

  // Font Family array
  font: ['Arial', 'Comic Sans MS', 'Courier New', 'Impact', 'Georgia','tahoma', 'Trebuchet MS', 'Verdana'],

  // Font Size array
  fontSize: [8, 9, 10, 11, 12, 14, 16, 18, 20, 22, 24, 26, 28, 36, 48, 72],

  // Font size unit
  fontSizeUnit: 'px',

  // Enables video resizing
  videoResizing: true,

  // width of the video
  videoWidth: 560,

  videoSizeOnlyPercentage: false,
  videoRotation: false,
  videoRatio: 0.5625,
  videoRatioList:  [ {name: 'Classic Film 3:2', value: 0.6666}, {name: 'HD', value: 0.5625} ],
  videoHeightShow: true,
  videoRatioShow: true,

  // the query string of a YouTube embedded URL. 
  youtubeQuery: '',

  // the placeholder text.  
  placeholder: null,

  // Choose whether the image height input is visible.
  imageHeightShow: true,

  // enables image resizing
  imageResizing: true,

  // image width
  imageWidth: 'auto',

  imageSizeOnlyPercentage: true,
  imageHeightShow: true,

  // Shows image rotation buttons
  imageRotation: false,

  // image file input
  imageFileInput: true,

  // image url input
  imageUrlInput: true,

  // image upload url
  imageUploadUrl: null,

  // Http Header when uploading images
  imageUploadHeader: null,

  // height/width of the editor
  height: '',
  width: '',

  // min height/width of the editor
  minHeight: null,
  minWidth: null,

  // color array of color picker
  // e.g. [['#ccc', '#dedede', 'OrangeRed', 'Orange', 'RoyalBlue', 'SaddleBrown'], ['SlateGray', 'BurlyWood', 'DeepPink', 'FireBrick', 'Gold', 'SeaGreen']]
  colorList: null,

  // line-height array
  lineHeights: [
    {text: '1', value: 1},
    {text: '1.15', value: 1.15},
    {text: '1.5', value: 1.5},
    {text: '2', value: 2}

  // Displays the current node structure to resizingBar
  showPathLabel: true,

  // Size of background area when activating dialog window
  popupDisplay: '',

  // CSS display property
  display: 'block',

  // show/hide toolbar icons
  buttonList: [
    'undo', 'redo',
    'font', 'fontSize', 'formatBlock',
    'bold', 'underline', 'italic', 'strike', 'subscript', 'superscript',
    'removeFormat', 'paragraphStyle'
    'fontColor', 'hiliteColor', 'textStyle'
    'outdent', 'indent',
    'align', 'horizontalRule', 'list', 'lineHeight',
    'table', 'link', 'image', 'video',
    'fullScreen', 'showBlocks', 'codeView',
    'preview', 'print', 'save', 'template'

  // execute a function when the save button is clicked.
  callBackSave: function(){}

API methods:

var suneditor = SUNEDITOR.create('Editor');

// Copies the contents of the suneditor into a [textarea];

// Updates options

// Gets the suneditor's context object. Contains settings, plugins, and cached element objects

// Gets the contents of the suneditor

// Changes the contents of the suneditor
editor.setContents('set contents');

// Adds content to the suneditor
editor.appendContents('append contents');

// Inserts an HTML element or HTML string or plain string at the current cursor position
suneditor.insertHTML('<img src="">');

// Change the contents of the suneditor
suneditor.setContents('set contents');

// Add content to the suneditor
suneditor.appendContents('append contents');

// Upload images using image plugin

// Disable the suneditor

// Enabled the suneditor

// Hide the suneditor

// Show the suneditor;
// Destroy the suneditor

// Open a notice area
suneditor.noticeOpen('test notice');

// Close a notice area

// Gets a list of images uploaded to the editor
 * {
 *  src: imgage src
 *  index: data index
 *  name: file name
 *  size: file size
 *  select: select function
 *  delete: delete function
 * }

Event functions.

editor.onload = function (core, reload) {
    console.log('onload-core', core)
    console.log('onload-reload', reload)    

suneditor.onScroll = function (e) { console.log('onScroll', e) }

suneditor.onClick = function (e) { console.log('onClick', e) }

suneditor.onKeyDown = function (e) { console.log('onKeyDown', e) }

suneditor.onKeyUp = function (e) { console.log('onKeyUp', e) }

suneditor.onDrop = function (e) { console.log('onDrop', e) }

suneditor.onChange = function (contents) { console.log('onChange', contents) }

editor.onPaste = function (e, cleanData, maxCharCount) { console.log('onPaste', e, cleanData, maxCharCount) }

// Called before the editor's default event action
editor.showInline = function (toolbar, context) {
  console.log('toolbar', toolbar);
  console.log('context', context);

// Called when the image is uploaded or the uploaded image is deleted.
suneditor.onImageUpload = function (targetImgElement, index, isDelete, imageInfo) {
  console.log('targetImgElement :' + targetImgElement + ', index : ' + index + ', isDelete : ' + isDelete)

// Called when the image is upload failed.
// If you return false, the default notices are not called.
suneditor.onImageUploadError = function (errorMessage, result) {


v2.25.0 (01/16/2020)

  • German(de) translation has been fixed.
  • Added the onload event.
  • Fixed a bug that position of placeholder to be incorrect when opening a notice.
  • Fixed a bug that focus to disappear after text align.
  • Fixed bug where text was not aligned in IE browser.

v2.24.0 (01/15/2020)

  • German(de) translation has been fixed.
  • Modified anchor tag to remain un split when changing text nodes of an anchor tag.
  • Toolbar-related methods have been added.
  • Bugs fixed

v2.23.4 (12/22/2019)

  • Fixed a bug where the history stack did not change when characters were deleted in version 2.23.3

v2.23.3 (12/20/2019)

  • Changed the “selection” object to be deleted when selecting an image or video component.
  • Modified to give focus to the first TD when creating a table.
  • Added an “element” attribute that is an element of an image tag to “imagesInfo”.
  • Added the “notHistoryPush” argument to the core.insertComponent method.
  • Added removeRange, selectComponent, focusEdge method to core object.
  • Bugs fixed.

v2.23.1 (12/13/2019)

  • Added “ignoreChangeEvent” argument to history.reset method.
  • Added Spanish(es) translation.

v2.23.0 (12/12/2019)

  • Enhancement & bugfixed

v2.22.0 (12/03/2019)

  • Improved to minimize duplicate tags when tags are added, changed or deleted.
  • Added “textStyle” and “paragraphStyle” plugins.
  • The unlink button has been added to the “link” plugin.
  • Added “imageSizeUnit” and “imageRotation” options.
  • Improved line breaks and indents in Code view mode.
  • Modified to cancel with ESC key while resizing images and videos.
  • Fixed the “iframeCSSFileName” option to use arrays.
  • The custom format attribute names for the “formats” option have been changed.
  • The “PRE” format tag has been fixed to do not create scroll.
  • The copyTagAttributes and isSameAttributes methods have been added to the util object.
  • The core.nodeChange method has been improved.

v2.21.2 (11/16/2019)

  • Improved line breaks in tags in Code view mode.
  • Bugs fixed.

v2.21.1 (11/12/2019)

  • Fixed the line format to be initialized to paragraph tag after remove attributes when the backspace key is pressed when there is no content in the editor.
  • Fixed the style of the line format(H1, P, List.. etc.) to be maintained when the line format is changed.
    (text-align, line-height.. etc).
  • Fixed a bug where the history stack did not work properly when the “fullPage” option was true.
  • The “onlyContents” argument has been added to the “getContents” method.

v2.21.0 (11/11/2019)

  • Fixed French translation
  • After creating the editor, the user object has been modified to allow access to the core and util objects.
    (Now can redefine the method after creating the editor.)
  • Added “lineHeight” plugin and button.
  • Added “lineHeights”, “fontSizeUnit” options.

v2.20.1 (10/15/2019)

  • Fixed a bug where adding a placeholder option with the setOptions method did not result in a placeholder.
  • Fixed a bug that did not update the history stack after calling removeNode method.
  • Fixed a bug in which the position value of the resize module such as an image was calculated incorrectly

v2.20.0 (10/11/2019)

  • Added placeholder option.
  • Bugfixed.

v2.19.1 (09/30/2019)

  • Fix usage when the Editor is rendered in a popup window.
  • Fixed the link generation after selecting the text range.
  • Fixed a bug where paste (ctrl + v) was empty when cutting or copying text wrapped with the return line (shift + enter) in Firefox.
  • Added “iframe”, “pullPage”, “iframeCSSFileName” options.
  • Added “position” option.
  • Added “codeMirror” option.
  • Added “onPaste” and “showInline” event to functions.
  • The “formats” option has been modified to use custom tag as well.
  • Switch spelling from hilite -> highlight.
  • A bug that did not apply negative values to the sticky toolbar option has been fixed.
  • The class name of suneditor-contents has been modified.
  • The addDocEvent, removeDocEvent methods, _wd, and _ww objects have been added to core.
  • The getOffset method in util has been modified.

v2.18.0 (08/08/2019)

  • Added setOptions method.
  • Added Template plugins.
  • Added sort and caption buttons to the resizing module.
  • The icons in the editor has been changed.
  • Fixed the “on” method to be called when calling a submenu on “core”.
  • The default width of “toolbar” has been changed from “max-content” to “auto”.
  • When using the “appendContents” and “setContents” functions, the content is added to match the editor’s format.
  • Added “setContents” method to “core” object.
  • Bugs fixed.

v2.17.3 (07/23/2019)

  • Added the sort button to the resizing module.
  • Fixed a bug where the width of the image was intermittently 0 when uploading images from “insertImage”.
  • Added “access denied” error exception handling to “getPageStyle” method.

v2.17.1/2 (07/22/2019)

  • Added The “insertImage” method to upload images outside the editor.
  • Added “imageUploadSizeLimit” option to limit image upload size.
  • Fixed a bug that image caption was set z-index higher than toolbar.

v2.17.0 (07/21/2019)

  • The color picker has been modified to look natural when you change the color list.
  • Added “formats” option to change list of formatBlock.
  • Added “charCounter” option to show the current number of characters in the bottom bar.
  • Added “maxCharCount” option to limit the number of characters in the editor.
  • Added “minWidth” and “maxWidth” options.
  • When pasting images and videos, modified to convert to the format of the editor.
  • Modified to update the status of “imagesInfo” also when deleting an image by selecting a range.
  • Fixed a bug where the getContents method returned an empty value when there was no text in the editor.
  • Fixed a bug where pasted iframe tags did not resize correctly.
  • Fixed a bug that the history stack was not immediately updated when an image was deleted.
  • Fixed a bug where the link’s controller was rendered in the wrong position when the link was in the heading tag.
  • Fixed a bug where attributes of HTML were copied when adding text by dragging drop.
  • Modified to operate only backspace, delete, and enter keys when sizing module is active.
  • The getOffset method of the util object has been improved.

v2.16.3 (07/06/2019)

  • Replaced the zeroWidthSpace that was entered when creating an line with the br tag.
  • Added an activation effect to the FormatBlock list menu.
  • Added an activation effect to the List button.
  • Modified color selector design slightly.
  • Fixed a bug where table cells were selected when scrolling on mobile.
  • Fixed a bug that the return value of the getListChild and getListChildNodes methods of the util object contained br tags.
  • Fixed a bug that the max size, min size icons of the table controller did not display properly.
  • Added exception handling related to the br tag to nodeChange method of the core object.

v2.16.2 (07/03/2019)

  • Russian translation added.
  • The “print” and “preview” features has been improved.
  • Fixed a bug where the value of the “height” option was applied when the “minHeight” option value was entered as a numeric type.
  • The openWindowContents method has been removed from the core object and the print and preview methods have been added.
  • Deleted the code that calls notice when an error occurs during image upload. (Error message call during server upload is the same as before.)
  • Added getPageStyle method to util object

v2.16.0 (06/30/2019)

  • Update

v2.15.3 (06/02/2019)

  • Added imageUploadHeader option.
  • Fixed to remove the current line if there is image, video etc in the next line when using Delete key on blank line.
  • After selecting image and video components, component is moved down when enter key is pressed.
  • After selecting images and video components, the components are deleted when delete or backspace key is pressed.
  • When adding components such as table, image, and HR in the list, modified it to be added inside the LI tag.
  • Fixed to remove list and apply format tag when using format tag in list.
  • Fixed an error that was not working when editing the pasted image for the first time.
  • Fixed a bug where the enter key did not work when using pre, quotblock in figuare tag since v2.15.0.
  • Fixed bugs in list and format plugins and added exception handling.
  • Fixed a bug where the format tag inside was erased when the text node was modified when the format tag was in format tags such as p, div, h1-6, li.
  • And Several other bugs fixed.
  • Added insertComponent, getSelectedElementsAndComponents methods to core object.
  • Added ignoreNodeChange, getNodePath, getNodeFromPath methods to util object.
  • Updated core-nodeChange method.

v2.15.2 (05/23/2019)

  • French translation added.
  • A min size (auto), max size (100%) button has been added to the controller in the table.
  • The table controller has been modified to appear in two places, at the top of the table and in the cell.
  • When using a list, the list is merged if list is above or below it.
  • It has been modified to be added to the list when using hr in the list.
  • It has been modified to be added outside of the list when using pre, blockquote in the list.
  • When using pre, blockquote, it applies based on the outermost node in the current selection range.
  • Added maxSize and minSize entries to the Language file.
  • After adding a block, the action to add a format to the line below has been removed.
  • Fixed a bug that caused the toolbar to have a margin when using full screen in Sticky Toolbar mode.
  • Fixed bugs when in list adding and deleting items.
  • Fixed a bug where cells in tables were not displayed correctly intermittently.
  • Fixed a bug where the margin space was applied to the entire editor when using the tab key or indent key outside the table.
  • Fixed a bug where the list removal range was applied to all items in the list when the backspace key was pressed at the first end of the list.
  • Fixed a bug that was not recorded in history stack when using tab key.
  • Fixed a bug in the activation buttons.
  • Fixed a bug that removed blank lines when changing nodes after selecting all.
  • Fixed a bug to keydown event, node change.
  • The colorPicker module design has been modified.
  • The design of the resizing, link, table controllers has been modified.
  • The style of the Pre, blockquote tag has been modified.
  • Fixed an exception of browsers by setting scope directly in editor when using shortcutkey (CTRL + A).
  • Added removeItemAllParents, getElementDepth, isTable method of Util object.
  • Added color to title of the table.
  • Added isList and isListCell methods to Util object.
  • Modified the condition of format elements.
  • Modified correctly a regular expressions that can cause bugs.
  • Modified the util.convertHTMLForCodeView method.
  • Modified the core.detachRangeFormatElement, core.applyRangeFormatElement method.
  • Deleted getSelectedRangeFormatElements method of Util object.

v2.14.0 (05/04/2019)

  • modify: range format exit with enter
  • add: onChange function, button – disabled,

v2.13.1 (04/23/2019)

  • Updated undo and redo functions, which previously operated as “document.execCommand”.
  • Added getPositionIndex function to “util” object.
  • Fixed a bug “insertHTML” of user function.
  • Fixed a bug where format blocks, images and videos could not be deleted properly with backspace.
  • Modified the color and border radius of the editor.
  • Added “redo” and “undo” to buttons that are disabled in code view mode.
  • Added History object to “core” object for undo, redo.
  • Added onlyZeroWidthSpace function to “util” object.

v2.13.0 (04/22/2019)

  • Updated undo and redo functions, which previously operated as “document.execCommand”.
  • Added getPositionIndex function to “util” object.
  • Fixed a bug “insertHTML” of user function.
  • Modified the color and border radius of the editor.
  • Added “redo” and “undo” to buttons that are disabled in code view mode.
  • Added History object to “core” object for undo, redo.

v2.12.4 (04/17/2019)

  • Enhancement: The color picker module highlights the selected color.
  • Fixed a bug where the icon was not visible when adding custom buttons. customPlugin
  • Fixed a bug that did not resize the component’s cover when putting the description after resizing the image and video.

v2.12.3 (03/22/2019)

  • Fix a bug that the hex color input field of the colorPicker module was not working since version 2.9.4.
  • Fixed a bug where when using the dialog plugin after creating more than one editor, the results were applied to the editor that had the focus before.
  • Fixed Print did not work since version 2.8.3.
  • Fixed Inline, Balloon mode did not work properly since version 2.12.1.
  • Deleted the selected cell style in the table.
  • Added z-index to controllers

v2.12.0 (03/21/2019)

  • The language file has been modified to be added to the global object SUNEDITOR_LANG when used in HTML.
  • Added Chinese(zh_cn) translation.

v2.11.0 (03/19/2019)

  • Added youtubeQuery option – the query string of a YouTube embedded URL.

v2.11.0 (03/17/2019)

  • Added onImageUploadError event function – called when the image is upload failed.
  • Added argument imageInfo to onImageUpload function.
  • Added Japan translation.
  • Fixed a bug where the height value was fixed when adding the first image.

v2.10.2 (03/14/2019)

  • Fixed a bug where characters would disappear intermittently when changing nodes.
  • Added german translation.
  • Added save-button and ‘callBackSave’ option.
  • Added src property to ‘imagesInfo’.

v2.9.6 (02/07/2019)

  • fix: btn-group style, focus bug
  • Fixed a bug that the focus was not updated in the editor when submenu and dialog menus were used.

v2.9.5 (01/14/2019)

  • fix: font size display

v2.9.4 (12/14/2018)

  • fix: node change function

v2.9.3 (12/13/2018)

  • modify: balloon editor event
  • fix: dialog submit, modify: submenu, controller off

v2.9.2 (12/12/2018)

  • fix: strike shortcut key, balloon editor ctrl + a

v2.9.1 (12/11/2018)

  • fix: node change – checked multi styles

v2.9.0 (12/11/2018)

  • fix: window event exception handling

v2.8.5 (11/26/2018)

  • fix: nodeChange exception
  • delete: styleWithCss

v2.8.4 (11/22/2018)

  • bugfix

v2.8.3 (11/22/2018)

  • update

v2.8.2 (11/20/2018)

  • fix: figcaption contenteditable

v2.8.1 (11/15/2018)

  • fix: node change, clipboard data

v2.8.0 (11/11/2018)

  • fix: rotate caption

v2.7.0 (11/06/2018)

  • fix: pre tag overflow

v2.6.3 (11/05/2018)

  • fix: code view – textarea
  • fix: percent size
  • fix: code view – textarea

v2.6.1 (10/30/2018)

  • fix: code view button blur
  • add option – resizingBar

v2.5.3 (10/28/2018)

  • Bugfixes

v2.4.3 (10/25/2018)

  • modify: util – getOffset, defaultCommand -> commandHandler
  • fix: check description when editing image
  • modify: fullscreen icon

v2.4.2 (10/19/2018)

  • modify: button module, line break, button style
  • modify: indent function

v2.4.0 (10/18/2018)

  • added: resizing module – rotate
  • fix: default display
  • fix: editor object

v2.3.2 (10/16/2018)

  • fix: disabled, enabled, appendContents, setContents

v2.3.1 (10/11/2018)

  • fix: wrapToTags, appendContent, resizin, modify: preview, jshint

v2.3.0 (10/08/2018)

  • modify: arrow css

v2.2.7 (10/04/2018)

  • modify: button style, fix: contents style

v2.2.6 (10/02/2018)

  • fix: node change function – same node

v2.2.5 (10/02/2018)

  • fix: node change function

v2.2.4 (09/28/2018)

  • fix: image – xmlHttp, modify, loading box

v2.2.2 (09/27/2018)

  • fix: mobile event, submenu, callModule
  • fix: core – manage tags in delete operation
  • fix: getRange, image insert
  • fix: display option, tree shaking
  • update: dialog module split -> dialog, resizing
  • fix: Applied “getFormElement” to indent and node function
  • fix: codeView, modify: codeView css, convertContentsForEditor, user func
  • update: button disabled in codeView, added hr icon, modify: contents.css
  • fix: font css of edit area
  • update: table cell controller, modify: language, fonts, css
  • fix: a tag css
  • fix: wrapRangeToTag

v1.11.4 (08/31/2018)

  • fix: context – delete originElementDisplay, added navigation

v1.11.2 (08/29/2018)

  • delete: SUNEDITOR.destroy

v1.11.1 (08/29/2018)

  • fix: wrapRangeToTag function

v1.11.0 (08/28/2018)

  • update: label path (showPathLabel), User function : getContext; fix: when format tag deleted, format tag check

v1.10.4 (08/22/2018)

  • fix: horizontalRules menu, _findButtonEffectTag performance

v1.10.3 (08/22/2018)

  • fix: svg->web font, button effects, optimizations

v1.10.2 (08/17/2018)

  • fix: video module

v1.10.1 (08/17/2018)

  • fix: Firefox, Opera window.event

v1.10.0 (08/16/2018)

  • update: image, video module – resizing, revert, constrain proportions

v1.9.0 (08/12/2018)

  • added show blocks button

v1.8.2 (08/11/2018)

  • update: module box line break,
  • fix: preivew viewport

v1.7.2 (08/11/2018)

  • update: subscript, superscript

v1.6.2 (07/19/2018)

  • fix: link openDialog

v1.6.0 (07/16/2018)

  • update: added image resize controller – left

v1.4.0 (07/15/2018)

  • update: formats

v1.3.1 (07/14/2018)

  • fix: setContent, getContent, added _convertContentForEditor function
  • fix: css z-index

v1.3.0 (06/29/2018)

  • update: added image – Alternative Text

v1.2.4 (06/25/2018)

  • fix: creating paragraph tags

v1.2.3 (06/12/2018)

  • bugfix.

v1.2.0 (05/24/2018)

  • more functionalities added.

You Might Be Interested In:

Leave a Reply