Tui.editor: Suggestion: use Blob + Window.URL instead of base64

[abruzzihraig]

Very appreciate your work with such amazing editor.

I've noticed TUI editor supports IE10+, which means it can use blob and window.URL instead of base64 when uploading images. It will reduce those verbose and unreadable base64 data when users switch to Markdown mode. Also, the performance of parsing content would be better.

How do you think about it?

[kyuwoo-choi]

@abruzzihraig NICE! 🎉
That's an amazing idea. I haven't thought about it.
I'm sure it'll make markdown editor much better.

If you(or somebody) are interested in help, check out below code.
I'd like to wait for few days 😉
https://github.com/nhnent/tui.editor/blob/4aed6917860f4123c047e42932855a0be7ba6c66/src/js/importManager.js#L126-L136

and some code in importManager.spec.js for test.

Please feel free to make a PR for it. 👍

[CosmoMyzrailGorynych]

You can't save window blobs to a persistent storage. Either these blobs should be immediately replaced to links to actual files (e.g. after uploading them to an image server or a direct link in desktop apps), or they should be base64-encoded. Otherwise the built-in function to upload images is just pointless.

[abruzzihraig]

If it should be persistent, we can convert the blob url to base64 as late
as possible before storing. Parse image to base64 when editing would have a
bad performance.
Cosmo Myzrail Gorynych aka CoMiGo [e-mail]于2018年2月4日
周日上午2:48写道：

You can't save window blobs to a persistent storage. Either these blobs
should be immediately replaced to links to actual files (e.g. after
uploading them to an image server or a direct link in desktop apps), or
they should be base64-encoded. Otherwise the built-in function to upload
images is just pointless.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/nhnent/tui.editor/issues/48#issuecomment-362824498,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ADM3a6fRuk5QYo2WtAyW2ARoUdTocBByks5tRH-1gaJpZM4RfHSe
.

>

Yang He

[kyuwoo-choi]

I got a tip from @Vnthf
They mark base64 string on codemirror using codemirror markText()

It'll style verbose base64 text to a nice short text.
It only affect it's style, so It doesn't manipulate text data.

[abruzzihraig]

Just like using a hash string to represent the base64 data? But how do you
display the image in the WYSIWYG mode?
It sounds like the parser still needs to parse the real verbose base64 data
every time by the content changes.

On Wed, Feb 7, 2018 at 2:27 PM, KyuWoo Choi [e-mail]
wrote:

I got a tip from @Vnthf https://github.com/vnthf
They mark base64 string on codemirror using codemirror markText()
http://codemirror.net/doc/manual.html#api_marker

It'll style verbose base64 text to a nice short text.
It only affect it's style, so It doesn't manipulate text data.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/nhnent/tui.editor/issues/48#issuecomment-363644932,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ADM3a1blTZw6lvJm38-tD8D47zPwenx0ks5tSRg1gaJpZM4RfHSe
.

[kyuwoo-choi]

actual markdown text

![image.png](data:image/png;base64,long-base64-encoded-image-blahblah==)

shown on markdown editor

![image.png](shortened-image-mark-element)

by doing

codemirrorDoc.markText(from, to, { repalceWith: shortened-image-mark-element });

it covers only presentation on codemirror, doesn't actually modify codemirror document.
so copy/paste to/from clipboard, switching mode will work smoothly.

html in wysiwyg

<img src="data:image/png;base64,long-base64-encoded-image-blahblah==" />

as codemirror document has never been changed actually.

[bora89]

Hi guys any news on that? I also noticed a bad performance once image inserted. Which solution should we pick?

[kyuwoo-choi]

The solution I had posted is already shipped in Dooray editor and It works well.
I'll ask @Vnthf to contribute, or I'll try to adopt some code from there.

[bora89]

Yes, please, that would be great

[karthiikselvam]

@kyuwoo-choi This is how i achieved.
1.Grab the base64 data.
2.Make a Ajax call to a web api that converts base64 into image and save it on the server.
3.Return the url as required and pass it to emit function.

$.ajax({ url: 'Home/Index', type: 'POST', dataType: 'text', data: { capture: reader.result }, success: function (data) { editor.importManager.eventManager.emit('command', 'AddImage', { imageUrl: data, altText: 'image' }); }, error: function () { alert('error'); }, }) ;

Webapi Code.

` [HttpPost]
public String Index(String capture)
{
string base64String = capture.Replace("data:image/png;base64,", "");

        byte[] imageBytes = Convert.FromBase64String(base64String);
        MemoryStream ms = new MemoryStream(imageBytes, 0, imageBytes.Length);

        // Convert byte[] to Image
        ms.Write(imageBytes, 0, imageBytes.Length);
        Image image = Image.FromStream(ms, true);
        string spath = System.Web.HttpContext.Current.Server.MapPath("~/Upload");
        string path = spath + "/Myimage.jpg";
        image.Save(path, System.Drawing.Imaging.ImageFormat.Jpeg);

        string imagePath = path.Remove(0, 57);
        return imagePath;
    }`

[lmikoto]

actual markdown text

![image.png](data:image/png;base64,long-base64-encoded-image-blahblah==)

shown on markdown editor

![image.png](shortened-image-mark-element)

by doing

codemirrorDoc.markText(from, to, { repalceWith: shortened-image-mark-element });

it covers only presentation on codemirror, doesn't actually modify codemirror document.
so copy/paste to/from clipboard, switching mode will work smoothly.

html in wysiwyg

<img src="data:image/png;base64,long-base64-encoded-image-blahblah==" />

as codemirror document has never been changed actually.

thanks first， but how can i init it，when reopen the doc