CKeditor 3.0 - How to know which toolbar button is clicked - ckeditor

I want to update few variables when any of the toolbar button (like bold, italic etc) is clicked. I'm unable to trap 'click' event on any of these buttons. Could somebody give me an example when clicking on 'bold' button would also pop up an alert box?
How can I trap 'paste' event?
I've googled a lot and searched ckeditor forum but couldn't find any solution. Any pointer would be really helpful.
Thanks.

I found out how to catch the paste event:
editor.on('paste', your_cb_fn);
However this doesn't seem to work for the button actions:
// does nothing
editor.on('Bold', your_cb_fn);
editor.on('bold', your_cb_fn);
The solution may be to edit the plugins in _source/plugins to create triggers, though that is not ideal.

Related

CKEditor - dropdowns not appended to editors

I have a weird problem with CKEditor. When I click on the styles menu, the dropdown appears, but it's not added to the editor's element, but just on the body of the document.
Thus, when I scroll the page, the dropdown stays where it's at an the editor scrolls.
Kinda hard to explain, I hope the attached screenshot helps to understand.
Anybody having an idea what could cause this?
P.S. - it's the CKEditor that comes with Typo3 and I have multiple instances of ckeditor on my page.

Click Button Inside Telerik RadWindow Upon Opening

Upon the click of a button, the RadWindow in question opens. Immediately after it finishes doing so, I'd like to click one of the buttons within it. Additionally, I'd like for the window to be hidden upon launch. Is there a simple way to do either of these? Any assistance would be appreciated.
In the Javascript the RadWindow is populated from, I used this.
window.addEventListener('DOMContentLoaded', function() {
console.log('DOM fully loaded and parsed');
$telerik.$("#Submit1").click();
});

Drop-down menu/ComboBox/listbox in TinyMce 4?

After doing some research in google for pretty long time found some info on Drop down menu, but the documentation doesn't have clear information for me to understand, or other docs are mostly on TinyMce3. I've customized TinyMce 4 adding a button, menu and sub-menus and have used Window Manager with text box and radio button(which is a checkbox, poor efforts I know), but I need a drop down list/listbox in Window Manager
edit : Radio buttons are not supported in tinymce4
this
helped a lot, I created a fiddle so that might help somebody out there customizing tinymce 4

Detect when user has switched editing modes in CKEditor

In CKEditor, is there an event that can be bound to which fires when the user switches between the WYSIWYG view and the source view?
If not, I need to enable/disable some other controls on the page when the view changes; what's my best strategy?
I'm still unable to find any documentation, but after poking around the internals of a CKEditor instance, I was able to find the event I'm looking for:
instance.on('mode', function() { // Code to execute when the user switches editing modes}
Easy enough. The event fires once when the editor is initialized and again any time the source command is activated (either through instance.execCommand(...) or the user clicking a Source toolbar button).
I have an older version and solved this with
CKEDITOR.instances['terms_and_conditions'].on('mode', function() {
console.log(this.mode); // outputs: source, wysiwyg
});

grails ui dialog

I am trying to do something which I would've thought was very simple, but it's causing me a huge headache. I am using Grails ui plugin to get a dialog box. I have a number of instances - some where dialog boxes need to appear when a button is clicked. This I have got working. But I also need to have some that appear when the page is loaded... for information / warning purposes. But I'm struggling with this.. What should I put as the trigger? I don't want the user to have to click anything before the dialog appears.
Also - has anyone successfully managed to change the style of the gui:dialog ? Mine was originally appearing as text with an invisible background before I added the class=yui-skin-sam to the main.gsp body, but that's had to replace the existing style class I already had on the body! how frustrating !!
Had the exact same problem... got it working by adding "visible=show" to the dialog's attributes. Example:
<gui:dialog title="Modal Dialog" modal="true" visible="show">
This message will appear in a modal dialog when the page loads.
</gui:dialog>

Resources