MyBB Community Forums

Does the latest version of MyBB support copy/pasting images into a post? I was referring to a Gmail type editor that allows external images to be pasted in-line in the mail, NOT as an attachment.

Thanks

Yes it is WYSIWYG editor so it supports copy/paste of images.

MyBB parser was not supporting copy/paste images in post as of now.
Like couple of days back we have implemented the support and will be part of v. 1.8.22

https://github.com/mybb/mybb/pull/3808

I think the implementation will use Data URI to paste images to the content without saving the image as a physical file!?
That's a great benefit.

BTW. The SCeditor for example already supports Data URI paste when the image source was copied as Data URI, e.g. Google Images copied from browser will be Data URI that can be pasted to the editor with success. It depends on the source - so if an image is copied as Data URI, we go well by just paste into the editor.

[ExiTuS]

Its exactly as you said.
SCEditor displays the pasted image as preview correct bur after posting it breaks as MyBB parser is not familiar with data URI. With this patch applied it is now successfully parsing the image in post.

And no, it doesn't save the image as separate file.

(2019-09-29, 06:23 PM)effone Wrote: [ -> ]And no, it doesn't save the image as separate file.

However, this might break the forum management on user privileges of uploading attachments & using [img] code, as the image data is stored into the database (in post content) but using a mycode to show.

Besides, the column length of post content will limit the image's size to be correctly stored, I suppose.

Well, the best way may be to save the image as an attachment file.

Privilege of uploading attachments and usage of [IMG] are not same.
I do agree and thought about the column length but this is just the basic support provided at the end of 1.8 era and doesn't really affect unless the post content is too long. Expected we are gonna use a better and efficient parser in future.

If any additional setting or permission is required to be imposed to handle any raised issue for this implementation then that will be discussed and handled separately. The PR is about providing support of data URI to parser, saving the image converting to additional file is just opposing the effort by definition.

(2019-09-30, 10:15 AM)effone Wrote: [ -> ]Privilege of uploading attachments and usage of [IMG] are not same.

I do agree and thought about the column length but this is just the basic support provided at the end of 1.8 era and doesn't really affect unless the post content is too long. Expected we are gonna use a better and efficient parser in future.

Yes, you're right, but my point here is the image using a data URI is stored locally in database -- like an attachment rather than an image with a remote URL -- but shown using an [img] code. Users post such images in forums that forbid uploading but allow using [img] code may leverage this trick to bypass the permissions/limitations on uploading attachment.

But for inexperienced normal end-users, they just copy and paste an image in a WYGIWYS editor and want it show in the post/PM. If the image is added by a remote link, yes the [img] code is the best way to show it. If the image is added by a data URI, just like OP said what OP wants, probably most forum owners want, is treat the image as an attachment like how Gmail does.

(2019-09-30, 10:15 AM)effone Wrote: [ -> ]If any additional setting or permission is required to be imposed to handle any raised issue for this implementation then that will be discussed and handled separately. The PR is about providing support of data URI to parser, saving the image converting to additional file is just opposing the effort by definition.

I think it's best to expect the WYGIWYS editor to work with additional data URI resources during posting, rather than to expect a parser to parse additional resources in posts/PMs content which don't really fit in database with the column of the posts/PMs content which is called message.

Nevertheless, it's great to have a quick fix of raw data URI shown in post content. Seems a lot of stuffs need to be handled using a WYSIWYG editor.

We can have a different valid view as the topic itself is odd.
What I thought is we should not manipulate or tamper user input data, if the user is providing a data URI knowing or unknowingly we should carry the same.

We can have further discussion for this, if required; here or in discord as the concerns you've stated are valid too. If a different approach is required that can also be adapted. Thanks for your concerns @noyle

I'll mark this to Euan for his value addition as well.

(2019-09-30, 11:31 AM)effone Wrote: [ -> ]We can have a different valid view as the topic itself is odd.
What I thought is we should not manipulate or tamper user input data, if the user is providing a data URI knowing or unknowingly we should carry the same.

We can have further discussion for this, if required; here or in discord as the concerns you've stated are valid too. If a different approach is required that can also be adapted. Thanks for your concerns @noyle

I'll mark this to Euan for his value addition as well.

Thanks for reading my comment.

Actually, IMO, what the end-user has inputted is an image, regardless of its form, either a link, a file or a data URI. Well then it should be MyBB's job to "parse" (not the job of the parser mentioned above) the user's input with care and save the data, again either a link, a file or a data URI, as a piece of text or encoded text, or an attachment file, or some forms else.

BTW, when I was writing Merge modules, I see some boards save images into database as blobs. So it'll be great to see MyBB maintain its consistency on data storing.

---

(2019-09-29, 12:05 AM)jtapp Wrote: [ -> ](...)

I was referring to a Gmail type editor that allows external images to be pasted in-line in the mail, NOT as an attachment.

(...)

Oh, sorry I didn't read the thread carefully.

Well, I think it should be the SCEditor to be blamed, and.. this should be a separated issue/topic as well.

IIRC, some WYGIWYS editors parse user pasted input (rich text?) containing images with only image URLs but not images themselves. Years ago, TinyMCE should do this way.

Well, just make my mind clear here:

• For an existing external/remote image, the editor should be able to get the link of user pasted image, and insert a [img]https://[/img] like text into post content.
  
• For a local image, the editor will just insert the image content as encoded text, and MyBB will do some dirty job like save this image as an attachment file upon processing post submitting.
  

---

More info on copying and pasting an image:

Discourse does the work in the similar way I've said above. via: https://meta.discourse.org/t/firefox-has...or/39345/6 in an old version to trick Firefox's behavior. It seems that it's a bit more difficult for MyBB/SCEditor to well handle images pasted by end-users across browsers.

Quote: https://github.com/discourse/discourse/b...s.es6#L276

            if (contentEditableDiv.html().length > 0) {
              // If the image wasn't the only pasted content we just give up and
              // fall back to the original pasted text.
              contentEditableDiv.find("br").replaceWith("\n");
              restoreSelection(contentEditableDiv.text());
            } else {
              // Depending on how the image is pasted in, we may get either a
              // normal URL or a data URI. If we get a data URI we can convert it
              // to a Blob and upload that, but if it is a regular URL that
              // operation is prevented for security purposes. When we get a regular
              // URL let's just create an <img> tag for the image.
              const imageSrc = pastedImg.attr('src');

              if (imageSrc.match(/^data:image/)) {
                // Restore the cursor position, and remove any selected text.
                restoreSelection("");

                // Create a Blob to upload.
                const image = new Image();
                image.onload = () => {
                  // Create a new canvas.
                  const canvas = document.createElementNS('http://www.w3.org/1999/xhtml', 'canvas');
                  canvas.height = image.height;
                  canvas.width = image.width;
                  const ctx = canvas.getContext('2d');
                  ctx.drawImage(image, 0, 0);

                  canvas.toBlob(blob => this.$().fileupload('add', {files: blob}));
                };
                image.src = imageSrc;
              } else {
                restoreSelection("<img src='" + imageSrc + "'>");
              }