Jump to the post that solved this thread.
Solved: 1 Month, 4 Weeks ago Clipboard image data - sceditor
#1
Solved: 1 Month, 4 Weeks ago
Mentioned in other threads, don't want base64 image data in our database.  Usually pasting such data fails because of database character limits - but if the image is small enough - it will work.

Finding these posts is not a problem, but any ideas to prevent this from happening?

cheers...
Reply
#2
Solved: 1 Month, 4 Weeks ago
I'd imagine it's a limitation of the attachments system, we'd have to capture the pasted image and upload it as an attachment, and I don't think it's set up to do that.
MyReactions - All Plugins

Can you still feel the butterflies?

Free never tasted like pudding.
Reply
#3
Solved: 1 Month, 4 Weeks ago
I'd be happy if I could capture such attempts - and reject them.  Something with preg_match logic to trigger an outcome.  We use Shade's MyDropZone to replace / supplement the attachment system.  Which I believe is now a free MyBB plugin.

@Crazycat's ABP Restrict url gives me some ideas.  Super plugin BTW.  Big Grin 

All the posts I've found in our database have "%base64%" in the posts / message field.  Can find them with the search page too.   Of course doing that is probably a plugin as well. Smile
Reply
#4
Solved: 1 Month, 4 Weeks ago
This is a standard function of this editor in WYSIWYG mode. It automatically recognizes copy&paste images and inserts the image as data:image/filetype;base64 to the post content.
Yes, depending on the image size and format, this may cause issues with a charcater limitation of mybb_post.message.

To prevent this at all, you need to edit the editor hard code - so make it dismiss any copy&paste images.

When I remember right, set the editor to source mode will avoid this behaviour.

[ExiTuS]
New Forum / MyBB 1.8.26 + innovative full-responsive Theme
Live-Escape-Game-Forum
Reply
#5
Solved: 1 Month, 4 Weeks ago
Source mode does seem to prevent pasting of image data.  But that would mean forcing that mode on users, and prevent them from toggling to WYSIWYG.

Pasting images into the database is still undesirable behaviour from our perspective.
Reply
#6
Solved: 1 Month, 4 Weeks ago
to disable base64 image in sceditor check this https://github.com/mybb/mybb/issues/4078...-651064741
Reply
#7
Solved: 1 Month, 4 Weeks ago
Then I guess the only options to remedy:
- Force Source Mode
- Modify editor code to prevent Data-URI
- Switch to another standard editor

[ExiTuS]

Edit - Crosspost
Thanks martec for this tip.

[ExiTuS]
New Forum / MyBB 1.8.26 + innovative full-responsive Theme
Live-Escape-Game-Forum
Reply
#8
Solved: 1 Month, 4 Weeks ago
Where you guys wanna upload the file?
I have a neat solution. I may push a PR for this as well.
Reply
#9
Solved: 1 Month, 4 Weeks ago
Alright, this is a quick one to enhance paste and drag/drop image (I am in a hurry, I can't write a tut now):

This will solve your problem uploading the file to IMGUR. For that your Imgur anon Client ID is required.
If you need to upload to other image host or even in your own site - you need to write a separate function.

1. First, download the attached SCE plugin file and upload to jscripts/sceditor/plugins folder.
2. Replace your codebuttons template with following:
<link rel="stylesheet" href="{$mybb->asset_url}/jscripts/sceditor/themes/{$theme['editortheme']}" type="text/css" media="all" />
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/sceditor/jquery.sceditor.bbcode.min.js?ver=1822"></script>
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/bbcodes_sceditor.js?ver=1823"></script>
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/sceditor/plugins/undo.js?ver=1821"></script>
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/sceditor/plugins/dragdrop.js?ver=1826"></script>
<script type="text/javascript">
var partialmode = {$mybb->settings['partialmode']},
imgurClientID = '<YOUR_IMGUR_CLIENT_ID_HERE>',
opt_editor = {
plugins: "undo, dragdrop",
format: "bbcode",
bbcodeTrim: true,
style: "{$mybb->asset_url}/jscripts/sceditor/styles/jquery.sceditor.{$theme['editortheme']}?ver=1823",
dragdrop: {
allowedTypes: ['image/jpeg', 'image/png'],
isAllowed: function (file) {
return true;
},
handlePaste: true,
handleFile: function (file, createPlaceholder) {
var placeholder = createPlaceholder();
imgurUpload(file).then(function (url) {
placeholder.insert('<img src=\'' + url + '\' />');
}).catch(function () {
placeholder.cancel();
});
}
},
rtl: {$lang->settings['rtl']},
locale: "mybblang",
width: "100%",
enablePasteFiltering: true,
autoUpdate: true,
emoticonsEnabled: {$emoticons_enabled},
emoticons: {
// Emoticons to be included in the dropdown
dropdown: {
{$dropdownsmilies}
},
// Emoticons to be included in the more section
more: {
{$moresmilies}
},
// Emoticons that are not shown in the dropdown but will still be converted. Can be used for things like aliases
hidden: {
{$hiddensmilies}
}
},
emoticonsCompat: true,
toolbar: "{$basic1}{$align}{$font}{$size}{$color}{$removeformat}{$basic2}image,{$email}{$link}|video{$emoticon}|{$list}{$code}quote|maximize,source",
};
{$editor_language}
$(function() {
$("#{$bind}").sceditor(opt_editor);

MyBBEditor = $("#{$bind}").sceditor("instance");
{$sourcemode}
});


function imgurUpload(file) {
    var headers = new Headers({
        'authorization': 'Client-ID '+ imgurClientID
    });

    var form = new FormData();
    form.append('image', file);

    return fetch('https://api.imgur.com/3/image', {
        method: 'post',
        headers: headers,
        body: form
    }).then(function (response) {
        return response.json();
    }).then(function (result) {
        if (result.success) {
            return result.data.link;
        }

        throw 'Upload error';
    });
}
</script>


REMEMBER to replace <YOUR_IMGUR_CLIENT_ID_HERE> with your original Imgur Client ID.

Save the template.

Your editor will now support drag and drop image upload as well as paste from clipboard image upload.

Note: Its a tested code. Don't come up with "dat no work". Applied to the blank installation here for testing...
https://dev.eff.one

[Image: 115099051-23663400-9f51-11eb-82f6-b709437b8b84.gif]


Attached Files
.js   dragdrop.js (Size: 6.16 KB / Downloads: 31)
Reply
#10
Solved: 1 Month, 4 Weeks ago
Thanks guys - I'll look at both of those options.  Have a test system I can fiddle with.

P.S.  Not a fan of "that don't work" posts either. Big Grin
Reply
Jump to the post that solved this thread.


Forum Jump:


Users browsing this thread: 2 Guest(s)