Adding a WYSIWYG HTML Editor to Your Site

This is a forum topic for discussing the article "Adding a WYSIWYG HTML Editor to Your Site":

http://www.elated.com/articles/adding-wysiwyg-editor-to-your-site/

Explores JavaScript WYSIWYG HTML editors, and shows how to integrate CKEditor and TinyMCE into your Web forms.

I have successfully added ckeditor to my Question Answers script at: http://www.aboutcivil.com/answers , Thanks to your nice tutorial.

The WYSIWIG editor now shows up instead of the text field but is not accepting the data. Like when i press submit button, it says "Your answer cannot be empty" , means its not taking the input and wont process it. Can u please help me on this issue??

--
http://www.aboutcivil.org
http://www.enggpedia.com

@haseebjamal: I can't see the WYSIWYG field in your page. Where's your call to CKEDITOR.replace()?

Cheers,
Matt

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

@Matt
After you have registered, please click on any question, when the answer button shows up below the question, click it and then the ckeditor shows up, working fine but the form is not submitting.

Thanks for your time Matt

--
http://www.aboutcivil.org
http://www.enggpedia.com

Excellent tutorial and dead easy to follow, I have very basic knowledge and managed to add tinymce in minutes - great work!! Thanks!

@matt2002: You're welcome - thanks for the feedback

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

Thank You, Dead Easy To Follow, Thanks for being such a good teacher...

Hello Matt,
First of all thanks for your tut on CMS. I am trying to add ckeditor into textarea field of edit article page of CMS (downloaded by your site). But no changes is showing there.
I've added

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

to head tag and add CKEDITOR.replace( 'content' ); after the

</textarea>

tag.


Tell what is the problem. I know i am missing out something but dont know actually.
Help me!

@vny009: There is a discussion in the comments for the CMS tutorial about integrating CKEditor:

http://www.elated.com/forums/topic/5114/

Just search the page for "ckeditor".

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

Thanks for your reply but I've no problem with CKeditor now.
I solved it already. Thanks again for your tutorials.
Can you make a tutorial for how to make a complete basic site by drupal.
I have searched many contents regarding it but not satisfied with that.

@vny009: Glad to hear it. Never used Drupal but I might have a go at some point - could be a fun project!

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

Dear Matt,

Thanks for another great article.

Can i print this article. kindly send me printable link if possible.

Thanks in advance.

 <script type="text/javascript">
tinyMCE.init({
  theme : "advanced",
  theme_advanced_toolbar_location : "top",
  theme_advanced_toolbar_align : "left",
  mode : "exact",
  elements : "content"
});
</script>

This little piece of code I placed at the top doesn't allow my form's content to be submitted to the database. When I removed it, the form's content was submitted, how do I sort this out? Thanks a lot.

@papadammy: You'll need to post the URL of your form so we can take a look.

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

Hi-Thanks for this nice tutorial (from wayback when-December 2009!).
I am looking at tinymce editor at the moment.
Currently I am echoing the editor content in form_handler.php with:

<?php
/* post.php : this page shows what insert.php has sent */
echo(stripslashes($_POST['articleContent']));
?>	

I really want to try & save the editor content to a file but this is proving difficult for me (see my post on StackOverflow here:
http://stackoverflow.com/questions/13660978/saving-tinymce-textarea-content-to-file/13662092#comment18751239_13662092

[Edited by Richard_Paul on 02-Dec-12 11:15]

http://www.tizag.com/phpT/filewrite.php

--
Chris.
So long, and thanks for all the fish.
http://webmaster-talk.eu/

Hi--

I feel dumb asking this since it seems fairly fundamental and no one else has mentioned it so its most likely something I'm doing wrong... but:

------------------------------------------------------
<textarea cols="80" rows="10" id="content" name="content">
&lt;h1&gt;Article Title&lt;/h1&gt;
&lt;p&gt;Here's some sample text&lt;/p&gt;
</textarea>
<script type="text/javascript">
CKEDITOR.replace( 'articleContent' );
</script>
------------------------------------------------------

It's a snippet of code from the CKEditor example that you've shown above. As you can see, the ID or Name of the textbox is "content" and if my understanding is correct, this is the ID or Name that needs to go into the CKEDITOR.replace call. In this case, "articleContent" is written there when it should be "content"? I'm kind of confused about this. Please help. Thank you.

--
-Fayt