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.
Related
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
})
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
Hi i am using a function called LoadCoordinates. My first thougt was i need to read this onload.. but after trying a lot of different codes, i cant..
This is how its triggered normally
$("#address1").blur(function()
{
loadCoordinates("");
});
The problem is to "run" this i have to click the input and then clic the body (so address1 lost focus and blur is triggered)
I have tried to load this on page load using seveeral different codes like
$(loadCoordinates(""));
or this
$(function(){
loadCoordinates();
$("#address1").blur( loadCoordinates );
});
This is not working, i think it has to do something because my select lists are using "SELECT BOX IT" http://gregfranko.com/jquery.selectBoxIt.js/
Anyway..
How can i make or trigger the same as is triggering "blur()" on the address1 input.. but when the page is ready. and after selectbox it has loaded & builded the lists with options..
Thanks
This will trigger blur. You need to make sure you do this before applying any plugin to the element, or have to use the API of the plugin to affect and changes
$("#address1").blur( loadCoordinates ).blur();
DEMO
I want to add a close full screen option to tinyMCE editor. Sometimes users don't know that they have to click "fullscreen" icon from the toolbar to close the fullscreen mode. so in the plug in I've added this:
$('#mce_fullscreen_container').click(function (e) {
e.stopPropagation();
tinyMCE.activeEditor.execCommand('mceFullScreen');
});
However, this is also called when the user clicks inside the wysiwyg area. mce_fullscreen_container is the gray area around the wysiwyg and I want it so that when clicked outside the wysiwyg editor itself the fullscreen mode will close.
I've tried applying .not("#mce_fullscreen_container") which is inside the container without any luck.
The variable named e is the click event. Check the target of the click event and based on that run tinyMCE.activeEditor.execCommand('mceFullScreen'); if appropriate. Fingers crossed that works as I have no way to test it at the moment.
For more advanced TinyMCE programming, look at the setup configuration option which can take a function named that you can use to configure the editor for programmatic events. It's very useful if you need to do multiple things.
http://www.tinymce.com/wiki.php/API3:event.tinymce.Editor.onClick
The example is useful in your context as it may be a cleaner way of getting TinyMCE to do what you want:
// Adds an observer to the onClick event using tinyMCE.init
tinyMCE.init({
...
setup : function(ed) {
ed.onClick.add(function(ed, e) {
console.debug('Editor was clicked: ' + e.target.nodeName);
// check target here to see if it is your close button and if so...
});
}
});
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
}
});