Minimal WYSIWYG Editor In Pure JavaScript – Suneditor

Category: Recommended , Text | May 11, 2021
Author: JiHong88
Views Total: 115 views
Official Page: Go to website
Last Update: May 11, 2021
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: [
    math, // You must add the 'katex' library at options to use the 'math' plugin.

  // set the initial value
  value: '',

  // default tag name of the editor.
  defaultTag: 'p',

  // When recording the history stack, this is the delay time(miliseconds) since the last input
  historyStackDelayTime: 400,

  // Add tags to the default tags whitelist of editor.
  // _defaultTagsWhitelist : 'br|p|div|pre|blockquote|h[1-6]|ol|ul|li|hr|figure|figcaption|img|iframe|audio|video|table|thead|tbody|tr|th|td|a|b|strong|var|i|em|u|ins|s|span|strike|del|sub|sup'
  addTagsWhitelist: '',

  // Whitelist of tags when pasting. 
  // _editorTagsWhitelist  : _defaultTagsWhitelist + addTagsWhitelist
  // ex) 'p|h[1-6]'
  pasteTagsWhitelist: _editorTagsWhitelist,

  // Blacklist of the editor default tags. 
  // e.g. 'h1|h2' 
  tagsBlacklist: null,

  //  Blacklist of tags when pasting. 
  // e.g. 'h1|h2' 
  pasteTagsBlacklist: null,

  // Add attributes whitelist of tags that should be kept undeleted from the editor.
  // -- Fixed whitelist --
  // Native attributes: 'contenteditable|colspan|rowspan|target|href|src|class|type'
  // Editor attributes: 'data-format|data-size|data-file-size|data-file-name|data-origin|data-align|data-image-link|data-rotate|data-proportion|data-percentage|origin-size'
  // ex) {
  //  'all': 'style', // Apply to all tags
  //  'input': 'checked' // Apply to input tag
  // }              
  attributesWhitelist: '',

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

  // change the tag of the default text button. 
  textTags: { bold: 'STRONG', underline: 'U', italic: 'EM', strike: 'DEL' },

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

  // null || 'char' || 'byte' || 'byte-html'
  charCounterType: 'char',

  // text to be displayed in the "charCounter" area of the bottom bar
  charCounterLabel: null,

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

  // if true, multiple images can be selected.
  imageMultipleFile: false,

  // allowed extensions like '.jpg, .png ..'
  imageAccept: "*",

  // The url of the image gallery, if you use the image gallery.
  // When "imageUrlInput" is true, an image gallery button is created in the image modal.
  // You can also use it by adding 'imageGallery' to the button list.
  imageGalleryUrl: null,

  // Http Header when get image gallery. 
  imageGalleryHeader: null,

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

  // if true, the editor is set to RTL(Right To Left) mode.
  rtl: false,

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

  // 'cell', 'top'
  tableCellControllerPosition: 'cell',

  // if true, disables the interaction of the editor and tab key.
  tabDisable: false,

  // You can disable shortcuts.
  // e.g. ['bold', 'strike', 'underline', 'italic', 'undo', 'indent']
  shortcutsDisable: [],
  // If false, hide the shortcuts hint.
  shortcutsHint: true,

  // A custom HTML selector placing the toolbar inside.
  toolbarContainer: null,

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

  // top offset value of "full Screen"
  fullScreenOffset: '',

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

  // e.g. <h1>Preview Template</h1> {{contents}} <div>_Footer_</div>
  previewTemplate: null,

  // A template of the "print".
  // The {{contents}} part in the HTML string is replaced with the contents of the editor.
  // e.g. "<div style='width:auto; max-width:1080px; margin:auto;'><h1>Print Template</h1> {{contents}} <div>_Footer_</div></div>"
  printTemplate: null,

  // CodeMirror option object
  codeMirror: null,

  // katex options
  katex: null,

  // Math plugin font size list.
  mathFontSize: [
    {text: '1', value: '1em', default: true},
    {text: '1.5', value: '1.5em'},
    {text: '2', value: '2em'},
    {text: '2.5', value: '2.5em'}

  // 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/height of the video
  videoWidth: 560,
  videoHeight: '56.25%',

  // If true, video size can only be scaled by percentage.
  videoSizeOnlyPercentage: false,

  // Choose whether to video rotation buttons display.
  videoRotation: false,

  // The default aspect ratio of the video.
  videoRatio: 0.5625,

  // Video ratio selection options.
  videoRatioList:  [ {name: 'Classic Film 3:2', value: 0.6666}, {name: 'HD', value: 0.5625} ],

  // Choose whether the video height input is visible.
  videoHeightShow: true,

  // Choose whether the video ratio options is visible.
  videoRatioShow: true,

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

  // whether to create a file input tag in the video upload window.
  videoFileInput: false,

  // whether to create a video url input tag in the video upload window.
  // if the value of videoFileInput is false, it will be unconditionally.
  videoUrlInput: true,

  // Http Header when uploading videos.  
  videoUploadHeader: null,

  // the video upload to server mapping address.
  videoUploadUrl: null,

  // the size of the total uploadable videos (in bytes).
  videoUploadSizeLimit:  null,

  // if true, multiple videos can be selected. 
  videoMultipleFile:  false,

  // define "Attributes" of the video tag.
  videoTagAttrs: null,

  // define "Attributes" of the iframe tag
  videoIframeAttrs: null,

  // allowed extensions like '.mp4, .avi ..'
  videoAccept: "*",

  // default width of the audio frame.  
  audioWidth: '300px',

  // default height of the audio frame. 
  audioHeight: default,

  // whether to create a file input tag in the audio upload window
  audioFileInput: false,

  // whether to create a audio url input tag in the audio upload window.
  audioUrlInput: true,

  // Http Header when uploading audios. 
  audioUploadHeader: null,

  // upload url
  audioUploadUrl: null,

  // the size of the total uploadable audios (in bytes).
  // invokes the "onAudioUploadError" method.
  audioUploadSizeLimit: null,

  // if true, multiple audios can be selected.
  audioMultipleFile: false,

  // define "Attributes" of the audio tag.  
  audioTagAttrs: null,

  // allowed extensions like '.mp3, .wav ..'
  audioAccept: "*",

  // default protocol for the links. ('link', 'image', 'video', 'audio')
  linkProtocol: null,

  // the placeholder text.  
  placeholder: null,

  // Activate the media[image, video, audio] selection status immediately after inserting the media tag.
  mediaAutoSelect: true,

  // custom icons
  // {
  //   bold: 'B',
  //   table: '',
  //   insert_row_above: ''
  // }
  icons: null,

  // defines "rel" attribute list of anchor tag
  // e.g. ['author', 'external', 'nofollow']
  linkRel: [],

  // defines default "rel" attributes of anchor tag.
  // e.g.
  // {
  //   default: 'nofollow', // Default rel
  //   check_new_window: 'noreferrer noopener', // When "open new window" is checked 
  //   check_bookmark: 'bookmark' // When "bookmark" is checked 
  // },
  linkRelDefault: {},

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

  // enables image resizing
  imageResizing: true,

  // image width/height
  imageWidth: 'auto',
  imageHeight: 'auto',

  // If true, image size can only be scaled by percentage
  imageSizeOnlyPercentage: true,

  // Choose whether the image height input is visible.
  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'],
    ['paragraphStyle', 'blockquote'],
    ['bold', 'underline', 'italic', 'strike', 'subscript', 'superscript'],
    ['fontColor', 'hiliteColor', 'textStyle'],
    '/', // Line break
    ['outdent', 'indent'],
    ['align', 'horizontalRule', 'list', 'lineHeight'],
    ['table', 'link', 'image', 'video', 'audio' /** ,'math' */], // You must add the 'katex' library at options to use the 'math' plugin.
    /** ['imageGallery'] */ // You must add the "imageGalleryUrl".
    ['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) }

editor.onInput = function (e, core) { console.log('onInput', 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.onFocus = function (e, core) { console.log('onFocus', e) }

editor.onBlur = function (e, core) { console.log('onBlur', e) }

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

editor.onCopy = function (e, clipboardData, core) { console.log('onCopy', e) }

editor.onCut = function (e, clipboardData, core) { console.log('onCut', e) }

// Called before the image is uploaded
// If false is returned, no image upload is performed.
 * files: Files array
 * info: Input information
 * core: Core object
 * return {Boolean}
editor.onImageUploadBefore: function (files, info, core) {
    console.log('files', files);
    console.log('info', info);
    return Boolean

// It replaces the default callback function of the image upload
 * response: Response object
 * info (Input information): {
 * - linkValue: Link url value
 * - linkNewWindow: Open in new window Check Value
 * - inputWidth: Value of width input
 * - inputHeight: Value of height input
 * - align: Align Check Value
 * - isUpdate: Update image if true, create image if false
 * - currentImage: If isUpdate is true, the currently selected image.
 * }
 * core: Core object
editor.imageUploadHandler = function (response, info, core) {
    // Example of upload method
    const res = JSON.parse(response.responseText);
    // Error
    if (res.errorMessage) {
        if (typeof editor.onImageUploadError === 'function') {
            if (core.onImageUploadError(res.errorMessage, res.result)) {
      , res.errorMessage);
        } else {
  , res.errorMessage);
         * You can do the same thing using the core private function.
         * The core._imageUploadError function returns false when "editor.onImageUploadError" function is not defined.
        // if (core._imageUploadError(res.errorMessage, res.result)) {
        //, res.errorMessage);
        // }
    // Success
    else {
        const fileList = res.result;
        const imagePlugin = core.plugins.image;

        for (let i = 0, len = fileList.length, file; i < len; i++) {
            // The file object must have name and size attributes.
            file = {name: fileList[i].name, size: fileList[i].size};
            // For existing image updates, the "info" attributes are predefined in the element.
            // The "imagePlugin.update_src" function is only changes the "src" attribute of an image.
            if (info.isUpdate), fileList[i].url, info.currentImage, file);
            // The image is created and a format element(p, div..) is added below it.
            else, fileList[i].url, info.linkValue, info.linkNewWindow, info.inputWidth, info.inputHeight, info.align, file);

// An event when toggling between code view and wysiwyg view.
 * isCodeView: Whether the current code view mode
 * core: Core object
editor.toggleCodeView = function (isCodeView, core) {
  console.log('isCodeView', isCodeView);

// An event when toggling full screen.
 * isFullScreen: Whether the current full screen mode
 * core: Core object
editor.toggleFullScreen = function (isFullScreen, core) {
  console.log('isFullScreen', isFullScreen);

// Called when the video(iframe) is is uploaded, updated, deleted
* targetElement: Current iframe element
* index: Uploaded index
* state: Upload status ('create', 'update', 'delete')
* videoInfo: {
* - index: data index
* - select: select function
* - delete: delete function
* - element: iframe element
* - src: src attribute of iframe tag
* }
* remainingFilesCount: Count of remaining files to upload (0 when added as a url)
* core: Core object
editor.onVideoUpload = function (targetElement, index, state, videoInfo, remainingFilesCount, core) {
  console.log(`targetElement:${targetElement}, index:${index}, state('create', 'update', 'delete'):${state}`)
  console.log(`videoInfo:${videoInfo}, remainingFilesCount:${remainingFilesCount}`)

// 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.38.10 (05/11/2021)

  • “Font” and “Size” have been modified to display default values.
  • Fixed a bug where the text style was not maintained when entering the enter key at the end of the text.

v2.38.8 (05/07/2021)

  • Fixed a bug where line breaks disappear when pasting.

v2.38.7 (05/06/2021)

  • When pasting an external image or video, a bug that sometimes the element was not properly added has been fixed.
  • Fixed a bug in which the default action was not canceled even when returning false in the user event.

v2.38.6 (05/04/2021)

  • The user event location has been modified so that the current event action can be canceled by a user event.

v2.38.5 (04/28/2021)

  • Fixed a bug where the other text style was not removed when the font-size style was applied.

v2.38.4 (04/28/2021)

  • Fixed a bug that core.insertNode() is creates a new line when inserted in the middle of the string has been confirmed.
  • Fixed a bug that TypeScript build fails.
  • Fixed a bug where the default color of the font was not applied properly.

v2.38.4 (04/17/2021)

  • The addTagsWhitelist option has been updated to support tags with a dash(-) in the name.

v2.38.3 (04/16/2021)

  • When pasting an external image or video, a bug that sometimes the element was not properly added has been fixed
  • XSS attack vulnerability fixes.

v2.38.1 (04/11/2021)

  • The “z-index” and “position” properties of options.defaultStyle have been modified to be applied to the top div.
  • Fiexed a bug where KaTeX rendering was broken, since 2.37.4 version.

v2.38.0 (04/11/2021)

  • Added printTemplate option
  • Adapt module export for Typescript 2.6
  • Updated Typescript definitions
  • Modified the anchor module to can use the “tel:” and “sms:”
  • Fiexed “Request-Headers” error at the ImageGallery
  • Added media component exception handling
  • Fixed a bug where tag would render when pasting text containing HTML tags
  • Fixed a bug that focusing on the editor when using the core.setContents() method

v2.37.4 (04/01/2021)

  • XSS attack vulnerability fixes

v2.37.3 (03/30/2021)

  • Fixed a bug in which the attribute values of the tag were converted not conforming to the HTML syntax.
  • Fixed a bug that focused on the editor when using the core.setContents() method.

v2.37.2 (03/29/2021)

  • Fixed a bug losing line break and attr when pasted.
  • Modified list alignment default style to “outside”.

v2.37.1 (03/19/2021)

  • Fixed IE syntax error.
  • Fixed a bug where the super/subscript toggle did not work after updated v.2.35.0.

v2.37.0 (03/17/2021)

  • It has been improved to be able to select an internal header tag when entering a bookmark in the anchor module.
  • Added more options
  • Fixed bugs

v2.36.5 (03/05/2021)

  • Added _printClass option to define the class of print and preview.
  • Fixed a bug in which changing the lang option did not work with the setOptions() method.
  • Fixed a bug in which activation/deactivation of the indent icon did not work properly.
  • Fixed a bug when adding components such as images and videos from the horizontal line, a bug that was added at the wrong location.
  • Katex has been modified to always operate in LTR mode.

v2.36.4 (02/21/2021)

  • Fixed a bug where the link of the image disappeared when returning to the WYSIWYG mode from the code view mode
  • Fixed a bug in which the size of the rotated image or video was not properly adjusted
  • When enviroment “shadowRoot”, the location error of the toolbar and menu has been fixed

v2.36.3 (02/19/2021)

  • Fixed a bug in which the size of the rotated image or video was not properly adjusted.

v2.36.2 (02/18/2021)

  • Bugfix
  • Hebrew (he) translation added
  • Italian(it) translation fixed

v2.36.1 (02/01/2021)

  • Fixed a bug in which buttons that were disabled when selecting a component were reactivated.
  • Fixed a bug where the current color was not displayed on the input of the color selector.

v2.36.0 (01/29/2021)

  • Modified to can use the use of “mailto:” at the link module.
  • linkRelDefault option has been added.
  • mediaAutoSelect option has been added.
  • A “download link” check box was added to the link module.
  • The link module`s “rel” option has been modified to enable duplicate selection.
  • The protocol display of the link module has been improved.
  • Bugfix

v2.35.1 (01/22/2021)

  • Fixed a bug where table cell split did not work.
  • Fixed a bug in which content was pasted as an image when pasting from MS Word and Excel.

v2.35.0 (01/19/2021)

  • Swedish (se) translation added.
  • Ukrainian (ua) translation added.
  • You can enter “nonbreaking space character”. Windows: Ctrl + Shift + Space. Mac: Option(⌥) + Shift + Space
  • The textTags option has been added.
  • A bookmark button has been added to the link plugin.
  • The linkRel option has been added.
  • The fullScreenOffset option has been added.
  • Added setIframeContents, blur method to the core.
  • Empty array values are allowed in the buttonList.
  • Save button shortcut has been added.
  • “dir” argument has been added to the core.isEdgePoint method.
  • Removed the core.eventStop method.
  • Added options property to the core.
  • Bugfix

v2.34.3 (11/12/2020)

  • When switching from the “code view mode” or when using core.setContents or core.appendContens(), a bug in which HTML classes etc. disappeared has been fixed.
  • A bug in which the tag related whitelist option was not properly applied has been fixed.

v2.34.3 (11/12/2020)

  • Added defaultTag option
  • When Nullish value is given as an argument of core.setContents(), the default tag is also removed
  • Fixed an XSS attack vulnerability
  • Bugs fixed

v2.34.2 (11/11/2020)

  • fix: whitelist

v2.34.1 (10/31/2020)

  • Modified so that the toolbarContainer option can be used in balloon mode
  • Shortcuts text of tooltip have been modified to make them more visible
  • Modified so that the same buttonList object can be used in two or more editors
  • Bugfix

v2.34.0 (10/18/2020)

  • Added rtl(Right to Left) option
  • Added previewTemplate option was added
  • Modified to allow other 200 range success responses when uploading files
  • Paste and drop event parameters have been modified
  • Bugfix

v2.33.3 (09/18/2020)

  • Hotfix

v2.33.2 (09/16/2020)

  • Bugs fixed

v2.33.1 (09/06/2020)

  • Bugs fixed

v2.33.0 (09/04/2020)

  • Added more translations and options.
  • Enhancement and bugfix.

v2.32.1 (07/23/2020)

  • A bug that the onload event was not worked has been fixed.

v2.32.1 (07/23/2020)

  • A bug that the onload event was not worked has been fixed.

v2.31.2 (07/20/2020)

  • Added audioTagAttrs, videoTagAttrs, and videoIframeAttrs options
  • Added onCopy and onCut events
  • Added Copy(ctrl+c) and cut(ctrl+x) event of components such as images, video, and audio

v2.31.2 (07/15/2020)

  • Added Vimeo as a target for video URLs.
  • Updated to be able to register immediately using “uploadHandler” after upload is completed in “on[Image,Video,Audio]BeforeUpload”.
  • Fixed a bug where options.icons were not applied when using the responsive toolbar.

v2.31.1 (07/12/2020)

  • Fixed (re)Init Error

v2.31.0 (07/05/2020)

  • Added ‘value’ option
  • Fixed a bug where multiple images were not inserted when using “base64” encoding
  • Fixed a bug that lose focus on the editor after deleting the component when there were only components in the editor

v2.30.7 (07/01/2020)

  • fix: set defaultStyle

v2.30.6 (06/26/2020)

  • In the “on[Image,Video,Audio]uploadBefore” function, instead of executing the default “uploadHandler”, the image can be registered by calling the “register” method that receives the “response” object as an argument value.
  • Fixed a bug where the focus was on the image caption when selecting an image in Chrome.

v2.30.5 (06/25/2020)

  • Added closureRangeFormat format
  • Bugs fixed

v2.30.4 (06/21/2020)

  • Fixed a bug that image inserted was not worked when using imageGallery in the image modal.
  • Modified the button’s active class to disappear after the blur event.

v2.30.1 (06/19/2020)

  • Added Polish (pl) translation
  • Added linkProtocol option
  • Added “uploadHandler” argument to the [image,video,audio]UploadBefore event.
  • Added [image,video,audio]UploadMultiple option
  • Added closureFreeFormat format and options
  • Updated to allow drag and drop in the editor (Not working in IE)
  • Lots of bugs fixed

v2.30.0 (06/10/2020)

  • Added Romanian (ro) translation
  • Added image gallery
  • Updated buttonList feature
  • Added more options
  • Added toggleCodeView and toggleFullScreen events
  • Inhancenment and bugfixes

v2.29.0 (05/07/2020)

  • Bugs fixed

v2.28.4 (04/08/2020)

  • A fixed column width button has been added to the table editing controller.
  • A onVideoUpload event and getVideosInfo function has been added.
  • Bugfixes.

v2.28.3 (04/05/2020)

  • d.ts files have been added so that the editor can support TypeScript.
  • Modified the z-index of the controller to be higher than the toolbar.
  • Bugs fixed

v2.28.2 (04/04/2020)

  • Fixed a bug with text nodes disappearing when changing text style in nested lists.
  • Improved the display location of the balloon-toolbar and submenu when there is not enough space on the page.
  • Fixed a bug that sometimes the focus did not move to the end depending on the type of the inserted node in the functions.insertHTML method.

v2.28.1 (04/02/2020)

  • Added line breaker to add lines when there are no lines above or below the component.
  • The underline has been replaced from <ins> to <u>.
  • Added options imageHeight and videoHeight.
  • Added type the “byte-html” to the charCounterType option.
  • Improve the consistency check before rendering the HTML in the editor.
  • The method of adding of the custom plugin has been improved.
  • Bugfix

v2.28.0 (03/22/2020)

  • Added icons, charCounterType, and charCounterLabel options
  • Added onInput event
  • Bugs fixed

v2.27.1 (03/21/2020)

  • Bugs fixed

v2.27.0 (03/20/2020)

  • Bugs fixed

v2.26.0 (03/11/2020)

  • Added balloon-always mode.
  • Added a math plugin that uses the “KaTeX” library.
  • The katex option added.
  • Added nested lists feature.
  • Added a blockquote command plugin.
  • The method of adding a custom formatBlock and the class name have been modified. (“freeFormat” added)
  • The pre(code) tag format has been modified to match that of other editor. (Like Froala editor)
  • The formatBlock has been modified so that the name of the format menu is displayed instead of the tag.
  • The toolbar no longer appears when the focus is on a table when in balloon mode.
  • Added onBlur and onFocus events.
  • Added addTagsWhitelist, pasteTagsWhitelist and attributesWhitelist options to possible edit the whitelist in the editor.
  • Added onImageUploadBefore and imageUploadHandler functions.
  • The “core” object has been added to the arguments of events and functions.
  • Added functions and hasFocus to the “core” object.

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:

3 thoughts on “Minimal WYSIWYG Editor In Pure JavaScript – Suneditor

  1. Zack

    how do you make this work? I tried to download from github, looks nothing like this…


Leave a Reply