tanepiper / ngx-tinynodes

Monorepo for components released on NPM @tinynodes
https://tanepiper.github.io/ngx-tinynodes/
Other
37 stars 15 forks source link

Noob question about the image plugin #17

Closed vrxj81 closed 4 years ago

vrxj81 commented 4 years ago

Hi, Thanks for the great integration of EditorJS into Angular! I must admit I'm not smart enough to figure out how to set the configuration for the Image block plugin. If I understand correctly, it's loaded as one of the default plugins, but for the life of me I cannot get the configuration set. When I choose an image to upload it always gets sent to http://localhost

tanepiper commented 4 years ago

The docs for the endpoints are in the EditorJS plugin docs: https://github.com/editor-js/image

Docs for providing a config to a plugin are included here: https://github.com/tanepiper/ngx-tinynodes/tree/master/libs/ngx-editorjs/ngx-editorjs-plugins and it can be provided as a custom plugin with config,

vrxj81 commented 4 years ago

Hi, thanks for responding. I already went through both links before posting, but it seems I'm doing it wrong. Any chance of getting some example code please? Thanks.

tanepiper commented 4 years ago

@vrxj81 I don't have time to test this, but instead of including the PluginImageModule from my plugin package, instead copy it and them import your own custom one:

import { NgModule } from '@angular/core';
import { EDITOR_JS_TOOL_INJECTOR, PLUGIN_CONFIG, PluginTypes, createPluginConfig }from '@tinynodes/ngx-editorjs-plugins';

import Image from '@editorjs/image';

/**
 * A module that provides the default EditorJS `<img>` block tool.
 * See [the GitHub repo](https://github.com/editor-js/image) for API details
 */
@NgModule({
  providers: [
    {
      provide: EDITOR_JS_TOOL_INJECTOR,
      useValue: Image,
      multi: true
    },
    {
      provide: PLUGIN_CONFIG,
      useValue: {
        key: 'image',
        type: PluginTypes.Block,
        pluginName: 'EditorJS Image',
        config: {
           // Custom config here
        }
      },
      multi: true
    }
  ]
})
export class PluginImageModule {}