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
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.
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
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';
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
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
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
I've used the following files as listed.
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