I have a TinyMCE editor in my page. I would like to add/remove buttons/plugins from the toolbar based on things happening else where in the page. I am looking for a solution that avoids destroying and recreating the editor. Is there a tinyMCE command to do this? Something like
tinyMCE.execCommand("mceInsertPlugin", pluginName);
You cannot load plugins without reinitializing the editor.
But with buttons it is possible:
Create button on the fly:
ed.addButton('example', {
title : 'example.desc',
image : '../jscripts/tiny_mce/plugins/example/img/example.gif',
onclick : function() {
ed.windowManager.alert('Hello world!! Selection: ' + ed.selection.getContent({format : 'text'}));
}
});
Removal:
$('.mce_example').parent('td').remove();
Related
I'm trying to create a simple WordPress plugin for the TinyMCE editor that adds a button to the editor bar, that when you click on this it inserts an image into the content, and I want this image to be clickable by the person reading the published and run some JavaScript when this occurs (basically just to open a new window with some specific sizing).
The problem I have is that TinyMCE strips the onClick event I add to the image hyperlink, so it doesn't work. I understand one way to fix this is to change the valid_elements section for TinyMCE, but this would involve anyone installing the plugin having to go and make those changes manually. Is there anyway to be able to run some JS when the image is clicked by the reader solely in my plugin?
Should be a matter of extending TinyMCE valid elements inside your own plugin. Here an example adding the image tag with all properties enabled:
add_filter( 'tiny_mce_before_init', function ( $init ) {
$img = 'img[*]';
if ( isset( $init['extended_valid_elements'] ) ) {
$init['extended_valid_elements'] .= ',' . $img;
} else {
$init['extended_valid_elements'] = $img;
}
return $init;
});
I used the following when creating the TinyMCE button to insert a clickable <img> element into the post content:
ed.addButton( 'test_button', {
title : 'Insert clickable image',
image : '../wp-includes/images/smilies/icon_eek.gif',
onclick : function() {
ed.selection.setContent( '<img src="http://example.com/test.gif" onclick="alert()" />' );
}
});
Working on customizing the wordpress gallery with some different settings for different gallery types.
Short of the long is I'm using multiple wp_editors on page and I'm having a focus problem when jumping between editors.
I'm making use of wp.media.view.Settings.Gallery.extend to switch between gallery types and display different js templates.
The functionality is actually all good and gallery shortcodes are going where they need to and being updated as needed.
For certain gallery types I am extending the attachment details with
an extend that looks something like this slimed down version:
var $gal_media = wp.media;
$gal_media.view.Attachment.Details = $gal_media.view.Attachment.Details.extend({
initialize: function(){
this.model.on('change', this.render, this);
},
render: function(){
var check_active_editor = window.wpActiveEditor;
return this;
}
});
The problem lies here when I'm attempting to detect the current editor during the render part of the function with window.wpActiveEditor;
It's working correctly providing you get focus on the current editor but if you just click the gallery preview or edit gallery pencil window.wpActiveEditor; will return the last focused editor.
Tried several different attempts to change focus on the editor in the wp_editor call using on click events during init like so:
'tinymce' => array(
'init_instance_callback' => 'function(gallery_editor) {
gallery_editor.on("click", function(){
tinyMCE.get(gallery_editor.id).focus();
});
}'
)
but they are not called when clicking on the gallery preview or edit.
Any suggestion on either:
1) Getting the proper id?
Obviously the Gallery knows it as it's returning the shortcode to the proper editor.
or
2) Toggling Focus/Blur on Multiple Editors when Gallery Preview or Edit button is pressed.
Much appreciated!
If anyone finds themselves in a similar situation I was able to resolve this issue with an on click callback on my editors that cycles through all the editors and removes the data-mce-selected attribute from any other gallery nodes that were selected.
Then it sets focus on the editor that was just clicked.
Not the prettiest but it's behaving as expected.
The key for me was using tinyMCE.dom.DomQuery
'tinymce' => array(
'init_instance_callback' => 'function(ed) {
ed.on("click", function(){
for (edId in tinyMCE.editors){
if(edId !== ed.id){
var this_editor = tinyMCE.get(edId);
var $ = tinyMCE.dom.DomQuery;
$("div[data-wpview-type]", this_editor.dom.doc).removeAttr("data-mce-selected");
}
}
tinyMCE.get(ed.id).focus();
});
}'
)
I am extending a cloud-hosted LMS with javascript. Therefore, we can add javascript to the page, but cannot modify the vendor javascript for different components.
The LMS uses tinyMCE frequently. The goal is to add a new button on to the toolbar of each tinyMCE editor.
The problem is that since the tinyMCE modules are initialized in the vendor's untouchable code, we cannot modify the init() call. Therefore, we cannot add any text on to the "toolbar" property of the init() object.
So I accomplished this in a moderately hacky way:
tinyMCE.on('AddEditor', function(e){
e.editor.on('init', function(){
tinyMCE.ui.Factory.create({
type: 'button',
icon: 'icon'
}).on('click', function(){
// button pressing logic
})
.renderTo($(e.editor.editorContainer).find('.mce-container-body .mce-toolbar:last .mce-btn-group > div')[0])
});
});
So this works, but needless to say I am not totally comfortable having to look for such a specific location in the DOM like that to insert the button. Although this works, I do not believe it was the creator's intention for it to be used like this.
Is there a proper way to add the button to a toolbar, after initialization, if we cannot modify the initialization code?
I found a more elegant solution, but it still feels a bit like a hack. Here is what I got:
// get an instance of the editor
var editor=tinymce.activeEditor; //or tinymce.editors[0], or loop, whatever
//add a button to the editor buttons
editor.addButton('mysecondbutton', {
text: 'My second button',
icon: false,
onclick: function () {
editor.insertContent(' <b>It\'s my second button!</b> ');
}
});
//the button now becomes
var button=editor.buttons['mysecondbutton'];
//find the buttongroup in the toolbar found in the panel of the theme
var bg=editor.theme.panel.find('toolbar buttongroup')[0];
//without this, the buttons look weird after that
bg._lastRepaintRect=bg._layoutRect;
//append the button to the group
bg.append(button);
I feel like there should be something better than this, but I didn't find it.
Other notes:
the ugly _lastRepaintRect is needed because of the repaint
method, which makes the buttons look ugly regardless if you add new
controls or not
looked in the code, there is no way of adding new controls to the
toolbar without repainting and there is no way to get around it
without the ugly hack
append(b) is equivalent to add(b).renderNew()
you can use the following code to add the button without the hack, but you are shortcircuiting a lot of other stuff:
Code:
bg.add(button);
var buttonElement=bg.items().filter(function(i) { return i.settings.text==button.text; })[0];
var bgElement=bg.getEl('body');
buttonElement.renderTo(bgElement);
I've got a page with multiple TinyMce editors and i have drag and drop feature enabled which allows me to change the order of each items.
But as i drag-drop an editor its content gets removed.
See the screen shots :
Before Drag-Drop
After Drag-Drop
Finally fixed the issue...
The solution is to first shut down the tinymce instance (id needed!)
tinymce.execCommand('mceRemoveControl',true,'editor_id');
then do the DOM action and reinit the tinymce instance
tinymce.execCommand('mceAddControl',true,'editor_id');
Add following code on drag end event:
onDragEnd(event: any) {
var tinymceId = 'tinymceId_' + event.source.data.index; //get selected element id
tinymce.get(tinymceId ).remove(); //remove existing instance
$('#' + tinymceId ).closest('.mce-tinymce.mce-container').show();
tinymce.init({id: tinymceId , selector: '#' + tinymceId , height: 200}; //you can add other properties into init()
}
I am trying below code
$('textarea.tinymce').keypress(function(){
dealDescription = $('textarea.tinymce').tinymce().execCommand('mcePreview');
$("#deal_preview div").text(dealDescription);
});
But I am not using jquery tinymce editor suppose I use jquery tinymce and other jquery UI component not working properly so I am directly using the tinymce component.
Now I need to show content preview in preview box for each key press.
Im using this in tinymce 4.x
tinymce.init({
selector: "#tinymce-textarea",
setup : function(ed) {
ed.on("change", function(e){
$('#tinymce-livepreview').html(tinymce.activeEditor.getContent());
});
ed.on("keyup", function(){
$('#tinymce-livepreview').html(tinymce.activeEditor.getContent());
});
}
});
Explanation:
on("change") is for detect changes on mouse event if u click toolbar icon or selection from the menu. It also able to detect the keyboard event but only after lost focus (not real time).
on("keyup") is for detect changes on real time keyboard event
Could be done after initialisasing as well by getting the active editor:
tinyMCE.activeEditor.on('keyup', function () {
// your nicely formatted code here
});
There's also an editors array you can iterate over if you need it.
I try with below code is working fine
tinyMCE.init({
mode : "exact",
elements : "text",
setup : function (theEditor) {
theEditor.onKeyPress.add(
function (theEditor) {
previewContent(theEditor);
}
);
},
});
function previewContent(editorObject){
var content = editorObject.getContent();
document.getElementById("previewContent").innerHTML = content;
}