Minimal Clean WYSIWYG Editor In Pure JavaScript – v2editor.js

v2editor.js is a simple yet customizable JavaScript library used to create a minimal clean WYSIWYG rich text editor on your web application.

How to use it:

Import the v2editor’s JavaScript and CSS files into the webpage.

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

Create a placeholder element for the editor.

<div id="MainEditor"></div>

Initialize the editor with just one line JavaScript.

window.initEditor = function () {
  window.mainEditor = new Editor('MainEditor', {});
};

Possible configuration options.

window.initEditor = function () {
  window.mainEditor = new Editor('MainEditor', {
    /**
     * Option merge strategies (used in core/util/options)
     */
    optionMergeStrategies: Object.create(null),
    /**
     * Whether to suppress warnings.
     */
    silent: false,
    /**
     * Show production mode tip message on boot?
     */
    productionTip: "development" !== 'production',
    /**
     * Whether to enable devtools
     */
    devtools: "development" !== 'production',
    /**
     * Whether to record perf
     */
    performance: false,
    /**
     * Error handler for watcher errors
     */
    errorHandler: null,
    /**
     * Ignore certain custom elements
     */
    ignoredElements: [],
    /**
     * Custom user key aliases for v-on
     */
    keyCodes: Object.create(null),
    /**
     * Check if a tag is reserved so that it cannot be registered as a
     * component. This is platform-dependent and may be overwritten.
     */
    isReservedTag: no,
    /**
     * Check if a tag is an unknown element.
     * Platform-dependent.
     */
    isUnknownElement: no,
    /**
     * Get the namespace of an element
     */
    getTagNamespace: noop,
    /**
     * Parse the real tag name for the specific platform.
     */
    parsePlatformTagName: identity,
    /**
     * Check if an attribute must be bound using property, e.g. value
     * Platform-dependent.
     */
    mustUseProp: no,
    /**
     * List of asset types that a component can own.
     */
    _assetTypes: [
      'component',
      'directive',
      'filter'
    ],
    /**
     * List of lifecycle hooks.
     */
    _lifecycleHooks: [
      'beforeCreate',
      'created',
      'beforeMount',
      'mounted',
      'beforeUpdate',
      'updated',
      'beforeDestroy',
      'destroyed',
      'activated',
      'deactivated'
    ],
    /**
     * Max circular updates allowed in a scheduler flush cycle.
     */
    _maxUpdateCount: 100
  });
};