README

ec.vcms

Lightweight Angular WYSIWYG editor based on JSON data structure. By entrecode.

Basics

This project contains a lightweight WYSIWYG editor based on JSON data structure for usage in angularJS projects.

Getting started

Install the package:

npm i ec.vcms --save

Add the ec.vcms module to your angular app:

angular.module('demoapp', ['ec.vcms'])

Add the ec-vcms directive to your template. The directive binds the parsed JSON with the variable passed in the json attribute.

<ec-vcms json="mydata"></ec-vcms>

Advanced options

Preset Content

You can simply wrap the content you want with the ec-vcms component since transclution is supported:

<ec-vcms json="mydata">
  <h1 style="text-align: center;">TEST</h1>
  <p><b style="color: red;">BOLD</b></p>
  <p><i>ITALIC</i></p>
  <img src="https://unsplash.it/200/200">
  <p>
    <small>tolles Bild</small>
  </p>
</ec-vcms>

Config

You can pass your individual config to the ec-vcms directive via the config attribute:

<ec-vcms json="mydata" config="config"></ec-vcms>

The config object looks like:

{
  colors: ['#000000', 'orange', '#FFF', 'rgba(231,212,231,.4)'],
  tags: ['h1', 'h2', 'p'],
  synonyms: {
    h1: 'Headline 1',
    h2: 'Headline 2',
    p: 'Absatz',
  },
  custom: [{
    title: 'Violet',
    preview: '<div style="color: violet;">Violet</div>',
    command: (current, e) => {
      const el = document.createElement('div');
      el.appendChild(document.createTextNode('Violet'));
      el.setAttribute('style', 'color: violet;');
      current.after(el);
    },
  }, {
    title: 'Button',
    preview: '<a class="btn">Button Label</a>',
    command: (current, e) => {
      current.after(angular.element('<a class="btn">Button Label</a>')[0]);
    },
  }],
  toolbar: [
    ['tags'],
    ['bold', 'italic', 'link', 'align', 'size'],
    ['list', 'custom'],
    ['colors'],
    ['reset'],
    ['undo', 'redo', 'html'],
  ],
}

The following config parameters are supported:

colors An array of color values supported by CSS
tags An array of html tags. These tags will be available to format the selected element
synonyms Labels for the the tags
custom A collection of custom commands available via the toolbar element "custom"
presets A collection of style presets available via the toolbar element "presets"
toolbar A multidimensional array of elements which are shown in the toolbar.

The following toolbar elements are supported:

tags List of Tags set in the tags config param to format the selected element
bold Button to toggle font weight
italic Button to toggle italic
link Button to add or edit a link
align Button to set alignment
size Button to change font size
list Submenu with unordered and ordered list
image Button to add an image via pop
custom List of custom commands set in the custom config param to format the selected element or add a new one
colors Dropdown with colors set in the colors config param and hex input
presets List of custom style presets set in the presets config param to format the selected element
reset Button to reset style of the selected element
undo Undo button - important: adding elements and custom commands are currently not supported
redo Redo button - important: adding elements and custom commands are currently not supported
html Button to toggle html mode

Future toolbar elements:

icon
blockquote

The default config is:

{
  colors: ['#EE4266', '#2A1E5C', '#0A0F0D', '#C4CBCA', '#3CBBB1'],
  tags: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p'],
  synonyms: {
    h1: 'Headline 1',
    h2: 'Headline 2',
    h3: 'Headline 3',
    h4: 'Headline 4',
    h5: 'Headline 5',
    h6: 'Headline 6',
    p: 'Absatz',
    a: 'Link',
    ol: 'Liste',
    ul: 'Liste',
    div: 'Block',
    span: 'Inline',
    strong: 'Fett',
    em: 'Kursiv',
    img: 'Bild',
  },
  toolbar: [
    ['tags'],
    ['italic', 'bold', 'link', 'align', 'size'],
    ['list', 'image', 'custom'],
    ['colors'],
    ['presets'],
    ['reset'],
    ['undo', 'redo', 'html'],
  ],
}

Custom commands

Custom commands can be passed via the custom parameter of the config object.

A custom command can look like:

{
  title: 'Button',
  preview: '<a class="btn">Button Label</a>',
  command: (elem, event) => {
    elem.after(angular.element('<a class="btn">Button Label</a>')[0]);
  },
}

Parameters of a custom command object:

title (required) The title of the custom command
preview (optional) The html preview rendered in the custom command list
command (required) function

Parameters of the command function:

elem DOM Element which can be modified
event Pointer Event

Style Presets

Style presets can be passed via the presets parameter of the config object.

A style preset looks like:

{
  title: 'Embossed',
  styles: {
    textShadow: '-1px -1px 0 rgba(255,255,255,0.3), 1px 1px 0 rgba(0,0,0,0.8)'
  },
}