Minimal WYSIWYG Editor In Pure JavaScript – Suneditor

Category: Recommended , Text | August 8, 2019
Author: JiHong88
Views Total: 3,948
Official Page: Go to website
Last Update: August 8, 2019
License: MIT

Preview:

Minimal WYSIWYG Editor In Pure JavaScript – Suneditor

Description:

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.

SUNEDITOR.create('editor');

All default options to customize the WYSIWYG editor.

SUNEDITOR.create('editor', {

  // plugins to load
  plugins: [
    font,
    fontSize,
    formatBlock,
    fontColor,
    hiliteColor,
    align,
    horizontalRule,
    list,
    table,
    link,
    image,
    video,
    template
  ] 

  // 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,

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

  // Font Family array
  font: null,

  // Font Size array
  fontSize: null,

  // Enables video resizing
  videoResizing: true,

  // width/heigh of the video
  videoWidth: 560,
  videoHeight: 315,

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

  // enables image resizing
  imageResizing: true,

  // image width
  imageWidth: 'auto',

  // 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,

  // Default color array of color picker
  colorList: null,

  // 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'],
    // '/', Line break
    // ['fontColor', 'hiliteColor'],
    ['outdent', 'indent'],
    // ['align', 'horizontalRule', 'list', 'table'],
    // ['link', 'image', 'video'],
    ['fullScreen', 'showBlocks', 'codeView'],
    ['preview', 'print'],
    // ['save'],
  ]

  // 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]
suneditor.save();

// Updates options
suneditor.setOptions(OPTIONS);

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

// Gets the contents of the suneditor
suneditor.getContents();

// 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="http://suneditor.com/sample/img/sunset.jpg">');

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

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

// Upload images using image plugin
editor.insertImage(FileList);

// Disable the suneditor
suneditor.disabled();

// Enabled the suneditor
suneditor.enabled();

// Hide the suneditor
suneditor.hide();

// Show the suneditor
suneditor.show();
    
// Destroy the suneditor
suneditor.destroy();

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

// Close a notice area
suneditor.noticeClose();

// 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
 * }
 **/
suneditor.getImagesInfo();

Event functions.

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) }

// 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)
  console.log(imageInfo)
}

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

Changelog:

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