Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Does it support attachting base64 image ? #214

Open
quroom opened this issue May 8, 2021 · 7 comments
Open

Does it support attachting base64 image ? #214

quroom opened this issue May 8, 2021 · 7 comments
Milestone
v2

Comments

@quroom
Copy link

quroom commented May 8, 2021 •
edited

Currently I am using quilljs.
Not only It's more heavy than pell but also it has critical problem that scrolling top while pasting long text
So I am considering to use pell editor, if I can use base64 image in this editor.
@jaredreich
Copy link
Owner

It does not, but feel free to submit a PR!

@quroom
Copy link
Author

quroom commented May 22, 2021 •
edited

Thanks for answer.
Nowadays I am little bit busy because of my project.
So I will try it ASAP :)
I am happy that you asked me to send PR :)
I hope that I will have time to send PR soon.

Have a nice day!
@jaredreich

@Ninja4Code
Copy link

Ninja4Code commented Nov 17, 2021 •
edited

I am someone who got fed up with quill as well. Very heavy and I always experienced errors when trying to bundle it. I will take a stab at the base64 image because I think it's a "gotta have" these days.

UPDATE: I was able to successfully convert the image action to retrieving a file via the File Explorer using FileReader. I was then able to convert to a base64 image and insert into the document! There's no ability yet to resize the image or to restrict image size, which might be a good idea. I'll do a pull request shortly.

@jaredreich
Copy link
Owner

Nice work folks. The problem here is adding functionality like this to the core package would be just bloat.

That being said, it's a great idea for a custom-written action.

Rather than a PR, it's a good idea to post what you've written for your custom action here, and I can add it to some sort of "custom actions list" for people to reference in the future.

@Ninja4Code
Copy link

Ninja4Code commented Nov 24, 2021 via email

@josiaho
Copy link

josiaho commented Jul 13, 2022 •
edited

Here's a super basic custom action:

{
    name: 'image',
    result: function () {
        var f = document.createElement('input');
        f.type = 'file';
        f.setAttribute('accept', 'image/*');
        f.click();
        f.onchange = function (e) {
            var r = new FileReader();
            r.readAsDataURL(e.target.files[0]);
            r.onload = function () {
                document.execCommand('insertImage', 0, r.result)
            }
        }
    }
}

I'm sure there's a better way to do this, but it seems to work on a desktop at least. You could pair this with a canvas image editor such as cropper to perform cropping/resizing/etc before embedding or uploading to a server.

@Ninja4Code
Copy link

Ninja4Code commented Jul 15, 2022 via email

@jaredreich jaredreich added this to the v2 milestone Jul 16, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
v2
Development

No branches or pull requests
4 participants
@josiaho @jaredreich @Ninja4Code @quroom