marx-editor-vc

Marx was created in the memory of late Karl Heinrich Marx (1818 - 1883). This is a small tribute to honour his writings including the legendary book "The Communist Manifesto". A wysiwyg editor with blend in styles, formatting, font families and everything needed to make your rich text edit experience euphoric

Usage no npm install needed!

<script type="module">
  import marxEditorVc from 'https://cdn.skypack.dev/marx-editor-vc';
</script>

README

Marx

Marx was created in the memory of late Karl Heinrich Marx (1818 - 1883). This is a small tribute to honour his writings including the legendary book "The Communist Manifesto". A wysiwyg editor with blend in styles, formatting, font families and everything needed to make your rich text edit experience euphoric

Usage

Add the package as a dependency to your project using:

npm i marx-editor

Add the module to your app.module imports:

import { MarxEditorModule } from 'marx-editor';
...

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

Simply include the marx-editor within your component template file

<marx-editor></marx-editor>

Optional Configurations

<marx-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>">
</marx-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 marx-editor.
ngModel Marx-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

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.