Dynamically adding text areas and loading TinyMCE for each

[amacgregor]

Hi,

I really like the extension but I'm dynamically adding text areas
through a partial, the problem I have is to render tinyMCE for the new
text areas that are added on the fly. I can call
TinymceHammer.init(); each time a new textarea is created but that
only makes a mess with the other text areas.

The Partial code is this

<div class="section">
<% new_or_existing = section.new_record? ? 'new' : 'existing' %>
<% prefix = "proposal[#{new_or_existing}_section_attributes][]" %>
<% fields_for prefix, section do |f| -%>

<div class="title">Section Title: <%= f.text_field :title %> </
div>
Description: <%= f.tinymce :description %>
<script type="text/javascript">

// new tinyMCE.init code here
TinymceHammer.init();
</script>
<%= link_to_function "remove" , "$
(this).up('.section').remove()" %>

<% end -%>
</div>

Any help resolving this issue is highly appreciated.

Cheers!

[trevorrowe]

Instead of calling TinymceHammer.init() each time a text area is
added, try calling:

TinymceHammer.addEditor(dom_id);

Just make sure to pass a valid textarea dom attribute id to addEditor
and you should be set.

[Allan MacGregor]

Hi Thanks,

My problem is that my text areas dont have an id :P my partial is used when creating the objects so they dont yet exist.

Cheers!

On 4/1/2010 1:20 PM, trevorrowe wrote:

Allan MacGregor Tel +1 213 814 4238 Tel +1 718 865 8891 d...@allanmacgregor.com www.allanmacgregor.com Elance Profile

allan.ma...@gmail.com macgregor_bg d...@allanmacgregor.com therealmacgregor allan.m...@yahoo.com

Contact Me

_____________________________________________________
This message contains information that may be confidential and privileged. Unless you are the addressee (or authorized to receive for the addressee), you may not use, copy or disclose to anyone this message or any information contained in this message. If you have received this message in error, please advise the sender by reply e-mail, and delete the message.

[Trevor Rowe]

The addEditor javascript function is a wrapper around the tinymce editor function "mceAddControl".  The mceAddControl method provided by TinyMCE is what requires the dom id.  I  don't know a way to have tinymce initialize another editor without calling mceAddControl.  

That said, it should be pretty simple to add an id to the text area.  It doesn't need to be particularly meaningful, just unique to the dom.  Is prototype or jquery loaded on the page in question?

--
You received this message because you are subscribed to the Google Groups "tinymce_hammer" group.
To post to this group, send email to tinymce...@googlegroups.com.
To unsubscribe from this group, send email to tinymce_hamme...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/tinymce_hammer?hl=en.

[Allan MacGregor]

Hi Trevor,

Yup, I think you are right I have to figure out a way to create an unique id for each of my text areas, if you check my partial code the

<% prefix = "proposal[#{new_or_existing}_section_attributes][]" %>

the last [] is supposed to be replaced with the textarea id but because this are new objects that id doesn't exist. Do you know how could I modify that code to create custom id ? so I can pass that to the js ??


Cheers

Allan MacGregor Tel +1 213 814 4238 Tel +1 718 865 8891 d...@allanmacgregor.com www.allanmacgregor.com Elance Profile

allan.ma...@gmail.com macgregor_bg d...@allanmacgregor.com therealmacgregor allan.m...@yahoo.com

Contact Me

_____________________________________________________
This message contains information that may be confidential and privileged. Unless you are the addressee (or authorized to receive for the addressee), you may not use, copy or disclose to anyone this message or any information contained in this message. If you have received this message in error, please advise the sender by reply e-mail, and delete the message.

[Trevor Rowe]

You don't need a databse id, you need a DOM id.  They don't have to match up, the DOM id can be any arbitrary value that is unique for the page (two html elements should not have the same id attribute).  Nested attribute setters need ids when you want to update or delete a record, but that is a different matter all-together.   You should be able to add a dom id like this:

    <?= text_area($obj, :name, :id => 'new_text_area') ?>

Ignore everything except the :id => 'new_text_area'.  If you add that option to your text area helper in your partial all new text areas will be given the same dom id.  If you changed it to most anything else you would run into the problem of not knowing what the id is in javascript.  One solution to this problem is to use the same id for every new text editor and then change it with javascript:

 

  // called after a partial has been added to the page with a new text area

var textarea_count = 0;

function init_new_editor() {

var new_dom_id = 'text_area_' + ++text_area_count;

var textarea = document.getElementById('new_textarea');

textarea.id = new_dom_id;

TinymceHammer.addEditor(new_dom_id);

}

The idea in the above code example is to assume your partial will always give the new text area a fixed id.  You find the text area by that id, give it a new id (an incrementing one will suffice) and then pass it off to tinymce.  You shouldn't need the ids after you've called addEditor.   DOM ids are not sent to the server when the form is submitted, only form field names and values.   Hope this helps.

On Apr 1, 2010, at 9:36 AM, Allan MacGregor wrote:

Hi Trevor,

Yup, I think you are right I have to figure out a way to create an unique id for each of my text areas, if you check my partial code the

<% prefix = "proposal[#{new_or_existing}_section_attributes][]" %>

the last [] is supposed to be replaced with the textarea id but because this are new objects that id doesn't exist. Do you know how could I modify that code to create custom id ? so I can pass that to the js ??


Cheers

<Myself.jpg>

Allan MacGregor Tel +1 213 814 4238 Tel +1 718 865 8891 d...@allanmacgregor.com www.allanmacgregor.com Elance Profile

<gtalk.png> allan.ma...@gmail.com <skype.png> macgregor_bg <msn.png> d...@allanmacgregor.com <aim.png> therealmacgregor <yahoo.png> allan.m...@yahoo.com

Contact Me <linkedin.png><facebook.png><flickr.png><twitter.png>

[Trevor Rowe]

You don't need a databse id, you need a DOM id.  They don't have to match up, the DOM id can be any arbitrary value that is unique for the page (two html elements should not have the same id attribute).  Nested attribute setters need ids when you want to update or delete a record, but that is a different matter all-together.   You should be able to add a dom id like this:

    <?= text_area($obj, :name, :id => 'new_text_area') ?>

Ignore everything except the :id => 'new_text_area'.  If you add that option to your text area helper in your partial all new text areas will be given the same dom id.  If you changed it to most anything else you would run into the problem of not knowing what the id is in javascript.  One solution to this problem is to use the same id for every new text editor and then change it with javascript:

 

  // called after a partial has been added to the page with a new text area

var textarea_count = 0;

function init_new_editor() {

var new_dom_id = 'text_area_' + ++text_area_count;

var textarea = document.getElementById('new_textarea');

textarea.id = new_dom_id;

TinymceHammer.addEditor(new_dom_id);

}

The idea in the above code example is to assume your partial will always give the new text area a fixed id.  You find the text area by that id, give it a new id (an incrementing one will suffice) and then pass it off to tinymce.  You shouldn't need the ids after you've called addEditor.   DOM ids are not sent to the server when the form is submitted, only form field names and values.   Hope this helps.

On Apr 1, 2010, at 9:36 AM, Allan MacGregor wrote:

Hi Trevor,

Yup, I think you are right I have to figure out a way to create an unique id for each of my text areas, if you check my partial code the

<% prefix = "proposal[#{new_or_existing}_section_attributes][]" %>

the last [] is supposed to be replaced with the textarea id but because this are new objects that id doesn't exist. Do you know how could I modify that code to create custom id ? so I can pass that to the js ??


Cheers

<Myself.jpg>

Allan MacGregor Tel +1 213 814 4238 Tel +1 718 865 8891 d...@allanmacgregor.com www.allanmacgregor.com Elance Profile

<gtalk.png> allan.ma...@gmail.com <skype.png> macgregor_bg <msn.png> d...@allanmacgregor.com <aim.png> therealmacgregor <yahoo.png> allan.m...@yahoo.com

Contact Me <linkedin.png><facebook.png><flickr.png><twitter.png>

_____________________________________________________

[Allan MacGregor]

Hi Trevor,

Thanks for all the help so far. So I modified my code on the partial to the following

<div class="section">

    <% new_or_existing = section.new_record? ? 'new' : 'existing' %>
    <% prefix = "proposal[#{new_or_existing}_section_attributes][]" %>
    <% fields_for prefix, section do |f| -%>

        <div class="title">Section Title: <%= f.text_field :title %> </div>

        Description: <%= f.tinymce :description, :id =>  "section_textarea" %>


        <%= link_to_function "remove" , "$(this).up('.section').remove()" %>
        <script type="text/javascript"> var textarea_count = 0;
           function init_new_editor() {
             var new_dom_id = 'text_area_' + ++text_area_count; // Create dom id and increment it by one
             var textarea = document.getElementById('section_textarea'); //search for the elements with the original id
             textarea.id = new_dom_id; //replace the element old id with the new unique id
             TinymceHammer.addEditor(new_dom_id); //call TinymceHammer to do the replacement
        } </script>
    <% end -%>

</div>


Now each text area generated by the partial has the id section_textarea ... but I think my problem is on the javascript side now, two things happen one I only see the js added to the first text area created and for the new text areas no tinymce loaded or javascript after the fields. Thanks for your help in advance.

Cheers!

Allan MacGregor Tel +1 213 814 4238 Tel +1 718 865 8891 d...@allanmacgregor.com www.allanmacgregor.com Elance Profile

allan.ma...@gmail.com macgregor_bg d...@allanmacgregor.com therealmacgregor allan.m...@yahoo.com

Contact Me

_____________________________________________________
This message contains information that may be confidential and privileged. Unless you are the addressee (or authorized to receive for the addressee), you may not use, copy or disclose to anyone this message or any information contained in this message. If you have received this message in error, please advise the sender by reply e-mail, and delete the message.

[Trevor Rowe]

The javascript function needs to appear in your page, not in the partial.  In your partial I would put something like:

  <script type="text/javascript">

    init_new_editor();

  </script>

On Apr 1, 2010, at 11:26 AM, Allan MacGregor wrote:

Hi Trevor,

Thanks for all the help so far. So I modified my code on the partial to the following

<div class="section">

    <% new_or_existing = section.new_record? ? 'new' : 'existing' %>
    <% prefix = "proposal[#{new_or_existing}_section_attributes][]" %>
    <% fields_for prefix, section do |f| -%>

        <div class="title">Section Title: <%= f.text_field :title %> </div>
        Description: <%= f.tinymce :description, :id =>  "section_textarea" %>


        <%= link_to_function "remove" , "$(this).up('.section').remove()" %>
        <script type="text/javascript"> var textarea_count = 0;
           function init_new_editor() {
             var new_dom_id = 'text_area_' + ++text_area_count; // Create dom id and increment it by one
             var textarea = document.getElementById('section_textarea'); //search for the elements with the original id
             textarea.id = new_dom_id; //replace the element old id with the new unique id
             TinymceHammer.addEditor(new_dom_id); //call TinymceHammer to do the replacement
        } </script>
    <% end -%>

</div>


Now each text area generated by the partial has the id section_textarea ... but I think my problem is on the javascript side now, two things happen one I only see the js added to the first text area created and for the new text areas no tinymce loaded or javascript after the fields. Thanks for your help in advance.

Cheers!

[Allan MacGregor]

Hi,

Yup I added the original script to the head and on my partial the code looks now like this

<div class="section">

    <% new_or_existing = section.new_record? ? 'new' : 'existing' %>
    <% prefix = "proposal[#{new_or_existing}_section_attributes][]" %>
    <% fields_for prefix, section do |f| -%>

        <div class="title">Section Title: <%= f.text_field :title %> </div>
        Description: <%= f.tinymce :description, :id =>  "section_textarea" %>

        <%= link_to_function "remove" , "$(this).up('.section').remove()" %>

        <script type="text/javascript">init_new_editor();</script>
    <% end -%>

</div>

And is doing the same thing, for the first text_area, has the javascript but not for the additional textareas added. Not sure why is doing this.


Cheers

Allan MacGregor Tel +1 213 814 4238 Tel +1 718 865 8891 d...@allanmacgregor.com www.allanmacgregor.com Elance Profile

allan.ma...@gmail.com macgregor_bg d...@allanmacgregor.com therealmacgregor allan.m...@yahoo.com

Contact Me

_____________________________________________________
This message contains information that may be confidential and privileged. Unless you are the addressee (or authorized to receive for the addressee), you may not use, copy or disclose to anyone this message or any information contained in this message. If you have received this message in error, please advise the sender by reply e-mail, and delete the message.

[Allan MacGregor]

So its now working :)

Thanks a lot Trever, terrific extension :P