how to apply addImageBlobHook in Vue.js??

[rkddbs1031]

Summary

Hello. I'm trying to apply addImageBlobHook, a function that fires when an image is uploaded. When uploading an image to the editor, I am trying to output the editor by receiving the url of the photo as a return value as a return value as a callback function without saving base64-encoded data. I searched for a way to remove the default function using removeHook and set it again, but I have no idea how to apply it. Any help would be appreciated..

Screenshots

<editor :options="editorOptions" minHeight="400px" initialEditType="wysiwyg" ref="toastuiEditor" />

`import '@toast-ui/editor/dist/toastui-editor.css'; import 'tui-color-picker/dist/tui-color-picker.css'; import '@toast-ui/editor-plugin-color-syntax/dist/toastui-editor-plugin-color-syntax.css';

import colorSyntax from '@toast-ui/editor-plugin-color-syntax'; import { Editor } from '@toast-ui/vue-editor';`

It was imported as above, and the data is written as follows.

When declaring the callback function, when I tried to call a method using this, an error appears in the console window as well. Is it not using this syntax.. or how to apply the code below in Vue.js..

Version

"@toast-ui/editor": "^3.1.2",
"@toast-ui/vue-editor": "^3.1.2",

[js87zz]

@rkddbs1031 It works normally when done as below. Can you check to pass props options? If it doesn't work, please upload your code in code sandbox to resolve the issue.

new Vue({
  data() {
    return {
      initialValue: content,
      options: {
        hooks: {
          addImageBlobHook(blob, callback) {
            // do something
            callback('image url', 'alt text');
          },
        },
      },
    };
  },
  template: '<editor height="400px" :options="options" />',
}).$mount('#editor');

[ZeroBean]

here is my solution:

1. instead of using the @toast-ui/vue-editor, i use the @toast-ui/editor, because it provide the consturtor function

HTML:

Script:

then you could create an initEditor funtion and use it in the mount life cycle

holpfully can help you!

[stale[bot]]

This issue has been automatically marked as inactive because there hasn’t been much going on it lately. It is going to be closed after 7 days. Thanks!

[stale[bot]]

This issue will be closed due to inactivity. Thanks for your contribution!