CODEWITHSUNDEEP
javascripttinymce
tracer tong
tracer tong

Reputation: 553

TinyMCE mode: textareas does not convert all text areas

I am using TinyMCE to power an admin screen, using the following settings:

<script type="text/javascript">
tinyMCE.init({
        mode : "textareas",
         theme : "advanced",
         theme_advanced_toolbar_location : "top"

});
</script>

On this page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="template/common/style.css" rel="stylesheet" type="text/css" />

<title></title>

<script type="text/javascript" src="js/tiny_mce/tiny_mce_src.js"></script>

<script type="text/javascript">
tinyMCE.init({
        mode : "textareas",
         theme : "advanced",
         theme_advanced_toolbar_location : "top"

});
</script>

</head>

<body>


<div class="header">
<div class="inner_header">
<ul class="top_bar">
<li><a href="/2028751/project/admin/?p=about&a=static">About Us</a></li>
<li><a href="/2028751/project/admin/?p=passplus&a=static">Passplus</a></li>
<li><a href="/2028751/project/admin/?p=terms&a=static">terms</a></li>
<li><a href="/2028751/project/admin/?p=links&a=static">Links</a></li>
<li><a href="/2028751/project/admin/?a=static_new">New Page</a></li>
</ul>

<hr />

<ul class="low_bar">
<li><a href="/2028751/project/admin/?p=chippenham&a=school">Chippenham</a></li>
<li><a href="/2028751/project/admin/?p=denizes&a=school">Denizes</a></li>
<li><a href="/2028751/project/admin/?p=trowbridge&a=school">Trowbridge</a></li>
<li><a href="/2028751/project/admin/?a=school_new">New School</a></li>
</ul>

</div>
</div>
<div class="logo">

<img src="template/common/image/logo.gif" alt="Wessex Association Of Driving Schools" title="Wessex Association Of Driving Schools" /></div>

<div class="content">
<div class="inner_content">

<div class="item">
<div class="bleft">
<form action="" method="post">

<label for="title">Title :</label><input type="text" name="title" value="" />

<textarea name="body" id="body"><ul>
<li>Professional, patient and reliable female instructor</li>
<li>Structured lessons to suit pupil needs and ability</li>
<li>Help with theory test</li>
<li>Mock test</li>
<li>Covers Melksham, Bath, Trowbridge, Bradford on Avon and outying villages</li>
</ul></textarea>

</div>

<div class="bright">
<div class="input"><label for="contact">Contact :</label><input type="text" name="contact" value="" /></div>
<div class="input"><label for="phone">Phone :</label><input type="text" name="phone" value="" /></div>
<div class="input"><label for="mobile">Mobile :</label><input type="text" name="mobile" value="" /></div>
<div class="input"><label for="email">Email :</label><input type="text" name="email" value="" /></div>
<div class="input"><label for="contact">Website :</label><input type="text" name="website" value="" /></div>

<div class="input"><input type="submit" value="Save" /></div>

<div class="input"><input type="submit" name="delete" value="Delete" class="in_small" /></div>
</form>
</div>

</div>

<div class="clear">&nbsp;</div>
<hr />


<div class="item">
<div class="bleft">
<form action="" method="post">

<label for="title">Title :</label><input type="text" name="title" value="" />

<textarea name="body" id="body"><ul>
<li>DSA Approved Instructor</li>
<li>Female Instructor</li>
<li>Member of MSA</li>
<li>Block Booking Discount</li>
<li>Theory tuition available</li>
<li>Individual attention</li>
<li>Pass Plus</li>
<li>Flexible hours</li>
</ul></textarea>

</div>

<div class="bright">
<div class="input"><label for="contact">Contact :</label><input type="text" name="contact" value="" /></div>
<div class="input"><label for="phone">Phone :</label><input type="text" name="phone" value="" /></div>
<div class="input"><label for="mobile">Mobile :</label><input type="text" name="mobile" value="" /></div>
<div class="input"><label for="email">Email :</label><input type="text" name="email" value="" /></div>
<div class="input"><label for="contact">Website :</label><input type="text" name="website" value="" /></div>

<div class="input"><input type="submit" value="Save" /></div>

<div class="input"><input type="submit" name="delete" value="Delete" class="in_small" /></div>
</form>

</div>
</div>

<div class="clear">&nbsp;</div>
<hr />


</div>
</div>

</body>
</html>

For some reason when I test this in Firefox 5.0 only the first textarea is converted to a text editor. Can anyone see why?

Upvotes: 0

Views: 1103

Answers (2)

msigman
msigman

Reputation: 4524

The IDs of each textarea must be unique. This is actually an HTML requirement and not a tinyMce one. Change the IDs and I think you'll see it start to work.

Upvotes: 1

fraabye
fraabye

Reputation: 136

Have you tried validating you html? Invalid html or quoting might give you unexpected results.

Upvotes: 0

Related Questions