Skip to content
This repository was archived by the owner on Apr 6, 2020. It is now read-only.

Conversation

robertfausk
Copy link

@robertfausk robertfausk commented Jul 10, 2019

Please check if the PR fulfills these requirements

  • It's the right issue type on the title
  • When resolving a specific issue, it's referenced in the PR's title (e.g. fix #xxx[,#xxx], where "xxx" is the issue number) no issue exists yet - so it is not needed
  • The commit message follows our guidelines
  • Tests for the changes have been added (for bug fixes/features)
  • Docs have been added/updated (for bug fixes/features)
  • It does not introduce a breaking change or has a description of the breaking change

Description

Add support for paste event to be able to hook into image adding or something else.

Example:

        <editor
            :options="tuiEditorOptions"
            @paste="onEditorPaste"
            ref="tuiEditor"
            ...
        />
...
        data () {
            return {
                ...
                tuiEditorOptions: {
                    ...
                    hooks: {
                        addImageBlobHook: function (blob, callback) {
                            window.vueApp.uploadImage(blob).then(function (uploadedImageURL) {
                                callback(uploadedImageURL);
                            });
                        }
                    },
                },
            }
        },
        methods: {
            onEditorPaste (event) {
                var cbData = event.data.clipboardData;
                var types = cbData && cbData.types;

                if (types.includes("Files")) {
                    const blob = cbData.files['0'];
                    this.$refs.tuiEditor.editor.eventManager.emit('addImageBlobHook', blob, (imageUrl, altText) => {
                          this.$refs.tuiEditor.editor.eventManager.emit('command', 'AddImage', {
                            imageUrl,
                            altText: altText || blob.name || 'image'
                        });
                    }, 'paste');

                    event.data.preventDefault();
                    event.data.stopPropagation();
                }
            },
            uploadImage(blob) {
                let formData = new FormData();
                let path = this.getHiddenTuiEditorInput().dataset.uploadImagePath;

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

                return fetch(path, {
                    method: 'POST',
                    body: formData
                }).then(response => {
                    if (!response.ok) {
                        throw new Error('Server or network error');
                    }

                    return response.json();
                }).then(function(myJson) {
                    return myJson.imagePath
                });
            }
        }
...

Thank you for your contribution to TOAST UI product. 🎉 😘 ✨

@robertfausk
Copy link
Author

@sohee-lee7 @dongsik-yoo
Are there any updates on this?
I would like to get it merged and tagged so that I do not need to use my own fork anymore.

@dongsik-yoo
Copy link
Contributor

@sohee-lee7 @seonim-ryu Check this PR.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants