Pure Javascript WYSIWYG Rich Text Editor | KothingEditor

How to make use of it:

1. Install & download the Kothing-Editor.

# NPM
$ npm install kothing-editor --save

2. Import the stylesheet and modules of your selection within the project.

import 'keditor/build/css/keditor.min.css'

import keditor from 'keditor'
import plugins from 'keditor/src/plugins'
import lang from 'keditor/src/lang'

3. Or instantly load the bundled JavaScript within the doc.

<link href="./build/css/keditor.min.css" rel="stylesheet" />
<script src="./build/keditor.min.js"></script>

4. Attach the editor to a text area and completed it.

<textarea id="example">
</textarea>

const keditor = KEDITOR.create((document.getElementById('example')),{
      // options here
});

5. All default editor choices.

const keditor = KEDITOR.create((document.getElementById('example')),{

      // language
      lang: 'en',

      'classic', 'inline', 'balloon'
      mode: 'classic',

      // width of the toolbar
      // Number|String
      toolbarWidth: 'auto',

      // stick the toolbar to the top
      // Number|String|Boolean
      stickyToolbar: 0,

      // place content in the iframe
      iframe: false,
      iframeCSSFileName: 'keditor',

      // allows HTML, HEAD, BODY tags and DOCTYPE declaration
      fullPage: false,

      // codeMirror options
      codeMirror: {}

      // the position property of keditor
      position: null,

      // the display property of keditor
      display: 'block', 

      // the size of background for the dialog window
      // 'full'||'local'
      popupDisplay: 'full',

      // show the resize bar
      resizingBar: true,

      // show the node path
      showPathLabel: true,

      // show the character conouter
      charCounter: false,

      // limit the number of characters to type
      // Number
      maxCharCount: null,

      // size options
      width: '100%',
      minWidth: null,
      maxWidth: null,
      height: 'auto',
      minHeight: null,
      maxHeight: null,

      // font family
      font: [
        'Arial', 'Comic Sans MS', 'Courier New', 'Impact',
        'Georgia','tahoma', 'Trebuchet MS', 'Verdana'
      ],

      // font size
      fontSize: [
        8, 9, 10, 11, 12, 14, 16, 18, 20, 22, 24, 26, 28, 36, 48, 72
      ],

      // formats
      formats: [
        'p', 'div', 'blockquote', 'pre', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'
      ],

      // color list
      colorList: [
        '#ff0000', '#ff5e00', '#ffe400', '#abf200', '#00d8ff', '#0055ff', '#6600ff', '#ff00dd', '#000000',
        '#ffd8d8', '#fae0d4', '#faf4c0', '#e4f7ba', '#d4f4fa', '#d9e5ff', '#e8d9ff', '#ffd9fa', '#f1f1f1',
        '#ffa7a7', '#ffc19e', '#faed7d', '#cef279', '#b2ebf4', '#b2ccff', '#d1b2ff', '#ffb2f5', '#bdbdbd',
        '#f15f5f', '#f29661', '#e5d85c', '#bce55c', '#5cd1e5', '#6699ff', '#a366ff', '#f261df', '#8c8c8c',
        '#980000', '#993800', '#998a00', '#6b9900', '#008299', '#003399', '#3d0099', '#990085', '#353535',
        '#670000', '#662500', '#665c00', '#476600', '#005766', '#002266', '#290066', '#660058', '#222222'
      ],

      // allows to resize the image
      imageResizing: true,

      // image width
      imageWidth: 'auto',

      // create a file inputin the image upload window
      imageFileInput: true,

      // create a image url input tag in the image upload window
      imageUrlInput: true,

      // HTTP header
      imageUploadHeader: null,

      // upload URL
      imageUploadUrl: null,

      // limit the image size
      imageUploadSizeLimit: null,

      // allows to resize the video
      videoResizing: true,

      // video size
      videoWidth: 560,
      videoHeight: 315,

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

      // fired when the save button is clicked
      callBackSave: userFunction.save,

      // Templates
      templates: null,

      // add/remove buttons here
      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', 'template'],
      ]
});

6. API strategies.

// update options
editor.setOptions({
  // options here
});

// open a notice
editor.noticeOpen('test notice');

// close a notice
editor.noticeClose();

// save the content
editor.save();

// get the context object
editor.getContext();

// gets the content of the keditor
editor.getContents();

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

// upload images
editor.insertImage(FileList);

// insert HTML content
editor.insertHTML('<img src=" ">');

// set content
editor.setContents('set contents');

// append new contnet
editor.appendContents('append contents');

// disable the keditor
editor.disabled();

// enable the keditor
editor.enabled();

// hide the keditor
editor.hide();

// show the keditor
editor.show();
    
// destroy the keditor
editor.destroy();

7. Event handlers.

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

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

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

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

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

editor.onChange = function (contents) { console.log('onChange', contents) }

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

// fired when the image is uploaded or the uploaded image is deleted.
/**
 * targetImgElement: Current img element
 * index: Uploaded index (key value)
 * state: Upload status ('create', 'update', 'delete')
 * imageInfo: {
 * * index: data index
 * * name: file name
 * * size: file size
 * * select: select function
 * * delete: delete function
 * }
 * remainingFilesCount: Count of remaining image files
*/
editor.onImageUpload = function (targetImgElement, index, state, imageInfo, remainingFilesCount) {
    console.log(`targetImgElement:${targetImgElement}, index:${index}, state('create', 'update', 'delete'):${state}`)
    console.log(`imageInfo:${imageInfo}, remainingFilesCount:${remainingFilesCount}`)
}

editor.onImageUploadError = function (errorMessage, result) {
  alert(errorMessage)
}

editor.showInline = function (toolbar, context) {
    console.log('toolbar', toolbar);
    console.log('context', context);
}

How to Create a WYSIWYG Rich Text Editor, Smart WYSIWYG HTML editor, simple javascript HTML editor

Changelog:

09/02/2020

See Demo And Download