README
sw-editor
A Now Experience TinyMCE editor component
Component Preview
Basic Usage
const testContent = `<span>This is a test</span>`;
<ne-tinymce content={testContent} />
Exposed Parameters
Property Name | Description | Type | Default Value | Example Custom Value |
---|---|---|---|---|
componentId | A unique component ID | UID | Random | |
content | HTML content to be added to rich-text editor | String | Empty String | <span>This is a test</span> |
placeholder | Placeholder added to element | String | Enter rich-text-here |
Place some text here |
onInit | callback function | Function | noop |
(e, editor) => { console.log(e, editor); } |
onSetContent | callback function | Function | noop |
(e, editor) => { console.log(e, editor); } |
onFocus | callback function | Function | noop |
(e, editor) => { console.log(e, editor); } |
onChange | callback function | Function | noop |
(e, editor) => { console.log(e, editor); } |
onClick | callback function | Function | noop |
(e, editor) => { console.log(e, editor); } |
onExecCommand | callback function | Function | noop |
(e, editor) => { console.log(e, editor); } |
onSelection | callback function | Function | noop |
(e, editor) => { console.log(e, editor); } |
onBlur | callback function | Function | noop |
(e, editor) => { console.log(e, editor); } |
callbacks | Array of custom callback functions | Array | [] |
See custom callback section below |
buttons | Array of custom buttons | Array | [] |
See custom button section below |
plugins | Array of plugins to include | Array | Bool | [...] |
See plugins section below |
tools | Array of tool buttons to include | Array | Bool | [...] |
See tools section below |
extraTools | Array of extra tool buttons to include | Array | [] |
['bold'] |
contexts | Array of buttons to add to context menu | Array | Bool | [...] |
See contexts section below |
extraContexts | Array of extra context menu buttons | Array | [] |
['link unlink'] |
menus | Array of buttons to add to top menu | Array | Bool | false |
See menus section below |
extraMenus | Array of extra menu buttons | Array | [] |
['file'] |
readonly | Boolean property to determine read-only | Bool | false |
true |
readonlyTools | Array of tool buttons to show when read | Array | Bool | false |
['bold italic', 'link unlink'] |
readonlyContexts | Array of context buttons to show when read | Array | Bool | false |
['bold italic', 'link unlink'] |
readonlyMenus | Array of menu buttons to show when read | Array | Bool | false |
['file', 'edit'] |
customClasses | Array of custom classes to add to body el | Array | [] |
['custom-1', 'custom-2'] |
minHeight | Minimum height for auto-resize plugin | Integer | 100 | 200 |
maxHeight | Maximum height for auto-resize plugin | Integer | 700 | 1200 |
paddingTop | padding-top for body el | Integer | 60 | 20 |
paddingBottom | padding-bottom for body el | Integer | 60 | 20 |
paddingSides | padding-left, padding-right for body el | Integer | 20 | 40 |
browserSpellcheck | Enables spellcheck for editor | Bool | true |
false |
relativeUrls | Makes all link urls relative to base url | Bool | true |
false |
convertUrls | No clue what this does, but tinymce uses it | Bool | false |
true |
autoFocus | Enables the editor to be auto-focused on init | Bool | false |
true |
removeHost | Removes script hosts | Bool | true |
false |
validElements | String selector of valid elements and attrs | String | *[*] |
'span, p, table' |
externalPlugins | Object with external plugins to be loaded | Object | {} |
See tinymce 4 documentation on this property |
useBorder | Enables the css border around the editor | Bool | true |
false |