Suggestion: use Blob + Window.URL instead of base64

[abruzzihraig]

Suggestion: use Blob + Window.URL instead of base64

[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.

[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.

[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. 👍

[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 <[email protected]>于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 <#48 (comment)>, 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 ***@***.***> 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 <#48 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ADM3a1blTZw6lvJm38-tD8D47zPwenx0ks5tSRg1gaJpZM4RfHSe> .

[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