ckfinder select multiple files - javascript

For a photo album I would like to use ckfinder to select (and upload if needed) what images you want to use within the photoalbum. But having to select one by one is obviously not the best user experience.
Is there any way where you can select multiple files (by either dragging or ctrl clicking) using ckfinder? I read the ckfinder API documentation but I can't seem to find anything about this. Is there maybe a plugin available for this or how would I go about making a plugin for this?

Currently CKFinder doesn't have such option.
You should add this request in the CKFinder forums so the developers realize how many people want it (I think that there should be already a thread about it, so you can add a "me too" there)

CKFinder does support this function.
Click "Upload"
Ctrl select whatever images you want in your photo album
Click "Open"
And you are good to go.
If you are using the free version this may be the problem.
Go to http://ckfinder.com/demo and try out what I just said.

CKFinder now supports this function, also see: http://cksource.com/blog/CKFinder_2.3_Released

Related

How to get all the icons from the fontawesome js library?

I have included the font-awesome v5.12.1 library via CDN. Now, I want to get the list of icons or icon text to display as a select option. Is there any way to get the list of icons from the font-awesome js library as array so that I can display as dropdown.
I use their archive which has a file metadata/icons.json which provides that (and other useful) info and I've then used Datatables to build something similar to their list.
I'm not sure if this file can also be taken from CDN, but you may want to try https://github.com/FortAwesome/Font-Awesome/blob/master/metadata/icons.json for the latest. (Caveat: could be different from CDN)
You may also want to check out this question and its answers which may help.

Is it available to change the webviewer button icon of 'annotationStyleEditButton' & ' annotationDeleteButton'

I want to change the icon of 'annotationStyleEditButton' and 'annotationDeleteButton' to a self designed PNG, I would like to know is those buttons are available to change the icon?
I just found a method to change the Tools icon by using updateTool(), but seems we cannot change the 'style' and 'delete' button?
There are ways to change the icons but unfortunately, there are no APIs to do it. This is mainly due to the UI being completely open-source and open to everyone to customize and also contribute to. You are free to clone, download, or fork our repo here: WebViewer UI Repo. You will need some knowledge of React (and maybe some redux) but it should be relatively easy to pick up.
To change the icon, you will have to change the img property of the ActionButton to use your images in the AnnotationPopup component. Alternatively, you could also just use HTML buttons and images if you would like. You can find a guide on advanced customizations here: Advanced Customization. Once you do have the UI built, it will generate a build folder in the root directory. Simply copying this folder and replacing the one under lib/ui should update it to the one you just built.
As a last resort, you could always use some vanilla JavaScript to swap out the icons for your own. A query with the DOM can get you those elements to change:
document.querySelector('iframe[title="webviewer"]').contentDocument.querySelector('div[data-element="annotationStyleEditButton"]');
I would recommend sticking to the WebViewer UI method to avoid any unwanted results. It would also be better to own your UI as opposed to using this intrusive method.
Let me know if this helps!

How to extend tinymce's media plugin?

TinyMCE already has a bunch of nice plugins out of the box. One of them - media plugin - wich i would like to extend.
Problem: I use an exterenal Video service with an API. In order to play video on the page, i need to embed it with an iframe. The iframe-code - especialy the src-attribute - can be generated only on the server by specific page_id and video_id and some other data from database. So whoever tries to embed a video from that particular video-service needs an already generated iframe-block or at least a generated url and that is the problem.
Goal: Somehow extend tinymce' functionality. Ideally the "media" plugin.
I would like to add either a new input-field to "General" tab or create a separate tab with additional input fields. Something like that:
or
Question: What would be the best (or simplest) way to achive this ?
The best, and only, way to achieve this is to edit the code (plugin.js) of the media plugin (the non-minified files can be downloaded here https://github.com/tinymce/tinymce)
Adding a tab and fields to the interface can be done by extending the tabpanel (in the file around line 155). And furthermore writing the code to submit your fields to the editor. I have worked with plugins in tinymce before and must say it can be a complicated matter.
A very short introduction on plugins in tinymce can be found here: http://www.tinymce.com/wiki.php/Tutorials:Creating_a_plugin
Good luck!

How to create a fancy File Upload button?

I know already a lot of questions have been asked on this topic, and probably the best answers to such questions are referred to the quirksmode website,
I want you to have a look at this page
http://dekho.com.pk/new
there is an upload button for uploading an image,
I just want to know "how you create such a button"?
Thanks in Advance!
Uploadify™ is a jQuery plugin that allows you to easily add multiple file upload functionality to your website. Two distinct versions (HTML5 and Flash) allow you the flexiblity to choose the right implementation for your site and fallback methods make it degrade gracefully.
demo link
Extreme Customization
Multiple File Uploads
Drag and Drop
Real-Time Progress Indicators
Custom Upload Restrictions
We finally decided to use UniformJS file control and so far are happy with it. It's quite easy to setup and (so far) not as buggy as other implementations.
But there's more than one way to do it, of course. The common trick is to make a file control transparent (with opaque: 0 rule) and show an image underneath. This way you don't simulate a click event on file inputs (as IE prevents submitting of "artificially" activated file inputs). Here's a detailed explanation of this process.
Uploadify™ is a jQuery plugin that allows you to easily add multiple file upload functionality to your website. Two distinct versions (HTML5 and Flash) allow you the flexiblity to choose the right implementation for your site and fallback methods make it degrade gracefully.
demo link
Extreme Customization
Multiple File Uploads
Drag and Drop
Real-Time Progress Indicators
Custom Upload Restrictions

Javascript context menu for images

I have a website where lots of people copy images off it, which is fine. What I do want to do, however, is help them embed it on the target website they are going to.
Ideally this would take the form where when a user right clicks the image a context menu will appear giving them easy options to embed or share the image.
What is the best way to do this?
P.s. I don't care about them hotlinking, or saving the images at all, all I want to do is provide the user with an easier way to share the images!
Don't send the image to their browser.
No. You can prevent the common user from bothering, but the fact is the URL is sent to the browser to download. So at the very least I could view the source and figure it out.
If you really want to try to annoy the user, though, you can attach an oncontextmenu event which will capture the right-click in some browsers.
edit:
In response to your comment..
Since you're using jQuery, you can use this plugin to detect right clicks. It has been tested on most browsers.
You can then use something like SimpleModal to display the modal box you want to show the user..
$('img').rightClick(function (e) {
$.modal(...);
});
You can actually render HTML as embedded mime data in all major browsers except for IE:
http://jimbojw.com/wiki/index.php?title=Data_URIs_and_Inline_Images
Another weird, but workable solution is to convert the image to CSS:
http://elliottback.com/wp/convert-image-to-css/
Neither is really that great a solution, but it highlights the fact that you need to be willing to lose an image by just putting on the web.
Even if you use a plug-in, people can just do a screen capture.

Categories