how to customize individual textarea in tinyMCE
Question
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..
3 answers
solution1
5 ACCPTED 2014-04-10 08:46:04
You 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#common1,textarea#common2",
theme: "modern",
height: 100,
menubar:false,
statusbar: false
});
tinymce.init({
selector: "textarea#comment_toolbox",
theme: "modern",
height: 100,
toolbar: false
});
</script>
</head>
<body>
<div width="100%" height="100%">
<textarea id="common1"></textarea>
<br/>
<textarea id="comment_toolbox"></textarea>
<br/>
<textarea id="common2"></textarea>
<br/>
</div>
</body>
The site looks as expected:
solution2
1 2014-04-10 09:20:01
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 = ['comment_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
})
};
solution3
0 2014-04-10 08:39:34
Use a selector like this:
$('textarea#mytext').tinymce({
menubar:false,
statusbar: false,
..
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.