How to enable multiple TinyMCEs in the same form
I want to use 2 different textboxes with tinyMCE on the same form. The first one works well, but whenever I add the second, the second one is disabled (it allows when I increase it manually from the bottom right corner). Their name and field ID are different.
Can anyone tell me how I can fix this problem?
Thanks in advance.
source to share
Since you do not have the code, we cannot determine where your problem is. Perhaps to work around, run TinyMce on both text fields above the class:
<script type="text/javascript" src="<your installation path>/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
mode : "textareas",
theme : "simple",
editor_selector : "mceSimple"
});
tinyMCE.init({
mode : "textareas",
theme : "advanced",
editor_selector : "mceAdvanced"
});
</script>
<form method="post" action="somepage">
<textarea name="content1" class="mceSimple" style="width:100%">
</textarea>
<textarea name="content2" class="mceAdvanced" style="width:100%">
</textarea>
</form>
Cheers, Stefan
source to share
If you resize the shadow area, the text will magically appear.
Mikko Huilaja javascript solution:
<script type="text/javascript">
$(window).load(function() {
forceTinyMceIframeResize();
});
function forceTinyMceIframeResize() {
$('.mceEditor .mceIframeContainer iframe').each(function(i) {
$(this).height($(this).height()+1);
});
}
</script>
source to share
Use a generic class (like tinymce-editor) for the entire text area for which you need to add TinyMCE.
Then, in the HTML head section, add the following code to initialize TinyMCE.
$(function(){
tinyMCE.init({
selector: '.tinymce-editor',
statusbar: false,
min_height: 120,
menubar: false,
toolbar: 'styleselect | bold italic underline | undo redo | image | link',
plugins: 'image, link',
forced_root_block: false,
default_link_target: "_blank",
link_assume_external_targets: true
});
});
source to share