This library provides Angular support for EditorJS.
Inside the module you will find:
NgxEditorJSDirective- An Angular Directive used to attach an
EditorJSinstance to any block DOM element
NgxEditorJSComponent- An out-of-the-box Angular component that is Reactive Forms compatible.
NgxEditorJSMaterialFieldComponentAn Angular Material Form Field component that provides all the required properties and life-cycle events required. See the Form Demo on an example usage
NgxEditorJSBaseComponent- A base Angular component that is Reactive form compatible but with no template, can be used to create custom UI framework containers
NgxEditorJSService- A Service that can be injected into an application to provide a interface to interact with
EditorJSinstances and manage plugins.
Within these components you will be able to access the underlying
EditorJS instance, for use see the EditorJS API Docs
For changes see the CHANGELOG
Installing and usage
Install the library via
npm along with the plugins module and
EditorJS module. For each plugin you want to use you also need to install it's dependency - see the Plugin Docs for more information.
> npm install @tinynodes/ngx-editorjs @tinynodes/ngx-editorjs-plugins @editorjs/editorjs @editorjs/paragraph....
Once installed, include the
NgxEditorJSModule module in your project with the
forRoot method. The
forRoot takes an optional configuration.
If you don't want to use Angular material you can import
The configuration is deigned to be extendable in the future, so each potential feature has a key. For configuring EditorJS pass the options below into a
editorjs key in the config.
The module configuration allows EditorJS to be provided with a set of options for use. See the EditorJS docs for more details.
||Sets the EditorJS instance to autofocus on load|
||Value of time for the the autosave of EditorJS content to the service when the component when focused, this is used for Reactive forms. Default is 0 to disable|
||Initial data to load into the editor, this is an
||Hides the toolbar by default|
||The element ID of the holder, this will set all instances in this module to use this as a default|
||The default block type to use in the editor|
||Height of Editor's bottom area that allows to set focus on the last Block|
||Placeholder of the first block|
||Content sanitizer configurations|
||Excludes tools from the application, if no value or empty list passed all plugins available are added|
Adding custom tools
See the plugin module
for docs on how to add custom plugins for