How do you access the editing area content from JavaScript

Thu, 01/31/2008 - 00:59

I want to be able to access the value/content in the editing area via JavaScript. I cannot seem to identify the proper object path to access this.

Here is some sample code:

<form name="editor">
<div>
<input type="hidden" id="FCKeditor1" name="FCKeditor1" value="" style="display:none" />
<input type="hidden" id="FCKeditor1___Config" value="SkinPath=/fckeditor/skins/office2007/" style="display:none" />
<iframe id="FCKeditor1___Frame" src="/fckeditor/editor/fckeditor.html?InstanceName=FCKeditor1&Toolbar=Default" width="685" height="500" frameborder="0" scrolling="no"></iframe>
</div>

</form>

Since the form posts the editing area text as the field FCKeditor1, I figured I could access the value via JavaScript using "document.editor.FCKeditor1.value", but that does not work since the editing area is not part of a form and is in the iframe. I tried accessing document.getElementById('FCKeditor1___Frame').document, but that comes up undefined.

Does anyone know the object path to access this? Is there a built-in method to get this value I am missing?

Thanks

Tue, 02/12/2008 - 00:56

Permalink

jim mccabe

Re: How do you access the editing area content from JavaScript

I have the same question - it seems like such a basic question I feel like an idiot for not seeing the answer anywhere. It doesn't look like it's in the documentation, since it seems like the examples all assume you're using the editor in an old-fashioned submit-form-page-refresh style of application.

Has anyone figured out a way to get the current value of the editor from Javascript?

If I create the editor and pass it an ID like "test123", and then call CreateHtml(), it creates a hidden INPUT field with that ID, but the ID doesn't get an updated value as I type. So I'm confused about how one is supposed to go about getting the value.

- Jim

Tue, 02/12/2008 - 01:32

Permalink

jim mccabe

Re: How do you access the editing area content from JavaScript

Here's the answer. It was in the documentation after all but it was very different than the approach I would have intuitively assumed.

First off, the value is not automatically stuffed into an INPUT field like I'd expected. Secondly, there is an editor instance which has a GetHTML method but that instance is NOT the same as the object you create with "new FCKeditor()". They are entirely different.

Now the solution.

var editor = new FCKeditor("test123");

// ... Then later, to get the value
var inst = FCKeditorAPI.GetInstance("test123");
var sValue = inst.GetHTML();

- Jim

Wed, 02/13/2008 - 20:07

Permalink

michael_diverge

Re: How do you access the editing area content from JavaScript

Thanks for the info!

Sun, 02/17/2008 - 01:20

Permalink

imnotvgood

Re: How do you access the editing area content from JavaScript

hello, thanks for at least getting me on the right track. I have a further problem in that I am using multiple editors on my pages via the ReplaceAllTextareas() function. So I won't know the name of the instance. Each editor is however in it's own form..currently i was passing the form name to my javascript function and picking up the textarea within that form. Is there any way i could 'pick up' the instance within the form to let me access the correct editor instance dynamically? Or will i have to pass the editor instance name along with the form name to my function?

thanks

Sun, 02/17/2008 - 01:40

Permalink

imnotvgood

Re: How do you access the editing area content from JavaScript

hmm panic not.

i'm not sure how correct this is..but as my function was picking up the correct textarea (but not its contents) and storing its name in a var, i have just used this var like so

for(var i = 0;i < fobj.elements.length;i++)  
 {
    formEl = fobj.elements[i]; 

    switch(formEl.type)
    {
      case "textarea":
                     var inst = FCKeditorAPI.GetInstance(formEl.name);
                      var sValue = inst.GetHTML();
                       //etc

Fri, 02/29/2008 - 18:10

Permalink

irishmaninbv

Re: How do you access the editing area content from JavaScript

I am trying to make this work

var editor = new FCKeditor(eleFckComment);
var inst = FCKeditorAPI.GetInstance(eleFckComment);
alert(inst.GetHTML());

where eleFckComment is the name of my element on the page (i.e. fckComment) and it gives me a error on FCKeditor being not defined. Any ideas on what I am doing wrong here?

CKEditor

Edit post