Starting rich text editor with a JavaScript onclick

Hi,
Please forgive what I am feeling is a stupid question but I would be really grateful if someone could point me in the right direction.

At the moment, I have CKEditor set up in the most basic way possible - the page opens and the rich text editor starts. What I am wanting to do is display the content of the page with an icon above it that the user will click when they want to edit the text. Clicking the icon will open the editor.

So, I have got to the point of thinking that I could replace the standard javascript call:

CKEDITOR.replace( 'editor1' );

with an onclick:

<a href="" onclick="CKEDITOR.replace( 'editor1' );"><img src="image.jpg"></a>

but when I've tried that, clicking on the image causes the editor to appear and then very quickly disappear and return to the normal view of the content text. Also, before clicking on the image, the content is displayed in the form textarea rather than the normal display.

Is what I am after possible in JavaScript please? I am at the point of thinking that I would be better to use a form containing the 'Edit this text' image in php to display the html form and textarea when the image is clicked.

Any thoughts or pointers would be most gratefully received.

Cheers

Stu

Sun, 09/04/2011 - 00:06

alfonsoml

Joined: 31/12/2006

Posts: 3737

Re: Starting rich text editor with a JavaScript onclick

Use this

 <a href="#" onclick="CKEDITOR.replace( 'editor1' );return false ">

For your other question, you can use a hidden textarea and a div with the rendered view

Sun, 09/04/2011 - 11:36

sillytrouts

Joined: 30/08/2011

Posts: 6

Re: Starting rich text editor with a JavaScript onclick

Thanks for the help - I think I can see where to go with it now. I will have a play later (once the kids are in bed!) and see if I can get it sorted.

Many, many thanks,

Stu

Sun, 09/04/2011 - 21:53

sillytrouts

Joined: 30/08/2011

Posts: 6

Re: Starting rich text editor with a JavaScript onclick

I think I'm nearly there, but one final problem, the save button is greyed out!

Here's what I have done:
1. Called the JS script in my head:

<script type="text/javascript" src="/scripts/ckeditor/ckeditor.js"></script>

2. Added the following html:

<div id="contentPageBody">
   <a href="" onclick="this.style.display='none';CKEDITOR.replace('body1'); return false;">Edit this content</a>
   <div id="body1">
      <p>This is my content. This is my content.</p>
      <p>This is my content. This is my content.</p>
      <p>This is my content. This is my content.</p>   
   </div>
   <form name="contentEditor" action="/aboutus/index.php" method="get">   
      <textarea style="display:none" name="body1">   
         <p>This is my content. This is my content.</p>         
         <p>This is my content. This is my content.</p>
         <p>This is my content. This is my content.</p>
      </textarea>
      <input type="submit" value="Save changes" />
   </form>
</div>

I think I understand that having the CKEDITOR.replace before the textarea causes the save button in the editor to be blanked out, but I am not sure what to do about it.

I suppose I have two choices:
1. Ignore the problem, remove the same button from the editor and use my form input button.
2. Fix the problem and have both buttons available.

I would like to make the editor's save button work, so please can you point me in the right direction again?
Is there a way of putting the CKEDITOR.replace after the text editor but calling it from my link before the text editor?

Many thanks,
Stu