TinyMCE - fullscreen mode find calling editor - tinymce

I have multiple tinyMCE editors on one page, I'm using :
setup : function(ed) {
ed.onKeyPress.add(function(ed, e) {
//do stuff with ed.id
});
}
This registers the event regardless of whether I'm in fullscreen mode or not, which is what I want.
However, ed.id appears to be different depending on whether fullscreen mode is active or not. What I'm wondering is how can I get a reference to the CALLING tinyMCE editor when this keypress event is running.
For example,
on keypress Editor id = "TinyMCE_editor1" - click on fullscreen mode , and ed.id = "mce_fullscreen". I'd like a reference to "TinyMCE_editor1".
Currently, I can't adequately traverse to the correct position in the DOM to perform what I need, without a reference to the tinyMCE editor which opened the "fullscreen mode" editor.
Any ideas / help appreciated.

You have to use the param "fullscreen_editor_id" passed to the plugin,
then to detect if you are in full screen or not you can use the OR operator (as shown below).
setup : function(ed) {
ed.onKeyPress.add(function(ed, e) {
var editorId = ed.getParam("fullscreen_editor_id") || ed.id;
// Do your stuff
});
},
Hope it helps!

Related

Showing TinyMCE code plugin into the editor, not in popup

I am designing an HTML editor for Windows Forms. I use Geckofx 60.64 and TinyMCE 5.2.0 for this. When everything runs smoothly, this will be a usercontrol.
Here is the screenshot:
And I don't want anything that pops up as a popup in this usercontrol. However, TinyMCE's code plugin opens as a popup.
As in the TinyMCE editor in Wordpress, I want the contents of the HTML code to be displayed in the editor when you click on the code icon and return it when you click the code icon again. But I have no idea how I can do it.
In order to better explain what I want, I also designed a simple image in Photoshop.
The code view in WordPress is not actually using the TinyMCE code view plugin. Rather it extracts the editor contents, loads it into a textarea, allows you to edit, and then it re-invokes TinyMCE and reloads the updated HTML.
If you want a similar experience to WordPress you will have to create the code view behavior yourself.
If you want to use the code viewer that TinyMCE provides it works as a dialog.
I had a similar request (displaying html source in editor) and achieved a pretty simple and (for me) sufficient solution by modifying the initial (open source) code plugin:
var e = tinymce.util.Tools.resolve("tinymce.PluginManager"),
p = tinymce.util.Tools.resolve("tinymce.dom.DOMUtils"),
o = function (o) {
var e = o.getContent({source_view: !0});
var b = o.getBody();
if (b.getAttribute("code") === "true") {
b.setAttribute("code", "false");
b.style.backgroundColor = "white";
b.style.color = "black";
b.style.fontFamily = "Helvetica";
o.setContent(p.DOM.decode(e));
} else {
b.setAttribute("code", "true");
b.style.backgroundColor = "black";
b.style.color = "white";
b.style.fontFamily = "Monaco";
o.setContent(p.DOM.encode(e));
}
};
Instead of opening a new window, it just changes the css of the editor (background, color, font) and sets a data-attribute (enables toggling between the initial view and the code view). The p.DOM.encode(e) then allows to display the html tags.
I'm not very experienced in javascript, but it works good so far. Anyway, feel free to correct / improve things.

ag-grid custom popup editor - allow TAB without exiting

I've been reading through documentation but can't find a way to disable exit on TAB.
I have a custom editor which contains multiple elements. I want tab to work within the popup editor elements instead of having to use mouse for everything.
one possible workaround is to stop propagation of tab key event
onKeyDown(event: any): void {
if ([9].indexOf(event.keyCode) > -1) {
event.stopPropagation();
}
}

tinymce readonly mode event not firing

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.

dojox/gesture/swipe prevents the html select to open dropdown

can anyone please explain to me why the html SELECT control (or any other control like BUTTON) placed inside the div (that is registered with dojox/gesture/swipe events) cannot be opened? I'd welcome any workarounds pls
require({
}, [ 'dojo/dom', 'dojox/gesture/swipe', 'dojo/on', 'dojo/_base/event' ], function(dom, swipe, on, event) {
var div = dom.byId('testSwipe');
var isSwipe = false;
on(div, swipe.end, function(e) {
console.log("### SWIPE");
});
});
http://jsfiddle.net/zLyck884/
based on the documentation here, particularly the image : http://dojotoolkit.org/reference-guide/1.10/dojox/gesture.html
the image depicts how the dojo standardizes the events (also for desktops) and how the swipe is just another layer of the touch events. so I reckoned if the mouse events are replaced by touchstart or something, then it most likely blocks the default mouse action...
once I've stopped propagating the event (on the SELECT) further, then it worked ok.
query("select", this.domNode).on(touch.press, function(e){e.stopPropagation()});
where this.domNode is the element on which the swipe is enabled
on(this.domNode, swipe, lang.hitch(this, "_onSwipe"));
Unfortunately the swipe (touch) event overriding the default behaviour is not very handy, I just left dojox/gesture/swipe or touch for now. Seems like I'll rather implement my own touch event handling.

Add a popup Pane to crossrider add-on icon and bliking icons to the add-on icon

I wanted to migrate my existing add-on for firefox and chrome to crossrider in order to have it also with safari and IE, but i've a few doubts that mayble Schlomo (or any Crossrider developercan) can help me to solve them.
Questions :
Can i add a popup pane when someone clicks on the add-on button showing some kind of options inside it?
Can i add a blinking icon to the actual icon showing some kind of event happened like incoming chat or so?
Is there a way to add the red text box like in chrome showing at the bottom right of the icon some kind of text?
Thanks a lot!
When you pose the question like that, I can only hope the following answers will serve to allay your doubts and enlighten :)
First off, I would recommend familiarizing yourself with How to add a browser button to your Crossrider extension in general and the button popup feature specifically.
In answer to your specific questions:
You can use the button popup feature and build the required options in there. Take a look at the Button Popup Menu demo extension to get you started.
Whilst you can't make the button blink, you can alternate the button icon to make it look like blinking (see example).
In short, yes. Simply use the appAPI.browserAction.setBadgeText and appAPI.browserAction.setBadgeBackgroundColor methods (see example).
The following example bring together the key elements in the background.js code required to achieve the solutions mentioned. Look at the popup.html file in the Button Popup Menu for an example of how to build the options page.
appAPI.ready(function() {
var sid, // Blink interval id
alt=0, // Blink alternation state
icon = { // Blink icons
0: 'icons/icon0.png',
1: 'icons/icon1.png'
};
// Set the initial icon for the button
appAPI.browserAction.setResourceIcon(icon[0]);
// Sets the popup for the button
appAPI.browserAction.setPopup({
resourcePath:'html/popup.html',
height: 300,
width: 300
});
if (true) { // blink condition, set to true for this example
// Blink icon
sid = appAPI.setInterval(function() {
alt = 1 - alt;
appAPI.browserAction.setResourceIcon(icon[alt]);
}, 1 * 1000);
} else {
appAPI.clearInterval(sid);
}
if (true) { // show button text condition, set to true for this example
// Add red text box to icon
appAPI.browserAction.setBadgeText('ext', [255,0,0,255]);
}
});
[Disclosure: I am a crossrider employee]