Minimal WYSIWYG Editor In Pure JavaScript – Suneditor

Category: Recommended , Text | October 21, 2018
Author: JiHong88
Views Total: 2,147
Official Page: Go to website
Last Update: October 21, 2018
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', {

  // new CSS font properties
  addFont: null,

  // width/heigh of the video
  videoX: 560,
  videoY: 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: 100%,
  width: 100%,

  // font list
  fontList: null,
  
  // font size list
  fontSizeList: null,

  // 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] */
function sun_save() {
    suneditor.save();
    document.getElementById('frm').submit();
};

/** Gets the contents of the suneditor */
function sun_getContent() {
    var content = suneditor.getContent();
    alert(content);
};

/** Change the contents of the suneditor */
function sun_setContent(content) {
    suneditor.setContent(content);
};

/** Add content to the suneditor */
function sun_appendContent(content) {
    suneditor.appendContent(content);
};

/** Disable the suneditor */
function sun_disabled() {
    suneditor.disabled();
};

/** Enabled the suneditor */
function sun_enabled() {
    suneditor.enabled();
};

/** Hide the suneditor */
function sun_hide() {
    suneditor.hide();
};

/** Show the suneditor */
function sun_show() {
    suneditor.show();
};

Changelog:

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.

Leave a Reply