How "should" one use tinymce hammer when using javascript to render a popup?

44 views
Skip to first unread message

Jay

unread,
Sep 21, 2009, 8:48:22 AM9/21/09
to tinymce_hammer
Hey,

I have a pop up window that has a form on it. On clicking a button
this popup is rendered via javascript. I was wondering if there is a
proscribed way for using a tinymce_hammer text area on the form?
Currently when I mark the text area as a tinymce_tag it gets rendered
as a plain text area. I believe this is because the page is already
loaded and all the DomReady stuff has happened.

I can think of at least one way to do this :
render my popup at page load and have it hidden and have the popup
action just show it.

The other way may be to render the popup and then reinitialize
tinymce... however I'm unsure as to how to go about doing this. I've
looked through the documentation and can't seem to figure it out...
unless lazyloading can help? I've not looked to deeply into that...

Any thoughts about how I could get it to work?

thanks!
Jay

Trevor Rowe

unread,
Sep 21, 2009, 11:35:54 AM9/21/09
to tinymce...@googlegroups.com
Is the popup an actual window or just some regular markup (div) that
is displayed via javascript? If it is an entire window, the solution
is pretty straight forward. In the layout used to render the popup,
just make sure the init if required function is called in it header.

In the case where javascript is dynamically adding a text area to the
page you just need to call the javascript function:

TinymceHammer.addEditor(editor_dom_id);

Pass the dom id of the text area you want to convert. This tells
TinyMCE that even though it has allread run its init function, there
is another editor that needs to be initialized.

Trevor

Jay McGaffigan

unread,
Sep 21, 2009, 12:04:20 PM9/21/09
to tinymce...@googlegroups.com
thanks!

It's a regular div and your solution is what I was looking for. I'll
try it out!

Thanks again!
Jay

Jaycode

unread,
Oct 15, 2009, 3:03:08 AM10/15/09
to tinymce_hammer
No, the correct way to do it was:

TinymceHammer.init();

On Sep 21, 11:04 pm, Jay McGaffigan <hooligan...@gmail.com> wrote:
> thanks!
>
> It's a regular div and your solution is what I was looking for.  I'll
> try it out!
>
> Thanks again!
> Jay
>

Jay McGaffigan

unread,
Feb 10, 2010, 1:04:16 PM2/10/10
to tinymce...@googlegroups.com
> Hey,
>
> Yep this is from a while ago... We thought this was working but it
> actually isn't.
> I have a dialog that when I click a button on a details pages it gets
> the following rendered into it:
>
>
>
> <div class="popup_window">
>  <h1> Provide a Response for "<%= @submission.story.title %>"  </h1>
>        <div class="text"> Select the type of response that's appropriate for
> the manuscript: </div>
>        <% form_remote_tag :url =>
> journals_journal_submission_path(object_id), :method => :delete do %>
>                <ul>
>                    <div id="radio-button">
>                                        <% if !@responses.blank? %>
>                                                <% for response in @responses %>
>                                                <li> <%= radio_button_tag "response", response.name,
> false, :onclick=>"tinyMCE.activeEditor.setContent('#{escape_javascript(response.description.to_s)}');"%>
> <%= response.name %> </li>
>                                                <%end%>
>                                        <%end%>
>                                </div>
>                        <li id="response_value"><%= tinymce_tag 'response_comment',
> nil, :cols => 56, :rows => 6 %> </li>
>                </ul>
>                <div class="button">
>                <%= image_submit_tag "sendresponse.gif" %>
>                <%= image_submit_tag "Cancel.gif",  :onclick => "
> tinyMCE.remove(tinyMCE.activeEditor);$
> ('respond_submission_window').hide();return false;" %>
>                </div>
>        <%end%>
> </div>
>
>
>
> After rendering this I call
>  'TinymceHammer.addEditor("response_comment");'  (i've also tried
> TinymceHammer.init())
>
> This makes the text area look like a TinyMCE editor and I Can do all
> sorts of stuff to it.  except that when I hit submit on my form it
> always comes back blank.
>
> So I'm trying to figure it out using firebug.
>
> When I type in the tinymce text area and or use setContent on the
> active editor.  IT updates the UI box but the underlying textarea is
> still blank.
>
> Are they supposed to change in lockstep?
>
> here is the text area that tinymce_tag generates (I believe)
> <textarea class="tinymce" cols="56" id="response_comment"
> name="response_comment" rows="6" style="display: none; "></textarea>
>
> and the Tiny MCE stuff:
>
> <span id="response_comment_parent" class="mceEditor
> defaultSkin"><table id="response_comment_tbl" class="mceLayout"
> cellspacing="0" cellpadding="0" style="width: 413px; height: 100px;
> "><tbody><tr class="mceFirst"><td class="mceToolbar mceLeft mceFirst
> mceLast"><a href="#" accesskey="q" title="Jump to tool buttons - Alt
> +Q, Jump to editor - Alt-Z, Jump to element path - Alt-X"><!-- IE --></
> a><table id="response_comment_toolbar1" class="mceToolbar
> mceToolbarRow1 Enabled" cellpadding="0" cellspacing="0"
> align=""><tbody><tr><td class="mceToolbarStart mceToolbarStartButton
> mceFirst"><span><!-- IE --></span></td><td><a
> id="response_comment_undo" href="javascript:;" class="mceButton
> mce_undo mceButtonEnabled" onmousedown="return false;" onclick="return
> false;" title="Undo (Ctrl+Z)"><span class="mceIcon mce_undo"></span></
> a></td><td><a id="response_comment_redo" href="javascript:;"
> class="mceButton mce_redo mceButtonDisabled" onmousedown="return
> false;" onclick="return false;" title="Redo (Ctrl+Y)"><span
> class="mceIcon mce_redo"></span></a></td><td><a
> id="response_comment_cut" href="javascript:;" class="mceButton
> mceButtonEnabled mce_cut" onmousedown="return false;" onclick="return
> false;" title="Cut"><span class="mceIcon mce_cut"></span></a></
> td><td><a id="response_comment_copy" href="javascript:;"
> class="mceButton mceButtonEnabled mce_copy" onmousedown="return
> false;" onclick="return false;" title="Copy"><span class="mceIcon
> mce_copy"></span></a></td><td><a id="response_comment_paste"
> href="javascript:;" class="mceButton mceButtonEnabled mce_paste"
> onmousedown="return false;" onclick="return false;"
> title="Paste"><span class="mceIcon mce_paste"></span></a></td><td><a
> id="response_comment_pastetext" href="javascript:;" class="mceButton
> mceButtonEnabled mce_pastetext" onmousedown="return false;"
> onclick="return false;" title="Paste as Plain Text"><span
> class="mceIcon mce_pastetext"></span></a></td><td><span
> class="mceSeparator"></span></td><td><a id="response_comment_bold"
> href="javascript:;" class="mceButton mceButtonEnabled mce_bold"
> onmousedown="return false;" onclick="return false;" title="Bold (Ctrl
> +B)"><span class="mceIcon mce_bold"></span></a></td><td><a
> id="response_comment_italic" href="javascript:;" class="mceButton
> mceButtonEnabled mce_italic" onmousedown="return false;"
> onclick="return false;" title="Italic (Ctrl+I)"><span class="mceIcon
> mce_italic"></span></a></td><td><a id="response_comment_strikethrough"
> href="javascript:;" class="mceButton mceButtonEnabled
> mce_strikethrough" onmousedown="return false;" onclick="return false;"
> title="Strikethrough"><span class="mceIcon mce_strikethrough"></span></
> a></td><td><a id="response_comment_blockquote" href="javascript:;"
> class="mceButton mceButtonEnabled mce_blockquote" onmousedown="return
> false;" onclick="return false;" title="Blockquote"><span
> class="mceIcon mce_blockquote"></span></a></td><td><a
> id="response_comment_charmap" href="javascript:;" class="mceButton
> mceButtonEnabled mce_charmap" onmousedown="return false;"
> onclick="return false;" title="Insert custom character"><span
> class="mceIcon mce_charmap"></span></a></td><td><a
> id="response_comment_bullist" href="javascript:;" class="mceButton
> mceButtonEnabled mce_bullist" onmousedown="return false;"
> onclick="return false;" title="Unordered list"><span class="mceIcon
> mce_bullist"></span></a></td><td><a id="response_comment_numlist"
> href="javascript:;" class="mceButton mceButtonEnabled mce_numlist"
> onmousedown="return false;" onclick="return false;" title="Ordered
> list"><span class="mceIcon mce_numlist"></span></a></td><td><a
> id="response_comment_removeformat" href="javascript:;"
> class="mceButton mceButtonEnabled mce_removeformat"
> onmousedown="return false;" onclick="return false;" title="Remove
> formatting"><span class="mceIcon mce_removeformat"></span></a></
> td><td><span class="mceSeparator"></span></td><td><a
> id="response_comment_link" href="javascript:;" class="mceButton
> mce_link mceButtonEnabled" onmousedown="return false;" onclick="return
> false;" title="Insert/edit link"><span class="mceIcon mce_link"></
> span></a></td><td><a id="response_comment_unlink" href="javascript:;"
> class="mceButton mce_unlink mceButtonEnabled" onmousedown="return
> false;" onclick="return false;" title="Unlink"><span class="mceIcon
> mce_unlink"></span></a></td><td><a id="response_comment_image"
> href="javascript:;" class="mceButton mceButtonEnabled mce_image"
> onmousedown="return false;" onclick="return false;" title="Insert/edit
> image"><span class="mceIcon mce_image"></span></a></td><td><span
> class="mceSeparator"></span></td><td><a id="response_comment_cleanup"
> href="javascript:;" class="mceButton mceButtonEnabled mce_cleanup"
> onmousedown="return false;" onclick="return false;" title="Cleanup
> messy code"><span class="mceIcon mce_cleanup"></span></a></td><td><a
> id="response_comment_code" href="javascript:;" class="mceButton
> mceButtonEnabled mce_code" onmousedown="return false;" onclick="return
> false;" title="Edit HTML Source"><span class="mceIcon mce_code"></
> span></a></td><td class="mceToolbarEnd mceToolbarEndButton
> mceLast"><span><!-- IE --></span></td></tr></tbody></table><a href="#"
> accesskey="z" title="Jump to tool buttons - Alt+Q, Jump to editor -
> Alt-Z, Jump to element path - Alt-X"
> onfocus="tinyMCE.getInstanceById('response_comment').focus();"><!-- IE
> --></a></td></tr><tr class="mceLast"><td class="mceIframeContainer
> mceFirst mceLast"><iframe id="response_comment_ifr" frameborder="0"
> style="width: 100%; height: 100px; "></iframe></td></tr></tbody></
> table></span>
>
>
>
>
>
> On Sep 21 2009, 11:04 am, Jay McGaffigan <hooligan...@gmail.com>

> wrote:
>> thanks!
>>
>> It's a regular div and your solution is what I was looking for.  I'll
>> try it out!
>>
>> Thanks again!
>> Jay
>>
Reply all
Reply to author
Forward
0 new messages