Getting Started

Add the package as a dependency to your project using:

npm i vcomply-rich-editor

Add the module to your app.module imports:

import { VComplyRichEditorModule} from ''vcomply-rich-editor'';
...

@NgModule({
    imports: [ VComplyRichEditorModule],
    ...
}) 

Simply include the vcomply-rich-editor within your component template file

<vcomply-rich-editor></vcomply-rich-editor>

Optional Configurations

<vcomply-rich-editor 
    [editorConfig]="<configuration object>" 
    [(ngModel)]="<two way binding variable>"
    (comment)="<function which will receive the editor data as event>"
    (sendSavedFiles)="<function which will receive the files uploaded (array of files) as event>">
</vcomply-rich-editor>

The editor operates in two modes i.e 'basic' and 'prime'. The prime mode contains all the text formatting options like font-color, text-background color, font-size, text-alignment, font-style like h1, h2, h3 and paragraph tags, and font-families like verdana, arial, georgia, impact, courier new, tahoma

Configuration Options

The following optional configuration items can be used.

| Option | Description | --- | ---
| editorConfig | Object containing the configurations for the vcomply-rich-editor. | | ngModel | vcomply-rich-editor is two way bindable and can be used with ngModel |

Keys within the editorConfig object

The following optional keys can be used

| Option | Type | Description | --- | --- | ---
| mode | 'basic' or 'prime' | Optional field that specifies the mode of the editor you want to use, by default the editor runs in basic mode | link | boolean | Optional field to enable or disable adding link in the editor | urlValue | string | Optional field that acts as a label for url value in Add Link popup | urlText | string | Optional field that acts as a label for url value in Add Link popup | urlTitle | string | Optional field that acts as a label for url value in Add Link popup | validUrlMessage | string | Optional field that displays error message for invalid url value in Add Link popup | urlPlaceHolder | string | Optional field that acts as a placeholder for url value in Add Link popup | textPlaceholder | string | Optional field that acts as a placeholder for url text in Add Link popup | titlePlaceholder | string | Optional field that acts as a placeholder for url title in Add Link popup | configFontStyle | boolean | Optional field that enables or disables font-style option in editor i.e H1, H2, H3 & P tags | file | boolean | Optional field to enable or disable file upload option inside the editor. | | id | string | Optional field to add a unique id for each instance of editor, by default each instance of editor created has a unique id | | zIndex | number | Optional field to set zIndex of the add link or add files popup , default is 100000 | | maxHeight | string | Optional field to set max-height of editor after which scrollbar appears inside the editor | | placeholder | string | Optional field to display a message when editor is empty. | | toolbarPlacement | 'top' or 'bottom' | Optional field to diplay the toolbar at the top or bottom, by default the toolbar is placed at the bottom | | colorPalette | boolean | Optional field to enable or disable font and text-background color options in toolbar. | | buttonName | string | Optional field to display a submit button in the editor toolbar that emits all the editor html data on click | | buttonDisabled | boolean | Optional field to enable or disable the submit button that is present in the toolbar | | mentionedNames | Array i.e [{id: 8, name: 'Alec'},...] | Optional field to add name tribute inside the editor and trigger a list of names with @ button in toolbar or keyboard @ button | | mentionedDates | Array i.e ['12/1/2020', '11/2/2021',....] | Optional field to add date tribute inside the editor and trigger a list of date strings with # button in the toolbar or keyboard # button | | canUploadMultipleFile | boolean Default: true | Optional field to allow user to upload multiple files in the editor.|

Output Events

The following output events can be used.

| Output | Description | | --- | --- | | @Output() comment EventEmitter<string> | Emitted whenever the user clicks on the submit button and it clears the editor and emits whatever data that was present in the editor | @Output() sendSavedFiles EventEmitter<any[]> | Emitted when the user uploads a list of files through the editor.