Menu
I use tinymce for a webpage that dynamically generates at least 5 texts.
The configuration I use only works on the first textarea unfortunately.
tinyMCE.init({
height : "300",
mode : "exact",
elements : "content",
theme : "simple",
editor_selector : "mceEditor",
...
<textarea class="mceEditor" name="content" rows="15" cols="40">content</textarea>
What's the configuration to enable tinymce editing in all textarea's.
912
Use tinymce. remove() method to remove TinyMCE editor from the HTML element and again call tinymce. init() on the selector to reinitialize.
Running TinyMCE from the cloudGet started with a free API key (with a 14-day trial of our premium plugins) and load the TinyMCE package as follows, replacing no-api-key with your own.
The TinyMCE editor can be made responsive by using css media queries. Simply add css rules that set the width property of table. mceLayout and the tinyMCE textareas.
If you're using "exact" mode you'll need to specify the ids of the elements you wish to convert to editors.
function initMCEexact(e){
tinyMCE.init({
mode : "exact",
elements : e,
...
});
}
// add textarea element with id="content" to document
initMCEexact("content");
// add textarea element with id="content2" to document
initMCEexact("content2");
// add textarea element with id="content3" to document
initMCEexact("content3");
Or, you can use the "textarea" mode, which indiscriminately applies the editor to all textareas.
function initMCEall(){
tinyMCE.init({
mode : "textareas",
...
});
}
// add all textarea elements to document
initMCEall();
Just remember that if you're creating textareas dynamically, you will need to call tinyMCE.init() after creating the elements, because they need to be existing for tinyMCE to be able to convert them.
Here is the documentation on modes.
66
For TinyMCE 4.0 you have to use a selector or defining a tinymce.init object/method for each desired configuration (https://www.tinymce.com/docs/get-started/multiple-editors/).
For example, this is a page with 3 editors:
<!DOCTYPE html>
<html>
<head>
<script src="http://cdn.tinymce.com/4/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
selector: '#myeditable-h1',
toolbar: 'undo redo'
});
tinymce.init({
selector: '.standard-editor'
});
</script>
</head>
<body>
<form method="post">
<h1 id="myeditable-h1">This Title Can Be Edited If You Click Here</h1>
</form>
<form method="post">
<div id="myeditable-div1" class="standard-editor">
<p>This section1 of content can be edited...</p>
</div>
<div id="myeditable-div2" class="standard-editor">
<p>This section2 of content can be edited...</p>
</div>
</form>
</body>
</html>
You should use different mode in your configuration. For example mode: "specific_textareas" to work for all textarea with a given class which is specified in the editor_selector parameter.
In order to work on all textareas with class mceEditor you can use this:
tinyMCE.init({
mode : "specific_textareas",
editor_selector : "mceEditor",
.....
use class in selector i have two or more textarea that i want init those with tiny int so
<textarea class="mytextarea"></textarea>
<textarea class="mytextarea"></textarea>
.
.
.
in init tinyint code:
tinymce.init({
selector: 'textarea.mytextarea',
plugins : 'advlist autolink link lists preview table code pagebreak',
.
.
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
