Tui.editor: Is there any way to add an image or some other element to selected position?

[Godsenal]

Version

1.01

Test Environment

Chrome, Mac
React

Current Behavior

 editor.insertText('<img src='~~'/>')

Expected Behavior

Hi. Thanks for a wonderful editor! I'm trying to add an image to server and place it selected position. (not base 64 encoded image)
Since i'm using addImageBlobHook , execute above code after successfully uploading image.
I think it's not the right way.. Is there any possible way?

[kyuwoo-choi]

you're doing it right.

The editor will give you two params blob & callback to addImageBlobHook.
I guess you already have done uploading blob.

next you can pass uploaded image url to callback like below

...
addImageBlobHook: function(blob, callback) {
  var uploadedImageURL = yourUploadingLogicHere(blob);
  callback(uploadedImageURL, 'alt text');
}
...

this will replace base64 encode image markdown like this.

[alt text](uploadedImageURLYouHaveFromLogic)

[kyuwoo-choi]

I'm closing this. If you have further question, feel free to reopen this.

[artemmolotov]

More complete example:

...
    hooks: {
        addImageBlobHook: this.onAddImageBlob(),
    },
...

uploadImage(blob) {
    let formData = new FormData();

    // file in a 'multipart/form-data' request
    formData.append(0, blob, blob.name);

    return fetch('/upload/image', {
        method: 'POST',
        body: formData
    }).then(response => {
        if (response.ok) {
            return response.json();
        }

        throw new Error('Server or network error');
    });
};

onAddImageBlob(blob, callback) {
    uploadImage(blob)
        .then(response => {
            if (!response.success) {
                throw new Error('Validation error');
            }

            callback(response.data.url, 'alt text');
        }).catch(error => {
            console.log(error);
        });
};

[2klm]

More complete example:

...
    hooks: {
        addImageBlobHook: this.onAddImageBlob(),
    },
...

uploadImage(blob) {
    let formData = new FormData();

    // file in a 'multipart/form-data' request
    formData.append(0, blob, blob.name);

    return fetch('/upload/image', {
        method: 'POST',
        body: formData
    }).then(response => {
        if (response.ok) {
            return response.json();
        }

        throw new Error('Server or network error');
    });
};

onAddImageBlob(blob, callback) {
    uploadImage(blob)
        .then(response => {
            if (!response.success) {
                throw new Error('Validation error');
            }

            callback(response.data.url, 'alt text');
        }).catch(error => {
            console.log(error);
        });
};

do you have the full code please ?

[artemmolotov]

do you have the full code please ?

Hi, @2klm! I published all the code above, but you can try this one too, if the previous code doesn't work for you.

let editorElement = window.document.querySelector('#editor__container');

let editor = new TuiEditor({
    el: editorElement,
    hooks: {
        addImageBlobHook: (blob, callback) => {
            let formData = new FormData();

            // file in a 'multipart/form-data' request
            formData.append(0, blob, blob.name);

            fetch('/upload/image', {
                method: 'POST',
                body: formData
            }).then(response => {
                if (response.ok) {
                    return response.json();
                }

                throw new Error('Server or network error');
            }).then(response => {
                if (!response.success) {
                    throw new Error('Validation error');
                }

                callback(response.data.url, 'alt text');
            }).catch(error => {
                console.log(error);
            });
        },
    },
});

Be careful, please. This code requires your custom back-end implementation of the images storing and publishing. Example of the server response: {"success":true, "data":{"url":"https://some.domain/img1.png"}}.

[2klm]

Massive thanks @artemmolotov !!

Just a question, is fetch(/upload/image) the link to my PHP script or the destination folder ?

[artemmolotov]

Massive thanks @artemmolotov !!

Just a question, is fetch(/upload/image) the link to my PHP script or the destination folder ?

It's link to a your web route or script.

[2klm]

My code always ends up going to console.log(error); which returns a JSON parse error for some reason.

I think my PHP code is wrong. Anyway thanks for sharing the js