I'd like to reload certain elements in my page via ajax whenever a tinymce window gets closed but I can't find any references to any event calls that I can use. This page mentions an onClose event but I can't find its page in tinymce api.
No, there is no onClose event, but you my user the onRemove event. Here is the configuration init code for this
// Adds an observer to the onRemove event using tinyMCE.init
tinyMCE.init({
...
setup : function(ed) {
ed.onRemove.add(function(ed) {
console.debug('Editor was removed: ' + ed.id);
});
}
});
Related
Am trying to use $document.on("dialog-ready", function() { .. } for touch UI dialog customization. Where as i can see the dialog-ready event fires before the dialog content is fully loaded which gives me a unavailability of tags for traversal of dialog html.
Is there any event listener that i can use for triggering a call after my
dialog is fully loaded with all widgets and its values.?
Is there any documentation link where i can find these event
listeners apart from Adobe Experience Manager Help | Using Event
Handlers in Adobe Experience Manager Touch UI Components .?
Also what is the order of sequence AEM loads $document.on("dialog-ready", function() { .. } when compares with $(document).on("foundation-contentloaded", function (e) { .. }.
?
Dialog ready is fired when a dialog is opened. Not necessarily after all values are populated.
Foundation contentloaded is fired when new fields are injected into the dialog. More specifically, according to the documentation, "it should be triggered when a container is injected".
So using foundation-contentloaded is ideal when working with multifields where new fields get added much later. Also, dialog-ready will not be fired in page creation wizard. We have to use foundation-contentloaded here.
Neither of the two will guarantee that all content will be populated for us to start using their values in JavaScript. Especially when we have RTE/multifields in our dialog.
To answer your question,
There are no event listeners that you can use that indicates the dialog is fully loaded.
I noticed foundation-contentloaded fires before dialog-ready
Coral.commons.ready ensures initialization. Especially helpful when working with multifields and RTEs.
Coral.commons.ready(this, () => {
/*
logic to run once coral element 'this' is pointing to is initialized (initialize or _render methods are invoked)
*/
});
More information on foundation-contentloaded and Coral.commons.ready
You can use:
$(document).on("foundation-contentloaded", function(e) {
var container = e.target;
});
Check this link.
Here are more examples:
https://helpx.adobe.com/experience-manager/using/creating-touchui-events.html
I have a requirement where i need to display side by side a source code editor and a wysiwyg editor such as tinymce . The idea is that the user should click on any element inside the wysiwg editor and the corresponding element should highlight in the source code editor.
So far i have been able to get the selected node in tinymce by using the onnodechange event
setup: function(ed) {
ed.on('NodeChange', function(e){
console.log(e.element);
});
}
but, the event doesn't fire when the editor is in readonly mode. Do you know why this is happening or can you suggest me a way to overcome this issue ?
I have found a workaround by adding the following inside setup callback
//prevent user to edit content inside tinymce
ed.on('PostRender', function(e){
ed.getBody().setAttribute('contenteditable', false);
});
ed.on('KeyPress', function(e){
e.preventDefault();
e.stopPropagation();
});
It's not perfect, but at least, it does the trick ;)
I had a similar problem, but we needed to intercept the click event, not "NodeChange".
I resolved by adding the event handler directly on the body element of the tinymce iframe and using the event target.
bodyEl.addEventListener('click', function(e) {
console.log('Hello ', e.target);
}, false)
If you need to detect selection change, you could use the 'select' event.
I am using TinyMCE 4 but the documentation is terrible. I am trying to provide a live preview of the content in another div (outside of the editor). Right now I am listening to these events:
$(document).on('tinymce:changed tinymce:init', ...)
This is working when text is entered, but it does not trigger when commands are executed (changing existing text to bold for example).
It looks like in TinyMCE 3.x there is an onExecCommand event that does what I want. But I can't find any documentation on how to listen to the global jQuery event like I am doing with with change and init. Does anyone know what event it is firing?
In the migration guide you can find the following example:
// Old event
editor.onInit(editor, args) {
// Custom logic
});
// New event
editor.on('init', function(args) {
// Custom logic
});
So the one problem is to get right event name and the right editor instance :)
The onExecCommand() event becomes 'ExecCommand' in v4.
So adding a handler on command execution should be like this (be sure that editors are already initialized when executing code below):
for (ed_id in tinymce.editors) {
tinymce.editors[ed_id].on('ExecCommand', function(args) {
alert(1);
});
}
For some reason this event fires twice when command is executed. I think you will overcome this issue.
Though this method does not uses jQuery bindings, it works for me and possibly will solve your problem too.
In case this helps anyone else, here is a list of all the events tinymce 4 allows:
http://www.tinymce.com/wiki.php/api4:class.tinymce.Editor
I've got an Ajax update happening to my MVC view. It displays a message telling the user the operation has completed:
<% if (ViewData["colorOptionsMessage"] != null) { %>
<span class="ajaxMessage"><%= ViewData["colorOptionsMessage"] %></span>
<% } %>
I want to atuomatically fade this message out once it appears, and I'd like to do it once, and have it work site-wide. This is what I tried, which doesn't work (the message appears, but the alert does not show):
$(function () {
$(".ajaxMessage").live("load", function () {
alert("once I can get this to show I'll put in a jueryUI fadeOut"); });
});
EDIT
Just to be clear, I don't need help with the fade out code; I just need help getting this call to Live() to wire up properly.
There's no direct way to be informed automatically when new elements are added to the page. $('.ajaxMessage').live('load') would only happen when the load event fires on an image, iframe or object/embed/applet with class="ajaxMessage", a load event is not fired with its own target for every new element that enters the page.
You could only do this by (a) DOM Mutation Events, which generally aren't widely enough supported, or (b) constantly polling to fetch the .ajaxMessage selector and seeing if any new elements appear in the results.
Better to manually $('.ajaxMessage', function() {...}) immediately after (potentially) adding the content to the page, in the ajax() method's success handler.
ETA:
that jQuery handler doesn't seem to execute after an ajaxForm success
If you can't catch success directly you could try registering a global success handler using ajaxSuccess.
The code below expects you made the Ajax call through jQuery. if the ajax call was not through jQuery, then ignore this answer. Could we see the ajax call itself?
<Script type="text/javascript">
$(function () {
// this is a jQuery global ajax event that fires for every ajax, you need to check the URL
$.ajaxSuccess(function(e, xhr, settings){
if (settings.url == 'URI/ for/ajax /message/load.') {
alert("once I can get this to show I'll put in a jueryUI fadeOut");
}
});
);
</script>
When i want to add something, wait a few, and hide it, I use setTimeout function instead of live events. I add the code on the success callback.
This is a 1 second wait:
setTimeout(function(){ $("ajaxMessage").fadeOut(); }, 1000)
Of course, if you dont want to wait, just fadeOut the element in the success callback.
Can this be enough for you?
I dont think you can bind load to span.
only to IMG IFRAME BODY
As I know "ready" and "load" events are not supported by jQuery in "live". So you can use plugins as this one http://startbigthinksmall.wordpress.com/2011/04/20/announcing-jquery-live-ready-1-0-release/
Here is the demo http://cdn.bitbucket.org/larscorneliussen/jquery.liveready/downloads/demo.html
I want to handle the event in the case of link by my own event listener.If we click on a link in browser, browser will open the address given in the link but i want to call my own event listener. I tried to do it in GWT by removing the attribute of the anchor tag which worked but it is not a clean solution.
So if you are having any idea how to block the browser from opening that link please reply.
In GWT 1.6 the correct code is:
ClickHandler foo = new ClickHandler() {
public void onClick(ClickEvent event) {
/// do your stuff
event.stopPropagation(); // stops the event from bubbling to parent
event.preventDefault(); // prevents the browsers default action,
// following a link, etc
}
}
This is roughly equivalent to:
Link
Isn't that what this widget does:
http://google-web-toolkit.googlecode.com/svn/javadoc/1.6/com/google/gwt/user/client/ui/Hyperlink.html
eg: it looks like a normal hyperlink but lets you handle the onclick event?
You can just call event.cancel() (GWT 1.6) or
Event.getCurrentEvent().cancelBubble(true); // In 1.4 and earlier
DOM.eventCancelBubble(DOM.eventGetCurrentEvent(), true); // In 1.5
There is also a method to cancel an event from its instance within GWT 1.5, but I can't remember.