(Feature request) upload image without popup

[1c7]

No popup

Directly let me select file

Thanks!

[cavo789]

Hello

Perhaps by implementing http://www.dropzonejs.com/.

I've done it last friday : a custom button in my tui.toolbar that show a dropzone area (just a DIV; with your .css). Then just drop files from your hard disk to that area. You'll, of course, need to code a few for the upload on your server and get back the URL (where the image was saved on your site).

Then, still using your custom button, add the markdown image tag where the cursor is.

Here is a screenshot (text in french explaining the user that he just need to drop files there) :

Part of this can be found here : https://github.com/cavo789/marknotes/blob/master/src/marknotes/plugins/editor/upload/upload.js

And php called by the ajax can be found here : https://github.com/cavo789/marknotes/blob/master/src/marknotes/plugins/task/upload/save.php

Have a nice programming !

[1c7]

@cavo789 Thank you !

[cavo789]

Welcome! You're doing very great things with tui.editor! I've spent a few days on it these last days; it's a very nice and powerfull editor.

[kyuwoo-choi]

Guys, It supports drag & drop image files. just grab an image then drop it on the editor.

• You can also take a capture the screen and paste it into the editor too.

[1c7]

@kyuwoo-choi

Thanks for reply!

it's good that the editor support drag & paste, but some people just used to that "Image" button. I have to support these user.

do tui.editor already support this?

(click image button and bring up file select box) if not, Can you tell me how can I customize it? Thanks!

I know how to add a customize button to toolbar

and I can trigger a hidden file input when the button being click like:

<button> [image icon] </button>
<input type="file" style='display:none'>

and upload image

then got Image URL like this

http://p9y09fhk7.bkt.clouddn.com/mianmo-2018-06-15-17-45-28-FkwMGywRAwp7EPKJvYuWFDPhMz_Y.jpg

But now, How to insert this image URL into editor?

support both WYSIWYG and Markdown

![](http://p9y09fhk7.bkt.clouddn.com/mianmo-2018-06-15-17-45-28-FkwMGywRAwp7EPKJvYuWFDPhMz_Y.jpg)

[1c7]

Thank you very much 👍

[cavo789]

Guys, It supports drag & drop image files.
just grab an image then drop it on the editor.

Lol... not yet tried until now ;-) I just notice this feature but the image is then displayed in a base64-encode format. I suppose we need to write code for saving the image on the server and retrieve the saved image filename. Do you've a link to a small piece of documentation ?

(just by curiosity since i've already implement Dropfiles.js and I've a solution for my needs).

Bye

[1c7]

@cavo789

Use addImageBlobHook

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

Code from: https://github.com/nhnent/tui.editor/issues/57

Real Example: Full code copy from my own project

    this.editor = new Editor({
      el: document.querySelector("#topic_content"), // 容器
      initialEditType: "wysiwyg", // 默认模式
      hideModeSwitch: true,  // 不需要 markdown 和 wysiwyg 的切换
      language: 'zh', // 中文
      usageStatistics: false, // 不要默认发谷歌统计
      toolbarItems: [
        'heading',
        'bold',
        'italic',
        'strike',
        'divider',
        'hr',
        'quote',
        'divider',
        'ul',
        'ol',
        // 'task',
        // 'indent',
        // 'outdent',
        // 'divider',
        // 'table',
        'image',
        'link',
        // 'divider',
        // 'code',
        // 'codeblock'
      ],
      hooks: {
        // 图片上传的 hook
        // https://github.com/nhnent/tui.editor/issues/57
        addImageBlobHook: function(file, callback) {
          // callback(blob, 'alt text');
          function callback_for_image_upload(image_url){
            console.log(image_url);
            let img_url = get_full_image_url(image_url); // 图片URL 只有一部分，我们这里处理成 https://img.wittcims.com... 这样的全地址
            callback(img_url, 'image');
          }
          self.upload_file_with_callback(file, callback_for_image_upload);
        }
      }
    });

[cavo789]

Amazing; thanks

[rickywu]

@1c7 Is yourUploadingLogicHere capture base64 code and save as image in server side?

[1c7]

@rickywu Hi,

I am not using tui.editor anymore.

I been using it for like a month (2018 July to August) And I decide to drop it.
Because as I customize the tui.editor more and more, it become increasingly painful.
For my project, user can write new article. the experience is important.
tui.editor just not up to the task.

I am using Quill editor now.

so far so good. Quill have 19,000 Github Star. also have their own data represent model call Parchment & Bolt. use native DOM for editor is horrible, (as many article point out) that's why they invent a new way to represent data&format. (called Delta, actually just JSON)

Quill only have 3 new concept: Delta, Parchment, Bolt.

but on the other hand. Quill is not perfect.

document can still be improve. there should be more example about Parchment & Bolt.

if I want make image have a text right below. and user can write image description. it's still difficult to do.

if I want image upload have a circle progress bar cover the image(show 10%.. 20%.. etc), it's still difficult to do. (I saw a module for that. haven't try yet)

build a good editor is really really hard

[rickywu]

@1c7 My requirement is let user can edit document online and the document contents is resolvable and traceable and comparable format, such as markdown

Also user can export doc/docx to my target format, seems Quill support json format, I'll try it

Do you have any suggestion?

[1c7]

@rickywu sorry no suggestion, I never code a similar system (like the one you describe) before. seem quite complex.

[1c7]

Since I am not using tui.editor anymore. I am gonna close this issue.

Anyone want keep commenting under this issue are welcome

[shanhuiyang]

I would like to customize the popup file select dialog, find no way to do that yet. It seems like tui.editor gives little ability to make developers can customize the style of UI.