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.
Related
I am using Prestashop. I have made several templates. Is it possible to prepare a button that will insert the selected template?
For example, I have 4 templates and I want to make 4 buttons.
the first button inserts the first template.
the second button inserts the second template and so on.
I tried to use this code in the file \js\admin\tinymce.inc.js but my new button is not displaying :(
toolbar2: 'customInsertButton',
setup: function (editor) {
editor.ui.registry.addButton('customInsertButton', {
text: 'My Button',
onAction: function (_) {
editor.insertContent('My button works!');
}
});
},
Perhaps Prestashop has some limited version of this editor?
I ask because for example it is possible to add templates. but I would like to be able to insert them faster, with one button...
TinyMCE itself already has a template plugin:
https://www.tiny.cloud/docs/plugins/opensource/template/
Have you considered using that functionality?
I have already found a solution. It is possible by adding a custom plugin.
Everything is beautifully described on the TinyMCE website :
https://www.tiny.cloud/docs/advanced/creating-a-plugin/
then we modify tinymce.inc.js and add plugin support and a defined button in the toolbar.
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()
}
});
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();
}
}
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 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.