This answer explains how to, for example, remove the menubar and status bar for all form fields in tinyMCE:
tinymce.init({
selector: "textarea",
menubar:false,
statusbar: false,
..
});
My question is: how can I do that for individual text areas? ie I would like some to have status bars and others not to..
This answer explains how to, for example, remove the menubar and status bar for all form fields in tinyMCE:
tinymce.init({
selector: "textarea",
menubar:false,
statusbar: false,
..
});
My question is: how can I do that for individual text areas? ie I would like some to have status bars and others not to..
Share Improve this question edited May 23, 2017 at 10:34 CommunityBot 11 silver badge asked Apr 10, 2014 at 8:28 abboodabbood 23.6k20 gold badges141 silver badges258 bronze badges3 Answers
Reset to default 5You need to give your textarea element an id and then use it in every configuration:
tinymce.init({
selector: "textarea#editor1",
menubar:false,
statusbar: false,
...
});
<textarea id="editor1"></textarea>
tinymce.init({
selector: "textarea#editor2",
// standard toolbar for editor 2
...
});
<textarea id="editor2"></textarea>
// and so on...
This way you tell tinyMCE for which textarea the configuration is in effect. Have a look at the advanced example on the tinyMCE site:
selector: "textarea#elm1",
Select only the textarea with ID elm1
UPDATE
Yes, it is possible. You need to set a unique id for all editors, but it is possible to select multiple id's at once like this:
<script type="text/javascript">
tinymce.init({
selector: "textarea#mon1,textarea#mon2",
theme: "modern",
height: 100,
menubar:false,
statusbar: false
});
tinymce.init({
selector: "textarea#ment_toolbox",
theme: "modern",
height: 100,
toolbar: false
});
</script>
</head>
<body>
<div width="100%" height="100%">
<textarea id="mon1"></textarea>
<br/>
<textarea id="ment_toolbox"></textarea>
<br/>
<textarea id="mon2"></textarea>
<br/>
</div>
</body>
The site looks as expected:
this is based off pasty's answer above, it keeps it as DRY as possible:
this.setupRichTextEditorSettings = function() {
var regularElements = ['eobjs','emats','eprocs','eclos','ehoms'];
var specialElements = ['ment_box'];
var convertToSelectors = function(elements) {
return $.map(elements, function(element) {
return "textarea#"+element;
});
};
var regularElementSelectors = convertToSelectors(regularElements);
var specialElementSelectors = convertToSelectors(specialElements);
tinymce.init({
selector: regularElementSelectors.join(','),
menubar: false,
statusbar: false
})
tinymce.init({
selector: specialElementSelectors.join(','),
menubar: false,
statusbar: false,
toolbar: false
})
};
Use a selector like this:
$('textarea#mytext').tinymce({
menubar:false,
statusbar: false,
..
});