I use 'radio buttons' to switch a tinyMCE editor field between the
editor iframe and the orginal textarea, which is essentially the
'source'. But I could have just as easily wrapped the elements in
'tabs' and used these to trigger the code instead. I don't have a
preview button, but I'm sure this would also be doable with a little
custom code - tinyMCE has a lot of callbacks to work with and jQuery
can easily manipulate a preview iframe.
My toggle/radion-buttons call a global function. This not only
switches between source and editor, but can also initialize the
editor, because some fields I 'load' in source-view. At the bottom of
the function I add/remove a "current" class to/from the radio buttons
to add some extra style. You would need to modify this code to suit
your need, but it may give you a starting point if you choose to go
this route.
FYI, I use CSS to make the textarea and editor the same height with an
elastic width, so switching between them looks quite seamless.
/Kevin
<DIV class="richtext-opts">
<INPUT id="fieldName_Text" name="fieldName_state" type="radio"
onChange="toggleRichText(this,'#fieldName', 0)">
<LABEL for="fieldName_Text">Text</LABEL><BR>
<INPUT id="fieldName_HTML" name="fieldName_state" type="radio"
onChange="toggleRichText(this,'#fieldName', 1)" checked>
<LABEL for="fieldName_HTML" class="current">HTML</LABEL>
</DIV>
function toggleRichText (evt_or_elem, textarea, enable) {
var
$Btn = $(this.tagName ? this : evt_or_elem)
, show = (enable != undefined ? enable : textarea)
, toggle = (typeof show == 'boolean' || typeof show == 'number' ?
false : true)
, TA = (typeof textarea == 'object' || typeof
textarea == 'string' ?
textarea : false)
, $TA, id, Instance
;
// if a textarea object OR selector was passed, use it...
if (TA) $TA = $(TA);
// else try to find the textarea on the 'same row'
else $TA = $Btn.parents('TR:first').find('TEXTAREA:first');
if (!$TA.length) return; // can't find the textarea!
if (toggle) show = $TA.is(':visible');
TA = $TA[0];
id = TA.id;
Instance = tinyMCE.getInstanceById( id ); // TEST for Editor
if (!Instance) {
// init TEXTAREA first-time accessed
if (show) tinyMCE.execCommand("mceAddControl", true, id);
}
else if (show)
tinyMCE.get( id ).show();
else
tinyMCE.get( id ).hide();
// add/remove 'current' class from corresponding LABELs
if ($Btn.length && $Btn.attr('tagName')=='INPUT') { // radio buttons
$Btn.next('LABEL').addClass('current');
$Btn.siblings('INPUT').next('LABEL').removeClass('current');
}
};
On Aug 20, 12:08 pm, tdnnash25 <[email protected]> wrote:
> Well, I'm aware of that and what it does. The thing is I have a 3-
> tabbed interface, when I click on Tab 2 ("View HTML"). I want the same
> behavior as if you click on the Source button in CKEditor (formerly
> known as FCKEditor). It displays the source. I don't like the fact
> that with TinyMCE and even FCKEditor, it displays a pop-up window to
> show the source/html. This is why I have a 3-tabbed interface ...
> just need to figure out how to get it to work, hehe.
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"jQuery UI" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---
