[Webinar] Streamline your web hosting managementRegister Today

x
?
Solved

CKEditor issue and TInyMCE

Posted on 2010-04-02
3
Medium Priority
?
246 Views
Last Modified: 2012-05-09
I have been playing around with using a WYSIWYG editor on some PHP pages.  I tried TinyMCE and CKEditor.  They are both pretty nice for open source, although I think I like the CKEditor better.  Problem is, the documentation isn't the bast, atlhough if you dig around a little there does seem to be some.

The problem that I've had with both is that it looks like the editors are changing the contents of the textarea after the page has loaded in a manner that I want to prevent.  Namely, it looks like it is putting paragraph tags before my existing content like this:
-------
Original content, in database:

<p>test</p>, which should be what is rendered on the page.

But after the page has loaded and all scripts/jsscripts have run the textarea is like this,

<p>
      &nbsp;</p>
<p>
      test</p>

with the extra paragraph container and spaces at the time and some extra spaces added after my original opening paragraph tag.  This is reproducible and it seems that the CKEditor javascript must be modifying the contents that is rendered from the server.  I would prefer that the contents of the textarea be precisely what I have stored in the database server rather than being modified with the extra <p> tags.

I have the content data stored in a MySQL database and the contents gets written out to the text area when the server renders the PHP page.  I have a save button that saves the form that the textarea is in via an AJAX call that updates the database.  This is working fine.  I am using jquery with the page for some other things and I guess CKEditor supports jquery with an extension.  The calls for getting the content are like:

$("selector").val();

This is also working.

This is really annoying.  I've seen some other posts elsewhere about this issue in both TinyMCE and CKEditor.  I just thought there might be a configuration parameter that could prevent this.

I guess there is a commercial product as well, e.g. Cute Editor for PHP.
0
Comment
Question by:sscotti
  • 2
3 Comments
 
LVL 5

Author Comment

by:sscotti
ID: 29484593
As a follow up to this question, I am looking for a way to add a custom button to the editor toolbar that will close the editor window.
0
 
LVL 5

Author Comment

by:sscotti
ID: 29486066
Was looking for one last thing related to this.  There is normally or can be a save button in the CKEditor editor toolbar.  Normally, this just submits the form via a post.  I actually want to submit the form via ajax.  This works fine when I use an onsubmit handler in the form, but for some reason, it doesn't capture the event from the save button in the editor window.  I want to intercept the save button event from the editor window so that I can use the AJAX call rather than just submitting the form via a post.
0
 
LVL 51

Accepted Solution

by:
Steve Bink earned 2000 total points
ID: 29538909
The problem you are describing annoys me to my last hair, but the people over at CK are just too lazy to bother with fixing it.  Their forums lit up with this problem when it was first discovered, and their response was pretty much "white-space is ignored by standard, deal with it".  Never mind the idea that their editor is no longer faithfully reproducing the user input.  

More info, and the official recommended work-around:  http://dev.fckeditor.net/ticket/3260
0

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

613 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question