Tabbed Interface

Is there a way to use FCKeditor in a tabbed interface? For example, tab1 is the editor, tab 2 is Show Source, and tab3 is Preview?

So, on Tab1 do all your typing and markup, as soon as you click Tab2 it shows you the HTML source with tags, etc etc. And finally, when you click on Tab3 it displays a preview.

Kind Regards,

Fri, 08/21/2009 - 13:03

alfonsoml

Joined: 31/12/2006

Posts: 3737

Re: Tabbed Interface

Yes.

you create a tabbed interface in any way that you want.
in the first tab you put fckeditor
in the second a textarea
and in the third an iframe.

whenever you switch from one tab to another read the current content of that tab (unless it's the preview tab) and fill the new tab.

Fri, 08/21/2009 - 14:12

tdnnash25

Joined: 19/08/2009

Posts: 7

Re: Tabbed Interface

Thanks. I was able to create a tabbed interface. Tab 1 is my editor instance. Tab 2 I have named "View HTML" and Tab 3 I have named "Preview".

I still need a little help if possible. When I type the word Test in tab 1 and then use Italics or Bold (for example) ... then click on Tab 2 "View HTML" ... I have to click in my textarea on this tab and then it will do a document.write to show the word test in bold/italics. I want it to show the html though (<b><i>Test</i></b>) ... I also want it to write the code in the tab. As of now, when I click in the textarea that is in my tab, it writes it out to a new page

Code:

this is in <head>:

<script type="text/javascript">
function test(){
var editor_data = CKEDITOR.instances.editor1.getData();
document.write(editor_data)
}
</script>

This is in my <body> and is tab 2's code:

<div id="viewHTML" dojoType="dijit.layout.ContentPane"
title="View HTML" onclick="test()">

<textarea name="test" id="test" rows="15" cols="80" ></textarea>

</div>

Any advice?

Fri, 08/21/2009 - 16:21

alfonsoml

Joined: 31/12/2006

Posts: 3737

Re: Tabbed Interface

document.write will clear the content of your document.

It seems that you need to learn basic javascript before trying to do such complex things.
what you need is document.getElementById("test").value = html

Fri, 08/21/2009 - 17:25

tdnnash25

Joined: 19/08/2009

Posts: 7

Re: Tabbed Interface

You are right, I'm new to javascript and do need to learn new things. I learn better by doing things and asking questions.

But, you can't use document.getElementById in CKEditor (at least not that I'm aware of). I've tried and the only thing that works is:
CKEDITOR.instances.editor1.getData(); // where editor 1 is the id of your editor instance

I am able to use that and it does get the value of the textarea, but I can't seem to convert it into source. I tried your suggestion but it didn't work for me, firebug kept saying that it wasn't a valid function.

Fri, 08/21/2009 - 21:21

alfonsoml

Joined: 31/12/2006

Posts: 3737

Re: Tabbed Interface

I gave you the code to write to the textarea. If it doesn't work then you have serious problems because that's pretty basic stuff and it should work in any page with the textarea that you have described.

Forget about FCKeditor.
Focus just on getting the tabbed interface working with two textareas and an iframe and then put FCKeditor in the first tab.