We Keep Coding

Instanciate and link a Tinymce editor dynamically

In my app I have a button that creates paragraphs (textareas) dynamically.
I want to link a Tinymce editor to each of them, but I just don't know how to do it.
This is the function that creates textareas dynamically:
createParagraph: function(idNb) {
attribs = {'name':'paragraph_'+idNb, 'id':'paragaraph-'+idNb, 'class':'form-control'};
document.getElementById('tag-row-1-cell-1-'+idNb).append(_createElement('textarea', attribs));
let ed = new tinymce.init({
selector: '#paragaraph-'+idNb
});
},
Can someone help me ?

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

Getting the tinyMCE editor instance on button click

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');

Using tinyMCE into modal window

I'm using Grails 1.3.7 and I use tinyMCE via richui. I'm trying to display a modal window which enables users to send a mail. However, if tinyMCE is correctly displayed, I can't use the text editor because of this error :
t.win.document is null
I finally found the reason here, at the end of the article :
http://blog.mirthlab.com/2008/11/13/dynamically-adding-and-removing-tinymce-instances-to-a-page/
It seems that when I call the page with the jquery script building the modal window, DOM isn't refreshed and doesn't create the corresponding textarea.
Anyway I don't know how to resolve this, so here is my code :
Jquery code :
function dialogSendFirstMail(id) {
var monurl = "/myApp/emailTemplate/writeFirstMail.gsp?id_for_mail="+id;
var titre = "Premier email"
//alert(monurl);
$("#dialogSendFirstMail").load(monurl, function() {
$(this).dialog({
height: 'auto',
width:'auto',
modal: true,
position: 'center',
overlay: {
backgroundColor: '#000',
opacity: 0.5
},
title:titre
});
});
}
GSP calling the script for the modal window :
<!-- ... -->
<g:if test="${params.sendFirstMail}" >
<div id="dialogSendFirstMail"></div>
<script>dialogSendFirstMail(${idProfil});</script>
</g:if>
</body>
modal window (only this for the moment) :
<richui:richTextEditor name="firstMail" value="%Email_de_bienvenue%"/>
In summary, if I detect that I have to send a first mail, the page creates a div in which is placed tinyMCE. This is what the user will see.

As you have mentioned, the reason that you the the error "t.win.document is null" is because the DOM isn't refreshed. So you will have to add the tinyMCE control explicitly when you load the modal dialog. You can use something like this in the gsp which renders the richUI editor (writeFirstMail.gsp in your case) :
jQuery(document).ready(function() {
//your tinyMCE settings here
tinyMCE.settings = {
mode : "textareas",
theme : "simple",
editor_selector : "mcesimple",
width: 400
};
tinyMCE.execCommand("mceAddControl", false, "yourTextareaId");
});
Once the dialog is closed, you can remove tinyMCE control from the textarea using this:
tinyMCE.execCommand("mceRemoveControl", false, "yourTextareaId");

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