How to use the @editorjs/editorjs function in @editorjs/editorjs

To help you get started, we’ve selected a few @editorjs/editorjs examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github Jungwoo-An / react-editor-js / lib / EditorJs.tsx View on Github external
children,
      enableReInitialize,
      tools,
      ...props
    } = this.props

    const extendTools = {
      // default tools
      paragraph: {
        class: Paragraph,
        inlineToolbar: true
      },
      ...tools
    }

    this.instance = new EditorJS({
      tools: extendTools,
      holder: 'editor-js',

      ...props
    })

    if (instanceRef) {
      instanceRef(this.instance)
    }
  }
github ChangJoo-Park / vue-editor-js / src / Editor.vue View on Github external
function initEditor (props) {
      destroyEditor()

      const { holderId: holder, autofocus, initData: data, config } = props
      console.log(config)
      const tools = useTools(props, config)

      state.editor = new EditorJS({
        holder,
        autofocus,
        data,
        tools,
        onReady: () => context.emit('ready'),
        onChange: () => context.emit('change')
      })
    }
github stfy / react-editor.js / src / editor.tsx View on Github external
async initEditor() {
    const { holder, ...config } = this.props;
    const { handleChange } = this;

    const holderNode = !holder ? this.getHolderNode() : holder;

    this.editor = new EditorJS({
      ...config,
      holder: holderNode,
      onChange: handleChange,
    });
  }
github chrztoph / texterify / app / javascript / components / sites / dashboard / editor / TranslationCard.tsx View on Github external
loadData = async () => {
        const translationForLanguage = await this.getTranslationForLanguage(this.state.selectedLanguage);
        const isHTMLKey = this.props.keyResponse.data.attributes.html_enabled;

        if (isHTMLKey) {
            let htmlData;
            try {
                htmlData = JSON.parse(translationForLanguage);
            } catch (e) {
                //
            }

            this.editor = new EditorJS({
                holder: `codex-editor-${this.state.selectedLanguage}`,
                minHeight: 40,
                tools: {
                    list: {
                        class: List,
                        inlineToolbar: true
                    }
                },
                onChange: () => {
                    if (this.props.onChange) {
                        this.props.onChange(true);
                    }
                    this.setState({ editorContentChanged: true });
                },
                data: isHTMLKey ? Utils.escapeEditorContent(htmlData) : undefined
            });
github Jungwoo-An / react-editor-js / dist / react-editor-js.es.js View on Github external
EditorJsContainer.prototype.initEditor = function () {
        var _a = this.props, instanceRef = _a.instanceRef, children = _a.children, enableReInitialize = _a.enableReInitialize, props = __rest(_a, ["instanceRef", "children", "enableReInitialize"]);
        this.instance = new EditorJS(__assign({ tools: EDITOR_JS_PLUGINS, holder: 'editor-js' }, props));
        if (instanceRef) {
            instanceRef(this.instance);
        }
    };
    EditorJsContainer.prototype.destroyEditor = function () {
github cjim8889 / HiShare / HiShare / client-app / src / components / Editor.js View on Github external
{
                      type: "header",
                      data: {
                          text: "你好世界...",
                          level: 1
                      }
                  },
                  {
                      type: "paragraph",
                      data: {
                          text: "..."
                      }
                  }
              ];

        this.editor = new EditorJs({
            autofocus: true,
            holders: "editorjs",
            onChange: this.handleChange,
            data: {
                blocks: blocks
            },
            tools: {
                header: {
                    class: Header,
                    shortcut: "CMD+SHIFT+H"
                },
                list: {
                    class: List,
                    shortcut: "CMD+SHIFT+L"
                },
                image: {
github fusioncms / fusioncms / resources / js / fieldtypes / BlockEditor / Field.vue View on Github external
mounted() {
            let vm = this
            let data = this.value

            vm.editor = new EditorJS({
                holder: this.field.handle,
                placeholder: this.field.settings.placeholder || 'Add some text here...',

                data,

                minHeight: 0,

                tools: {
                    checklist: Checklist,
                    code: Code,
                    delimiter: Delimiter,
                    embed: Embed,
                    header: Header,
                    inlineCode: InlineCode,
                    link: Link,
                    list: List,

@editorjs/editorjs

Editor.js — open source block-style WYSIWYG editor with JSON output

Apache-2.0
Latest version published 11 days ago

Package Health Score

88 / 100
Full package analysis

Popular @editorjs/editorjs functions