Minimal WYSIWYG Editor In Pure JavaScript – Suneditor

Category: Recommended , Text | March 17, 2019
Author: JiHong88
Views Total: 3,180
Official Page: Go to website
Last Update: March 17, 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
  ] 

  // language object
  lang: {},

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

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

  // image file input
  imageFileInput: undefined,

  // image url input
  imageUrlInput: undefined,

  // image size
  imageSize: '350px',

  // image upload url
  imageUploadUrl: 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: ''

  // show/hide toolbar icons
  buttonList: [
    ['undo', 'redo'],
    ['font', 'fontSize', 'formats'],
    ['bold', 'underline', 'italic', 'strike', 'removeFormat'],
    ['fontColor', 'hiliteColor'],
    ['indent', 'outdent'],
    ['align', 'line', 'list', 'table'],
    ['link', 'image', 'video'],
    ['fullScreen', 'codeView'],
    ['preview', 'print']
  ]
  
})

API methods:

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

// Copies the contents of the suneditor into a [textarea]
suneditor.save();

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

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

// 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');

// 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();

Changelog:

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