Jump to the post that solved this thread.
Solved: 2 Months, 1 Day ago Clipboard image data - sceditor
#11
Solved: 2 Months, 1 Day ago
(2021-04-17, 02:04 AM)effone Wrote: 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]
I am saving this post for later, thank you for this!
Reply
#12
Solved: 2 Months, 1 Day ago
@effone's fix looks very good in early testing.  Just run some more use case scenarios in test - then move into production.  Great work! Smile

Edit:  And no "don't work" comments - lol.  Works very well indeed.  Slick stuff - just what the doctor ordered! Toungue
Reply
#13
Solved: 2 Months, 1 Day ago
(2021-04-17, 03:30 PM)nixer55 Wrote: @effone's fix looks very good in early testing.  Just run some more use case scenarios in test - then move into production.  Great work! Smile

Glad it helped Big Grin

(2021-04-17, 03:30 PM)nixer55 Wrote: Edit:  And no "don't work" comments - lol.  Works very well indeed.  Slick stuff - just what the doctor ordered! Toungue

Don't take it personally. It was not at all pointing at you, instead an generic statement. You know ... people do say that.
Reply
#14
Solved: 2 Months, 1 Day ago
Indeed they do.  When something doesn't work for me - usually assume I messed up. Toungue

Did some more testing, will move onto live board tonight.  Anyway +1 - and thanks.
Reply
#15
Solved: 2 Months, 1 Day ago
(2021-04-17, 02:04 AM)effone Wrote: 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]

i tried to get it to work but when i drag and drop an image file it my browser (chrome) just opens the file
tried it on your test board and same thing happens...
is it browser related?
Reply
#16
Solved: 2 Months, 1 Day ago
No thats not browser related. It seems your textarea is not bound to drop event.
Try the mod from the scratch.

NB. an enhanced PR is already on its way:
https://github.com/mybb/mybb/pull/4359
Reply
#17
Solved: 2 Months, 1 Day ago
(2021-05-08, 11:15 AM)effone Wrote: No thats not browser related. It seems your textarea is not bound to drop event.
Try the mod from the scratch.

NB. an enhanced PR is already on its way:
https://github.com/mybb/mybb/pull/4359

thanks it is working now 
had the dragdrop.js uploaded to the wrong place
Reply
#18
Solved: 2 Months, 1 Day ago
(2021-04-17, 02:04 AM)effone Wrote: 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]


Hi mate, have tried this and I'm having trouble?

I have located the "ckeditor.codebuttons.tpl"

and replaced it with the code and have changed the imgur id 

but doesn't seem to be working?

please help 
thanks 
Reply
#19
Solved: 2 Months, 1 Day ago
This patch is not for CKEditor.
This is for SCEditor which is bundled with MyBB by default. The mod is using an addon of SCEditor only which is no way gonna work with CKE.
Reply
#20
Solved: 2 Months, 1 Day ago
(2021-06-09, 02:13 PM)effone Wrote: This patch is not for CKEditor.
This is for SCEditor which is bundled with MyBB by default. The mod is using an addon of SCEditor only which is no way gonna work with CKE.

Thanks for the reply
Could you provide a video of the replace the code button. 

I have uploaded that file to the correct section, however it is step 2 I'm unable to locate 

I do apologise for my noobness but I've been trying to find a solution for a week now 

thanks heaps 

Dave
Reply
Jump to the post that solved this thread.


Forum Jump:


Users browsing this thread: 1 Guest(s)