Getting the tinyMCE editor instance on button click - javascript

Edit: Added a fiddle example- http://fiddle.tinymce.com/EZbaab/2
I currently have a page with a tinyMCE instance on it and three separate textareas that inherit it.
I have a custom menu that has clickable sub-menu items on it (generated using Django), that when clicked, insert content into the currently active tinyMCE editor (textarea). The trouble is, this happens regardless of WHICH editor toolbar was clicked. So for example if I click the top editor's toolbar item, but have the bottom editor focused, the text gets pasted into the bottom editor.
I need to either force the editor that has it's toolbar clicked to become focused when a menu item is clicked (which happens for the default buttons like bold, italic, underline, but not for my custom menu items)
or I need to pass the instance id of the editor that was clicked into the function that pastes in the text somehow. The difficulty is I'm struggling to find any reference to these two tasks in the documentation.
The tinyMCE init code:
tinyMCE.init({
forced_root_block : false,
force_br_newlines : true,
force_p_newlines : false,
mode : "textareas",
theme : "advanced",
plugins : "contextmenu,paste,save,-stdpara",
theme_advanced_buttons1 : ",bold,italic,underline,cleanup,|,undo,redo,|,cut,copy,paste,|,stdpara",
theme_advanced_buttons2 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
force_br_newlines : true,
force_p_newlines : false,
forced_root_block : '',
});
(Where stdpara is my custom menu plugin):
The menu code (stripped out the django and just added some random data:
tinymce.create('tinymce.plugins.StandardParagraphPlugin', {
createControl: function(n, cm) {
switch (n) {
case 'stdpara':
var c = cm.createSplitButton('stdparagraph', {
title : 'Standard Paragraph',
image : 'img/para.png',
});
c.onRenderMenu.add(function(c, m) {
m.add({title : 'Standard Paragraphs', 'class' : 'mceMenuItemTitle'}).setDisabled(1);
category_menu = m.addMenu({title : 'Some Title'});
category_menu.add({title : 'Some sub-title', onclick : function() { tinyMCE.activeEditor.execCommand('mceInsertContent',false,'The Text') });
}});
return c;
}
return null;
}
});

I need to either force the editor that has it's toolbar clicked to
become focused when a menu item is clicked (which happens for the
default buttons like bold, italic, underline, but not for my custom
menu items)
This is correct, but the problem lies here
tinyMCE.activeEditor.execCommand('mceInsertContent',false,'The Text')
This will execute the command on the active Editor. tinyMCE.activeEditor gets reset when the user clicks into the editor for example.
It will be better to address the editor to which the drop-down belongs to.
It is somewhat tricky and does not look very elegant, but as long as tinymce does not change the button logic and naming it will be proof for tinymce updates. See my tinymce fiddle here: http://fiddle.tinymce.com/IZbaab/1

For future troubleshooters
The second parameter of createControl(n, cm) - so, the 'cm' parameter- is the contentManager.
To get the current editor, you can simply call cm.editor
To insert content: cm.editor.execCommand('mceInsertContent', false, 'my text')

Don't know if it helps, but I select the respective Text-Field like:
tinyMCE.get('yourtextareaid').execCommand('mceInsertContent', false, 'bla');

Related

Fancybox 3 JQuery: Close gallery when click outside element

I am having trouble getting Fancybox 3 to exit when a parent element or outside element is clicked.
Fancybox 3 options documentation (http://fancyapps.com/fancybox/3/docs/#options) states the following:
// Interaction
// ===========
// Use options below to customize taken action when user clicks or double clicks on the fancyBox area,
// each option can be string or method that returns value.
//
// Possible values:
// "close" - close instance
// "next" - move to next gallery item
// "nextOrClose" - move to next gallery item or close if gallery has only one item
// "toggleControls" - show/hide controls
// "zoom" - zoom image (if loaded)
// false - do nothing
// Clicked on the content
clickContent : function( current, event ) {
return current.type === 'image' ? 'zoom' : false;
},
// Clicked on the slide
clickSlide : 'close',
// Clicked on the background (backdrop) element
clickOutside : 'close',
Following is my JS file:
$("[data-fancybox]").fancybox({
loop : true,
toolbar : true,
buttons : [
'close'
],
clickOutside : 'close',
});
I am using the group option to enable a gallery.
data-fancybox="group"
I've tried a few things and just can't seem to get it to work yet. Help is greatly appreciated, take care. Sorry for lack of info, I have to head out.
It's hard to understand the problem (add codepen)
If you want - click on the image to close the gallery this is the code (change from "zoom" to "close" (Conditional (ternary) Operator))
// Clicked on the content
clickContent : function( current, event ) {
return current.type === 'image' ? 'close' : false;
},
Also you are doing wrong implementation. This is the default value:
clickOutside : 'close', /* i am default */
If you write this for example:
clickOutside : 'toggleControls',
Result: Now when you click on the overlay area (black) - show/hide controls.
Sorry for my English first. I hope I got you right. I just ran into similar trouble with a gallery of images. And I was irritated by the names of interaction options. For me worked option "clickSlide"
In that way you should be able to control what happens if you click on the open slide but outside the (Image-) Content. Instead of using 'toggleControls' you can use false.
Hope that helps
$("[data-fancybox]").fancybox({
clickSlide: 'toggleControls'
});

TinyMCE - How to add a button with a name

I know I can add buttons in TinyMCE 4 using addButton . But when I use addButton and enter a title for it, only an empty button is shown in the editor with a tooltip that contains the content of title. How do I add a title, that is actually shown in the menubar, like for the save button?
// Create and render a button to the body element
tinymce.ui.Factory.create({
type: 'button',
text: 'My button'
}).renderTo(document.body);
I found the solution, thanks to Eslam.
You actually just set the 'text' value of addButton:
$('#site_content').tinymce({
setup : function(ed) {
ed.addButton('name', {
text : 'TEXT',
onclick : function() {
}
});
}
});
The documentation of TinyMCE is just awful at some parts, if you'd ask me

How to populate tinymce with some content on trigger of javascript event?

i want to populate the tinymce body with some content on trigger of onchange event of selectbox in javascript. I tried some stuff but it did
not work for me.Please guide me in right direction.
Here is the my code that appends the tinymce on textarea
$(function() {
appendTinyMCE();
function appendTinyMCE(){
tinyMCE.init({
// General options
mode : "textareas",
theme : "advanced",
plugins : "preview",
// Theme options
theme_advanced_buttons1 : "forecolor,backcolor,|,justifyleft,justifycenter,justifyright,justifyfull,bullist,numlist,|,formatselect,fontselect,fontsizeselect,sub,sup,|,bold,italic,underline,strikethrough",
theme_advanced_buttons2 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true
});}
});
here is the html code
<td>
<textarea rows="15" name="MyTinymceContent" cols="90" >MyTestContent</textarea>
Now i want to populate the tinymce with new content , on change of select box in javascript. So i write the below code snippet on change
of select box
function populateMyTinyMCE() {
document.form.MyTinymceContent.value ="MyNewContent";
}
But it does not put the new content in tinymce body. I am not sure what i am missing here?
You can call any of following on some event trigger:
tinyMCE.get('your_editor').setContent("MyNewContent");
//OR
tinyMCE.activeEditor.setContent('MyNewContent');
See: Here for More
Tinymce is not equal the textarea. On initialization of the editor a contenteditable iframe get created. This iframe holds the editor content and gets written back into the editor source html element (in your case a textarea) from time to time. To set the editor content you need to use the tinymce setContent function. I will show the alternatives too:
function populateMyTinyMCE() {
var editor = tinymce.editors[0];
// other ways to get the editor instance
// editor = tinymce.get('my editor id');
// editor = tinymce.activeEditor;
editor.setContent('my new content');
// alternate way of setting the content
// editor.getBody().innerHTML = 'my new content';
}
Try
tinyMCE.activeEditor.setContent("MyNewContent");

ExtJS4 toolbar with OpenLayers code

We are using Mapfish toolbar with ExtJS3.2 in our application. Now we are trying to upgrade ExtJS3.2 to ExtJS4. But mapfish is not working with ExtJS4. So, we are using ExtJS4 toolbar, but openlayers code which is written for button in toolbar is not executing.
ExtJS4 code is:
var extoolbar = Ext.create('Ext.toolbar.Toolbar',{
border : true,
width : 100,
height : 40,
layout : hbox
});
var btn1 = {
xtype : 'button',
enableToggle : true,
tooltip : "Zoom In",
id : 'zoominbtn',
listeners : {
'click' : fucntion(){
new OpenLayers.Control.ZoomBox({
alwaysZoom : true,
draw : function(){
this.handler = new OpenLayers.Handler.Box(
this, {done: this.zoomBox}, {keyMask: this.keyMask});
}
});
}
}
};
extoolbar.add(btn1);
Here if we click on the zoom in button control is going into OpenLayers.Control.ZoomBox but the draw method is not executing. My questions are:
Is there any thing wrong in the code?
Is there any other way to approach OpenLayers with ExtJS4?
I am using MapFish too, with Ext 3.4.
First of all you have a fucntion() instead of function() :)
Then, may be I haven't understand what you want to do, but I think -IMAO- that this is not a good way to use the ZoomBox control...
You should add the ZoomBox control to the map while you create it and give the control an id, then use a listener for the toggle event like this:
listeners: {
'toggle': function(button, pressed) {
var ctrl = map.getControl('yourid');
if(pressed){
// Activate the control
ctrl.activate();
} else {
// Deactivate the control
ctrl.deactivate();
}
}
}
This way when you press the button you enable the control, and when you press it again you disable it.
Keep in mind that the ZoomBox control, once active, can also be always available by holding shift
Or you could also use GeoExt, which is really easy, like this
GeoExt.Action({
map: map,
text: "Zoom Box",
control: new OpenLayers.Control.ZoomBox()
});
But I don't know if or how GeoExt works with Ext 4
As for the point 2 of your question, I am sorry but I cannot answer that, because I have no experience with Ext 4.

Tinymce on keypress I am try to display the preview of the content

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;
}

Categories