Minimal WYSIWYG Editor In Pure JavaScript – Suneditor

Category: Recommended , Text | August 16, 2018
Author: JiHong88
Views Total: 1,416
Official Page: Go to website
Last Update: August 16, 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:

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