@saleswon/sw-editor

A ServiceNow custom component for a custom tinymce 4 editor

Usage no npm install needed!

<script type="module">
  import saleswonSwEditor from 'https://cdn.skypack.dev/@saleswon/sw-editor';
</script>

README

sw-editor

A Now Experience TinyMCE editor component

Component Preview

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