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 CSStags
An array of html tags. These tags will be available to format the selected elementsynonyms
Labels for the the tagscustom
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 thetags
config param to format the selected elementbold
Button to toggle font weightitalic
Button to toggle italiclink
Button to add or edit a linkalign
Button to set alignmentsize
Button to change font sizelist
Submenu with unordered and ordered listimage
Button to add an image via popcustom
List of custom commands set in thecustom
config param to format the selected element or add a new onecolors
Dropdown with colors set in thecolors
config param and hex inputpresets
List of custom style presets set in thepresets
config param to format the selected elementreset
Button to reset style of the selected elementundo
Undo button - important: adding elements and custom commands are currently not supportedredo
Redo button - important: adding elements and custom commands are currently not supportedhtml
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 commandpreview
(optional) The html preview rendered in the custom command listcommand
(required) function
Parameters of the command function:
elem
DOM Element which can be modifiedevent
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)'
},
}
Parameters of a custom command object:
title
(required) The title of the preset stylestyles
(required) key, value pairs of css styles - key must be camelCased