## 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.