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();
}
}
Related
I have a page with multiple TinyMCE editors (org.vaadin.tinymce.TinyMce), and I want to know which the user is 'in'. One approach would be to use the focus/blur events, but I've tried adding a class like this:
public class MyTinyMce extends TinyMce implements Focusable<TinyMce> { ... }
and then associating event handlers like this:
myTinyMce.addFocusListener(e -> {
System.out.println("focus!!");
});
myTinyMce.addBlurListener(e -> {
System.out.println("blurred!!");
});
but the events don't fire reliably. If I do the exact same thing with a Text component, it works as expected.
I say not "reliably" because they do fire if I click on the empty space in the TinyMCE toolbar (to the right of 'Tools' in the screenshot), but not if I click on the TinyMCE menu or into the editable body.
screenshot
Am I doing something wrong, or does the TinyMCE component simply not support this use-case? Is there another way to keep track of the user switching between different editors?
I'm wondering how to disable ctrl-clicking links when in design mode. I believe it must be possible because when the link plugin is disabled, links cannot be ctrl-clicked while in 'design' mode. I would like to enable the link plugin but have the links remain un-clickable while in 'design' mode. They can still be clicked when in 'readonly' mode.
This fiddle shows the functionality when the link plug in is not enabled. Just use the Add Link button to add a link to the editor and notice when you're in design mode how it cannot be ctrl-clicked to navigate.
https://fiddle.tiny.cloud/Q6haab/3
This fiddle has the link plugin enabled to show the difference of ctrl-clicking while in edit mode.
https://fiddle.tiny.cloud/Q6haab/4
Thanks in advance
If you import the link plugin there is currently no way to disable the link opening behavior with configuration.
TinyMCE registers event handlers for click and keydown which check for the click on the link.
Additionally the link plugin registers menu items that are displayed on right click for opening the link.
Ultimately these all call the same method which creates an anchor tag on the body and fires a mouse click event on it.
If you wish to stop clicking from doing anything then you can add an event listener to the body tag for click events and then filter on the event target to look for anchor tags that are directly on the body and have 3 attributes (href, rel and target). Once you find a likely candidate you call preventDefault on the event.
body.addEventListener('click', (evt) => {
const t = evt.target;
if (
t.parentNode === body &&
t.attributes.length === 3 &&
t.hasAttribute('href') &&
target.getAttribute('rel') === 'noreferrer noopener' &&
t.getAttribute('target') === '_blank') {
evt.preventDefault()
}
});
setup : function(ed) {
ed.on("click", function(e) {});
};
Tried setting up like this.But this get triggered when I click inside the editor text-area. So How do I capture the click event when a user clicks on "New document" from "File".Using Tinymce v4
TinyMCE does not issue any specific event when New Document is selected from the Menu. You can do one of two things:
1 - Leverage the ExecCommand event and look to see what actual command was issued.
When you select File -> New Document the editor fires an ExecCommand event and the command property is set to the value mceNewDocument. You can add code to your TinyMCE configuration that looks for any ExecCommand event and then checks to see if the command property is set to mceNewDocument. For example you can put this in your TinyMCE configuration...
setup: function (editor) {
editor.on('ExecCommand', function (e) {
if("mceNewDocument" == e.command) {
console.log('New Document was run...");
}
});
}
2 - Build a custom New Document menu option.
You can create a custom menu option and stop using the default one. Then you can add your own custom logic to do whatever you need when this option is selected. You can learn more about custom menu items here:
https://www.tinymce.com/docs/demo/custom-toolbar-menu-item/
The default menu option is defined in the FormatControls.js file within TinyMCE so you can use that as a template for your own custom button.
I am using cordova-google-maps plugin with my ionic 2 app, and I want to show the menu (sidenav) on that page. Problem is for the sidenav to receive events properly I need to call map.setClickable( false ) while opening the sidenav and set it back to true when the user closes the sidenav. It seems there is an event for checking while the menu is being opened with opening, but I don't know how to track when the user closes the menu.
For using ionDrag, ionOpen, ionClose in Ionic2 you must add it on the menu itself
for example modify menu in your app.html file by
<ion-menu [content]="content" (ionOpen)="menuOpened()" (ionClose)="menuClosed()">
After I use "Events" see doc here: http://ionicframework.com/docs/v2/api/util/Events/
For detect in my page if the menu was close or open.
Example in my app.ts
menuClosed() {
this.events.publish('menu:closed', '');
}
menuOpened() {
this.events.publish('menu:opened', '');
}
And in my other page
events.subscribe('menu:opened', () => {
// your action here
});
events.subscribe('menu:closed', () => {
// your action here
});
I hope this help
It seems new events have been added to the menu component which solves this problem. I am also using the google maps plugin and it works fine
http://ionicframework.com/docs/v2/api/components/menu/Menu/
ionDrag
When the menu is being dragged open.
ionOpen
When the menu has been opened.
ionClose
When the menu has been closed.
Using these output events, in your handlers you can keep a flag for the menu if its open or not :)
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!