Adding a button in CKEditor for KCFinder - javascript

I have CKEditor running with KCFinder integrated and working, but the application will be used by people with little-to-no computing experience and I would therefore like a button in the CKEditor toolbar which looks like the current Image button but jumps straight to KCFinder.
If you imagine looking at CKEditor, clicking "Image" then "Browser Server", I'd like to basically cut out the middle step of CKeditor's initial popup.
Ideally though, users would still be able to right-click on the image and click "Image Properties" to view CKEditor's popup.
Any help appreciated!

Requires a custom plugin and cannot be accomplished as easily as hoped.

Related

How can I save the content of tinyMCE before destruction? (close tab, navigate etc.)

We have a webpage which has a tinyMCE editor tied to a DB. In this webpage we have some buttons like „Help”, „Settings”, „Logout” which can 'erase' (let's use this terminology) the content of our tinyMCE editor, because these buttons open another layout(s) in which, of course, the editor is absent.
We want to trigger our „Save to Db” subsystem when the user:
Clicks anyone of buttons which destroy the editor (see above)
Destroy the tinyMCE editor by closing the tab / browser.
Destroy the tinyMCE editor by navigating somewhere else (eg. from ourSite.com to google.com)
Now we tested all the above and (of course) the content isn't saved.
How can we achieve this automatic save on destroy?
The solution must work on Chrome/Edge, Firefox and Safari.
Notes:
we tried this demo: https://fiddle.tiny.cloud/hRhaab/2 (hooking the „remove” event) but it doesn't seem to work.
an alternative popup with „The data is not saved. Do you want to continue?” is also acceptable.
the data is rather small. No images, just some text (few A4 pages at most).
in the case of buttons, we try to avoid the obvious solution by writting a DoSaveMyEditor() under each button
Any help?
You can utilize the TinyMCE Autosave plugin. It does the job by itself but saves the data to local storage. However, it can be identified by setting an autosave_prefix and then taken out of the storage and uploaded to your DB.

Javascript automation to add add-on tool to the toolbar in Acrobat

Hello everyone,
I am a complete beginner in developing Acrobat functionalities, and I had been given a task of adding a button to the toolbar, which on pressing would display a pop-up, using Javascript. I was able to add a button to the add-on toolbar and then I manually added the button from the add-on tools to the toolbar. I have been asked if this manual addition could be automated, I went through the Javascript API reference and found that it provides the execMenuItem method but it only is able to perform some commands such as Save As. Could it be possible to write a script that would automate the manual addition ? The manual addition that I am talking about is Going to View -> Show/Hide -> Toolbar Items -> Customize Quick Tools
I am aware that we can add a button to the toolbar directly using plugins but that would require developing in C++, and our team is trying to explore functionalities that could be achieved using JS scripts
Thanks
You can use addToolButton() from page 100 of the JavaScript for Acrobat API Reference to achieve similar functionality.
However it appears that adding to Quick Tools is not supported through the JavaScript API, according to one AcrobatUsers post:
Note that as of version X you cannot place a button on the toolbar automatically, no matter what code you write - it will ALWAYS appear on the Tools Pane, down at the bottom corner - from where the user has to manually drag it into the Quick Tools area.

How do I create an options popup dialog using firefox addon sdk?

So I decided recently to create a firefox extension I have been thinking about, but do not have any prior experience with it. I read on the official tutorials and figured that the addons sdk seemed to fit me well, but I seem to have hit a hitch using it.
What I want to do is create an options popup dialog, similar to the one you see if you press alt-tools-options. That is, a border with title and close button on the upper part, and a bigger area inside the window where I can define an "intuitive" (default elements with the skin the user is used to) GUI.
The tabs at the top (general, privacy security etc.) is nothing I really need, though would not hurt either.
So the issue is that from my searches, when you use addon sdk, you are not supposed to use XUL which has those elements, but instead you seem to be supposed to create something custom using HTML in a panel. I don't think its possible to create the top-bar akin to the real options-menu when using that, although if I am wrong I would not mind being corrected.
I had a similar issue before, where I wanted a drop-down menu from the toolbar similar to the default ones, which I solved thanks to: How to add a dropdown menu to a firefox addon sdk powered addon toolbar button?.
Might be worth noting that that the button opening the options dialog is one of the menuitems created as described there.
I was considering that it could probably be possible (aka I am not sure) to use something akin to this, but sadly I do not know how I would create a "separate" (drag-able) popup that I could use this on.
If possible, I would prefer there to exist a solution, but if someone knows that it is indeed impossible, please do post that so and I can give up without regrets and just make some sort of custom HTML panel instead :)
tldr:
Is there a way to create a popup dialog similar (in style) to the options window you can open using alt-tools-options in firefox when developing using addon sdk?
Essentially, you aren't supposed to, at least not with the SDK.
But then again, it is still possible, but you need to do a lot of stuff yourself:
You need to register a chrome: package for your add-on, as the resource: URIs the SDK uses internally do not work correctly for XUL windows. Create a Chrome Registration (chrome.manifest file). The SDK supports this since Firefox 24 IIRC.
Create the XUL file. For preferences/options windows, there is already the <prefwindow> binding. Look at other extensions and or the Firefox Options dialog (which is a huge thing with multiple overlays, so better look at other extensions). Place the XUL file in chrome/content/<somefile>.xul. This will then correspond to chrome://<registered_package_from_1>/content/<somefile>.xul.
Implement something that will actually display the window. Normally non-SDK add-ons would just put em:optionsURL into their install.rdf, to have the Add-On Manager automatically create a Preferences button that will open the specified URL, but in the SDK this is generated from package.json and there is no way to put optionsURL in package.json if I'm not mistaken. But you could do other things, like using a simple-prefs type: control button to have a button in your about:addons page, or add it to some browser menu (which would require yet another heap of XUL-modifying, require("chrome") code.). To actually open the dialog, you could use window/utils.openDialog.
Don't forget to close any open windows again when your add-on gets unloaded.
As you can see, not a simple task...
If you're just after preferences in general, consider using simple-prefs.

Displaying hidden images in the Pinterest Pin Preview pop-up with addThis plugin

I am currently unable to display images on the Pinterest Pin Preview screen that are hidden (with a display: none) on my page. On my page where the "Pin It" button sits there is a standard carousel, but I am looking for all images within that carousel to be shown on the Pin Preview pop-up.
I have the script include on my page as below:
<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#username=xa-USERNAMEINHERE"></script>
<a class="addthis_button_pinterest left last" title="Pinterest"> </a>
When investigating into this issue I came across this post from 2012, which is essentially the same issue I am experiencing. However there is no follow up to it.
I have experimented with the image_container and image_include properties of addthis_config, but essentially I can't seem to find a way to show the hidden images.
Has anyone came across this problem?
I received a reply back from Pinterest Support, as follows:
Hi,
We do offer similar functionality when using our Pin It button in
"Any Image" mode. You can see the code used to generate it by going to
our Widget Builder:
http://business.pinterest.com/widget-builder/#do_pin_it_button
However, there's no way for us to automatically include hidden images.
The one additional functionality that we do offer is picking up the
image stored in the og:image tag on your page, if it exists, so if you
populate that tag with one of the hidden images, it would show up
first in the list. Hope this helps! Bill | Developer Support Engineer
So it seems that as of May 2014 this is not possible.

Buidling an Extension to Trigger an onClick Action in the website?

I'm new to google chrome extensions, but I'm quite familiar with HTML and some javascript. My main area of expertise is Objective-C (but that's a different area).
I wanted to build a chrome extension where I want to replace a website's button with a different custom button (The button uses a specific class/ID). For example if a website were to have a button that said "Tweet Us" I would want to change it to "Email Us", change the onClick action and the button image.
I was wondering if anyone knows of any tutorials or samples that touch on this. Most that I've ran into focus more on building UIs by the bookmark browser, but I don't really have use for that.
Start with reading this.
Add to the manifest.json the URL you want to manipulate under "matches".
Also add to the manifest.json your JavaScript + css (under "content_scripts").
In the JavaScript write some code that deletes the current button and replace it with your button and
your event for that button.
The easiest way to write it is with Jquery.

Categories