Workaround for Firefox + TinyMCE click script issue?
Hello Umbraconauts,
I have a macro which needs to be editable by non-technical users with minimal support. One thing I don't want is editors clicking in to the preview rendering, editing the rendered output, and thinking that they've actually changed anything. (I know this will happen if it isn't prevented by the interface.)
Ideally, I'd like any attempts to click into the macro rendering to result in the macro editing interface opened. This should be as simple as wrapping the macro output in a div and setting its onclick to something like:
var e = window.parent.tinyMCE.activeEditor;
e.selection.select(this);
e.execCommand('mceumbracomacro');
e.selection.collapse();
This works perfectly in IE, but Firefox doesn't seem to handle clicks into TinyMCE quite the same way. Something in TinyMCE is intercepting the clicks, so that mouse event handlers on elements within the TinyMCE iframe never get fired.
Some workarounds have occurred to me but they either don't work or haven't been practical. For instance:
Have the macro output <script> that hooks in to TinyMCE's builtin event system and handle the clicks there. This would work, except that our TinyMCE configuration forbids <script> elements and we really don't want to change it.
Add a line to the \config\tinyMceConfig.config
that adds a TinyMCE event handle there, instead. Something like: <config key="setup">function(ed) { ed.onClick.add(function(ed) { /* similar code from above */ } ) }</config>This don't work either, though, because Umbraco wraps all the TinyMCE settings in single quote characters.
To be honest, I feel like I'm probably missing a simple workaround here, but dang if I can think of it. Any help would be much appreciated. (I'm on 4.7.0 if it's relevant.)
If anyone is interested, I solved this by writing my own TinyMCE plugin; it registered an event handler on the editor itself, which checks whether a click inside one of my "friendly-editable" macros was made and then pops up the macro editor.
Workaround for Firefox + TinyMCE click script issue?
Hello Umbraconauts,
I have a macro which needs to be editable by non-technical users with minimal support. One thing I don't want is editors clicking in to the preview rendering, editing the rendered output, and thinking that they've actually changed anything. (I know this will happen if it isn't prevented by the interface.)
Ideally, I'd like any attempts to click into the macro rendering to result in the macro editing interface opened. This should be as simple as wrapping the macro output in a div and setting its onclick to something like:
var e = window.parent.tinyMCE.activeEditor;e.selection.select(this);
e.execCommand('mceumbracomacro');
e.selection.collapse();
This works perfectly in IE, but Firefox doesn't seem to handle clicks into TinyMCE quite the same way. Something in TinyMCE is intercepting the clicks, so that mouse event handlers on elements within the TinyMCE iframe never get fired.
Some workarounds have occurred to me but they either don't work or haven't been practical. For instance:
<config key="setup">function(ed) { ed.onClick.add(function(ed) { /* similar code from above */ } ) }</config>This don't work either, though, because Umbraco wraps all the TinyMCE settings in single quote characters.To be honest, I feel like I'm probably missing a simple workaround here, but dang if I can think of it. Any help would be much appreciated. (I'm on 4.7.0 if it's relevant.)
If anyone is interested, I solved this by writing my own TinyMCE plugin; it registered an event handler on the editor itself, which checks whether a click inside one of my "friendly-editable" macros was made and then pops up the macro editor.
Would you share that plugin (me being lazy?)
[site root]\umbraco_client\tinymce3\plugins\uxibit\editor_plugin.js
(function() { /* Utility function in lieu of JQuery -- check whether parent element of clicked had uxibit-useeditor class */ function uxCheckParent (elm) { if (elm == null || elm.className === undefined || elm.className.match(/\bmceContentBody\b/)) return false; else if (elm.className.match(/\buxibit-useeditor\b/)) return elm; else return uxCheckParent(elm.parentNode); }; tinymce.create('tinymce.plugins.uxibit', { init : function(ed, url) { ed.onClick.add(function(ed, e) { var p = uxCheckParent(e.target); if (p) { ed.selection.select(p.parentNode); ed.execCommand('mceumbracomacro'); //ed.selection.collapse(); return false; } }); }, getInfo : function() { return { longname : 'uxibit', author : 'Evan Harper', authorurl : 'localhost', infourl : 'localhost', version : "0.1" }; } }); // Register plugin tinymce.PluginManager.add('uxibit', tinymce.plugins.uxibit); })();Neat. Thanks!
is working on a reply...