TinyMCE 4/5 plugin Flickr image search and place plugin

A drag and drop plugin for the new tinyMCE 4/5 WYSIWYG editor.
Build with Bootstrap

Search for flickr images, see a preview and insert into the tinyMCE 4/5 WYSIWYG editor

You can select some params like title, size, align or open larger image with a lightbox

DEMO

Item Support

BUY NOW !

Thank you for purchasing the TinyMCE 4/5 plugin Flickr image search and place plugin. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here.

General Markup

Drag and drop the flickr folder into the folder tinymce/plugins

Now add 'flickr' to the plugins: and toolbar:

Done !

<script type="text/javascript" src="<your installation path>/tinymce/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
selector: "textarea",
plugins: [
"advlist autolink lists link image charmap print preview anchor",
"searchreplace visualblocks code fullscreen",
"insertdatetime media table contextmenu paste flickr"
],
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image flickr"
});
</script>

<form method="post" action="somepage">
<textarea name="content" style="width:100%"></textarea>
</form>

Click on the icon to look at the demo

User example

Go to
https://www.flickr.com/people/143790323@N04/ and next to his avatar you find the username migueldeozarko

OR

https://www.flickr.com/photos/eugeniocosta/ and next to his avatar you find the username Eugenio GV Costa

Output

If you want to change the output open tinymce/plugins/flickr/js/flickr.js

You will find some settings here which you can change

// Api key ( https://www.flickr.com/services/apps/create/apply/ )
var flickrapikey = 'DEVELOPER KEY HERE';
// Maxresults
var maxresults = '16';
// Search in 'text' or use 'tags'
var searchoption = 'tags';
// User licenses ( https://www.flickr.com/services/api/flickr.photos.licenses.getInfo.html )
var searchlicenses = '4,5,6,7';
var userlicenses = '4,5,6,7';
// Set option to choose lightbox popup
var lightbox = true;
var relname = 'lightbox';


Explanations

First you need a license key from Flickr (yahoo). You can get one for free here

You can set the image license's as described above. Be carefull what licenses you select because not all images are free to use !
You can read more about the different licenses here.

Change to whatever license you want

Search method

If 'searchoption' is set to 'tags' only image tags will be used. When 'text' is set the title, description or tags contain the text will be returned

lightbox

If you set the lightbox to true an a tag will be set around the small image with a link to the bigger image size and a rel="lightbox"

If you use a different rel name for a lightbox just change the 'relname'


For example language

Open tinymce/plugins/flickr/flickr.html. Here you find the html used and a few words which you can change into your own language.

I've used the following files as listed.

JavaScript

  1. jQuery
  2. Bootstrap

Once again, thank you so much for purchasing this plugin. As I said at the beginning, I'd be glad to help you if you have any questions relating to this app. No guarantees, but I'll do my best to assist.

Ceasar