I've looked at the CKEditor 5 documentation, but still can't work out how to get a simple javascript alert('hello') to fire when any balloon editor region is clicked on in my page. Any clues very much appreciated!
Okay, so the answer is actually very simple, just bind an on click event to the element, in this case via the CKEditor class, using JQuery as below:
$(document).on('click', '.ck-editor__editable_inline', function(e) {
// do something
})
Related
I'm making a custom plugin for CKEditor (4.4.7), that extends default image plugin. Inside the plugin I need an event like "when the page/tab becomes visible".
I know about CKEDITOR.dialog's event selectPage. It fires before the actual page (tab) is shown. What I need is an event, that would fire AFTER the page is selected AND visible. I went throughout the docs, but I didn't find anything. Are there any workarounds?
(Not sure if it's not just my ignorance, but I think that ckeditor lacks more events, than just this one.)
Ok, so here is my ugly workaround (inside dialog on show):
I get the DOM id of a child element of the tab(page) using
var childElementId = dialog.getContentElement('tabCkeditorId', 'childElementCkeditorId').domId;
Using jquery I find the closest element with attribute name="tab/page ckeditor id", because I haven't found any way the ckeditor could tell me the DOM id of a tab/page element directly.
var tabId = $("#"+childElementId).closest('[name="tabCkeditorId"]').attr('id');
Well and finally:
$('body').on('mouseover focusin keydown', '#'+tabId, function(event) {
...
});
It is not a truly on page "changed" event, but for my cause it works.
By after page/tab opened, you mean the dialog box is opened, then you (as this is pretty old que) or anyone else trying to achieve this can use below,
editor.on( 'blur', function( dialogShowEvent ) {
alert('Test');
});
More can be found here - https://ckeditor.com/old/forums/Support/Blur-and-focus-fired-when-openingclosing-dialogs
I have the following code, which generates my default CKEditor on my form:
$('#Content').ckeditor({
filebrowserUploadUrl: '/ControlPanel/Reviews/UploadReviewImage/'
});
As you can see, my implementation is quite simple - most settings are controlled in config.js and are global to my site, except the uploader handlers.
Been looking for a few days, but can't find anything concise. I need to be able to detect when CKEditor is clicked, and make the window larger (though not full screen). I also want to display some help text when CKEditor is clicked... but I can't figure out how to handle dom events, or apply JQuery events to it? I've tried a few different things, the following being my latest attempt:
$("#Content").ckeditorGet().click(window.showDescription);
But I get a TypeError:
Uncaught TypeError: Object #<Object> has no method 'click'
Which is understandable, as CKEditor has its own event system.
The CKEditor documentation seems very unintuitive - and the examples aren't really much help.
UPDATE
I managed to get this working on my own, though because of thw way I've written my window.ShowDescription function, I needed to pass a JQuery event in to it. Here's the code for anyone interested :)
$("#Content").ckeditorGet().on("instanceReady", function () {
this.on("focus", function () {
this.resize(638);
// Mimic JQuery event for textarea
var originalEditor = $(this.container.$).parents(".input").find("textarea");
originalEditor.trigger(jQuery.Event("focus"));
});
this.on("blur", function () {
this.resize(400);
});
});
As you already suspected, what you did above won't work. The ckeditorGet method returns an instance of an editor, not the DOM element of the editor.
You can use the focus event of ckeditor to determine what to do when the editor receives focus.
Example:
$("#Content").ckeditorGet().on('focus', function(e) {
// do what you want on focus
});
May I suggest enabling the autogrow plugin to change the content area size? It's more generalized to the size of your content, and may work better than trying to resize on your own.
I am working on existing project. I have to detect tinyMCE focusout/blur event to save it automatically via AJAX. I found following existing working code:
// reinit tinymce
$($("#chapterBill div:.module-container")[indexAfter]).find('textarea').each(function(i){
editorId = $(this).attr('id');
tinymce.EditorManager.execCommand('mceAddControl',true, editorId);
});
Can someone tell me that how to capture tinyMCE textarea focusout/blur event ?
Thanks
You do not want to capture textarea focus/blur. Tinymce hides the former textarea and creates a contenteditable iframe in which you can enter/edit content. This content gets written to the former hidden textarea from time to time (eventbased).
In order to capture focusout/blur on the editor you need to set a handler for this on the editors iframe.
Put this code into your tinymce init
setup : function(ed) {
ed.onInit.add(function(ed, evt) {
tinymce.dom.Event.add(ed.getDoc(), 'blur', function(e) {
// Do something when the editor window is blured.
alert('blur!!!');
});
});
},
I too was working on a solution in order to save tinyMCE content dynamically via AJAX. Many answers instruct to set this option in the init, however this convenience was not available to me, due to the fact that the code was being used across several systems. I required a page specific solution, which I was able to implement like so:
$( window ).load(function(){
tinymce.get('id').on('blur', function(e) {
var content = tinymce.get('id');
console.log(content);
});
});
With id being the id attribute set on your textarea element.
I can't figure out how to listen to focus, click, onKeyUp and other basic dom events in ckeditor. In the events summary there is only a few events regarding the lifecycle of ckeditor. And the "textArea" of ckeditor is an iframe, and it's html itself, so it is not clear on what dom node to listen.
It's not a big deal, just do the following, works for focus, blur, click etc.
var ckeditor = CKEDITOR.instances['textArea_id'];
ckeditor.on('focus', fnHandler, context, data, priority);
or a jQuery example :
$(document).ready(function () {
$('#YOUR_TEXTAREA_ID').ckeditor(ckeditor_config);
CKEDITOR.instances.YOUR_TEXTAREA_ID.on('blur', fnHandler);
});
I don't know when this support appeared, but it definitely works for 3.5.x
CKEditor actually has built-in event handling in the object. See this article for an explanation: http://alfonsoml.blogspot.com/2009/09/ckeditor-events.html
So, to catch a modification in a CKEditor instance you could do this:
CKEDITOR.on('currentInstance', function(){modified = true;});
Also, it appears that version 3 has an event processor built into it that's more straightforward: http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.ui.dialog.file.html#eventProcessors
CK is a bit convoluted and documentation has holes, but based on its ability to gracefully handle Word generated HTML it gets my vote as the best option out there.
http://www.jacksasylum.eu/ContentFlow/docu.php
this is the link of jquery plugin which i am using in asp.net page.
when i click on the image of contentflow it shows the image in the next page so my requirement is to remove that link.
so how i can remove that link from the contentflow.js file.
comment this line in contentflow.js
window.location.href=A
You'll need to look in the contentflow.js file for the place where it creates a hyperlink using the image that you've clicked on.
Once you've found that, you can modify the source code so that it doesn't create a link at all, but just displays the image.
there is a canvas element used to show the picture. Using chromes developers tolls, Ive noticed that the canvas element has a click event handler attached. So I`m guessing that if you remove the click event handler, the link will be removed also.
Try this:
jQuery(document).ready(function()
{
jQuery('.content portray').unbind('click');
// removes/detaches any click events from the elements with 'content portray'
//class. Because the canvas has this class.
});
Another approach without having to modify the default ContentFlow behavior is to override the onclickActiveItem event in the ContentFlow options, eg:
var flow = new ContentFlow('MyContentFlowDivID',
{
onclickActiveItem: function(item) {
//empty function overrides default behavior
}
});