TypeScript icon, indicating that this package has built-in type declarations

    3.0.0 • Public • Published

    Ngx-EditorJS Plugins

    npm version

    This module provides the core Plugin service for @tinynodes/ngx-editorjs, and also provides a default set of EditorJS plugins for using Angular modules and Injection Tokens.

    Plugin Service

    The NgxEditorJSPluginService takes all the Plugin provides and creates a single map of the configurations and instances. These are used within NgxEditorJS to set the plugins available within the editor. The plugin service is provided separably to avoid circular dependencies within the libraries and is required by @tinynodes/ngx-editorjs

    Creating a Plugin.

    Creating a plugin is very simple, the module provides some Injection Tokens for use with the module.

    The plugin you want to import should conform to the Block or Inline format of EditorJS, alongside a configuration object that provides details about the plugin.

    Both these providers must be set to multi: true - when the plugin service is initialised it will be provided a map of these.

    Here is an example of the PluginParagraph:

    import { NgModule } from '@angular/core';
    import { EDITOR_JS_TOOL_INJECTOR, PLUGIN_CONFIG, PluginTypes from '@tinynodes/ngx-editorjs-plugins';
    import Paragraph from '@editorjs/paragraph';
      providers: [{
        provide: EDITOR_JS_TOOL_INJECTOR,
        useValue: Paragraph,
        multi: true // IMPORTANT!
      }, {
        provide: PLUGIN_CONFIG,
        useValue: {
          key: 'paragraph',
          type: PluginTypes.Block,
          pluginName: 'EditorJS Paragraph',
        multi: true // IMPORTANT!
    export class PluginParagraphModule {}

    The full configuration object parameters are listed below, please note some are not yet implemented in the application but will be used in future releases.

    Param Name Type Optional Description
    key string No The default key of the plugin (e.g. paragraph)
    type string No The type of plugin, currently block and inline are supported
    pluginName string No The descriptive name of the plugin
    config object Yes Optional configuration to pass to the plugin
    shortcut string Yes An optional keyboard shortcut for the plugin
    description string Yes A description of the plugin
    blockData string Yes Optional default block data to use for the plugin

    Once imported into an application or module the plugin is available in the app with several methods to get plugins on the service.

    • getPlugins - Get a map of all plugins
    • getPlugin(key: string) - Get a specific plugin by map key
    • getPluginsWithExclude(excludeList: string[]) - Get a map of plugins but exclude ones in the passed list
    • getPluginsWithInclude(includeList: string[]) - Get a map of plugins but only the ones in the include list

    Peer Dependencies

    All EditorJS plugins are listed as peerDependencies of the project - this is because Angular requires these modules to be in the root. You must manually install these are the root of your Angular application.

    > npm install @editorjs/paragraph @editorjs/header ....

    Plugin List

    Plugin Name Description Links
    PluginCodeModule Provides a <code> block editor README GitHub
    PluginHeaderModule Provides a <h1> - <h6> block editor README GitHub
    PluginImageModule Provides an <img> block editor + file upload support README GitHub
    PluginLinkModule Provides an <a> block editor README GitHub
    PluginIListModule Provides an <ol>/<li> block editor README GitHub
    PluginMarkerModule Provides inline text marking README GitHub
    PluginParagraphModule Provides an <p> block editor README GitHub
    PluginSimpleImageModule Provides an <img> block editor with paste support README GitHub


    npm i @tinynodes/ngx-editorjs-plugins

    DownloadsWeekly Downloads






    Unpacked Size

    397 kB

    Total Files


    Last publish


    • tanepiper