TinyMCE writes terrible HTML! - tinymce

I've currently got TinyMCE incorporated into the backend editor of a simple blogging/page-editing app, but I'm extremely unhappy with the HTML code it creates. It does all sorts of messy things like:
Adding inline style information to span tags that you can't ever find to get rid of without editing the HTML directly.
Nesting tags in nonsense ways (e.g. <p><strong><p><span>some text</span></p><strong></p> just to make something bold.)
Adding empty <p> </p> lines where they don't belong and I'm not trying to create blank lines.
EDIT: I've looked at lists of the other editors out there (including on SO), but I want to know if people firsthand have had better luck getting clean code out of their wysiwyg editors.
Any recommendations for one that outputs better code behind the scenes?

How about a rather drastic alternative, and using a WYMIWYG (What You Mean is What You Get) editor rather that another WYSIWYG editor. That way the author is in full control of the schematic markup as well as the content he/she is entering.
Unfortunately I haven't found one that is as feature rich and usable as tinyMCE, but it seems to have come a long way - see http://www.wymeditor.org/demo/

Use HTML purifier before saving the content into the database.
HTML Purifier

I found JoomlaFCK to be a very good alternative to Tiny MCE.
Hope you like it.
bye
BTW I know it is an old thread but someone might use it. ;)

Related

How to define custom wicket tag

I could not find a wicket tag like wicket:include? Can anyone suggest me anything? I want to include/inject raw source into html files? If there is no such utility, any suggestions to develop it?
update
i am looking for sth like jsp:include. this inclusion is expected to be handled on the server side.
To do this, you'll need to implement your own IComponentResolver.
This blog article shows an example somewhat resembling what you're after.
Is it raw markup that you want to include, or Wicket content?
If it's raw markup, even a simple Label can do that for you. If you call setEscapeModelStrings( false), the string value of the model will be copied straight in the markup. (Watch out for potential XSS attacks though.)
"Including" Wicket markup is done via Panels (or occasionally Fragments)
Update: If you add more detail about the actual problem you need to solve, there's a good chance that we can find a more "wickety" solution, after all, JSP and Wicket are two different worlds and the mindset of one doesn't work very well in the other.

Is it safe to use only HTML editor instead of Textarea?

I am thinking of converting my forum input textarea exclusively to TinyMCE HTML editor. I already have both options but it is a pain maintaining both and inserting images in textarea needs preview etc...
This is more of a general question. Do you think it is safe to include HTML editor (with all the safety measures like paste only text, filter for html not allowed etc...) as the only kind of editor on a forum? It's 2011 and machines are generally fast, connection are better.
What are the downsides of using HTMl editor instead of text field? I can not imagine a blog CMS to have "normal" textarea for input.
But for some reason on forums I do not see many html editors... Even the TinyMCE site has a textarea for their editor. So is there really something to watch out for and a no go...?
I know it is more of a phylosophical question, but I guess you have experience with forums, blogs, etc...
My site is about cooking and beeing able to insert pictures (and upload them) the easy way seems to be a big plus for our home cooks ;-)
If you don't consider security (you'll need to filter the HTML input on the server side so it won't contain anything dangerous), there's only the user experience left for consideration. On a forum you write text most of the time. There's seldom any use for more functionality than bold, italics and images. The solution used here on Stack Overflow addresses this by having a very limited set of functions, and applying it in the textarea with a sane markup language.
Other forums either use old software or didn't think the improved user experience was worth the effort. The textarea-only solution fits most forums well enough since most of the input is text-only anyway.
I do think you would benefit from HTML input. Make sure that only allowed HTML can be sent though, since the user can circumvent everything on the client side.
TinyMCE uses Javascript to add functionality to an existing textarea. If Javascript is disabled, then the user will be presented with a normal textarea anyway.
I would say it's relatively safe, as long as all input from the user is validated on the server before it's used for anything.

Stripped Down CKEditor Vs Markdown

I have been looking into why WYSIWYG editors are bad for content creation. The most common reason given is that they output incorrect html. But what if I use editors with reduced functionality?
My requirements are only the ability to italicize, make text bold, create ordered/unordered lists and (maybe at a later date) add inline images.
My users will hopefully be 'persistent' users (small numbers of laypersons using the app frequently)
In this context how do I choose between Markdown (WMD editor) & a stripped down WYSIWYG editor. How would page performance be affected with each? I consider fidelity & reproduciblity of data to be important.
You choose by considering your audience. Wiki markup and markdown is for geeks. Your customers sound like they're probably not geeks so I would suggest CKEditor or Twiki-style editor (good, simple Wysiwyg UI) for non-geek users.
Basic concern: Why force lay-people to learn a markup language when solid alternatives exist?
See the Custom Toolbar editor in this CKEditor demo. Or check out TinyMCE.
OK, I tested both.
Even for my basic formatting requirements, CKEditor generated quite ghastly html
Now this is the input
This actually appears to be better
I hope users understand what we are doing
Lets see
But in the meantime
CKEditor Output
<p> This actually appears to be better</p>
<p> I hope users understand what we are doing</p>
<p> Lets see</p>
<p> </p>
<p> But in the meantime</p>
And Markdown Output
<p>This actually appears to be better <br>
I hope users understand what we are doing <br>
Lets see</p>
<p>But in the meantime</p>
Now if this is the difference between these two for the most basic formatting (linebreaks and paragraphs), what will it be like in a 200 word submission. I think most users will need to know only this
For line breaks, two SPACES and hit ENTER.
For new paragraphs, hit ENTER twice
The rest of the stuff could be learnt incrementally
Is it that hard to engineer a 'basic' WYSIWYG editor?
EDIT
After adding these to config.js above problem is solved
config.enterMode = CKEDITOR.ENTER_BR;
config.shiftEnterMode = CKEDITOR.ENTER_P;

Any WYSIWYGs that use contentEditable rather than an iframe?

I am looking for a list of WYSIWYG editors that use contentEditable rather than a designMode iframe.
The reason I want this is that I want to have a few regions (divs) on my site that users can edit, and I want the styling (fonts, font colors, etc). to look the same in the edit area as it normally does. I don't want to have to apply a stylesheet to the WYSIWYG's iframe.
Anyone know of any light-weight, free/open-source ones?
It's not free but I personally feel that the Telerik RadEditor is hands down the best WYSIWYG around.
It's not free
It's .NET only
It allows you to style the editor to match your site exactly
It has some great asset management tools
It's super easy to configure.
Also if you can get away with a little less "fancy" I'd say that WMD is an awesome WYSIWY***M*** editor, and can be used across multiple development languages (It's what StackOverflow uses here on this site).
New ckeditor v4 beta has support for content-editable. http://ckeditor.com/ckeditor-4-beta
Looks like NicEdit uses contentEditable. YAY! THIS MAY WORK!
Another few to throw in there, although I've never used any of them in production so can't vouch for them:
Aloha Editor
wysihtml5
Raptor Editor

Suggestions for a very easy to edit CMS?

I need advice/suggestions.
At my place of work - we have a large data set.
We would like to server the data up as editable html pages.
(Its mostly lists of simple text)
We would like to add data, change it's order, update text etc...from the editable pages.
It has to have a pretty low bar for usability and WYSIWYG is a must.
The folks who will edit are not programmers by a long shot.
We are not sure Wiki will work.
It might have to do - but not sure.
Changes have to be tracked and written back into the DB
I am thinking some kind of open source CMS might work?
Wordpress, Joomla, Drupal - something that can get us up and running pretty quickly.
I really am open to suggestions - not sure where to begin on this one.
Thanks all
If you don't have someone available right now with expertise with a specific CMS, it will not be quick to set up at all. One good reason is that you'd have to import all of your existing data into whatever form the CMS supports: this is a task for someone who has done it before. On the other hand, if you can pull that off, some of the built in WYSIWYG editors are quite easy to use, with some systems you get versioning and author information for free etc. I'm speaking mostly with the eZ Publish CMS in mind, although it's probably true for other systems.
I would make a simple CMS site that uses the Ajax control toolkit HTML Editor and perform updates to the database on postback.
Here is the link to the Editor example
http://www.asp.net/ajax/ajaxcontroltoolkit/Samples/HTMLEditor/HTMLEditor.aspx
CMS Made Simple (http://www.cmsmadesimple.org) is very easy to set up and use. You do need to understand xhtml and javascript for the theme whacking, but once it's set up it has been trouble free. See my http://www.ConvinceProject.com as an example. It is MUCH easier to use than Drupal and appears to be more stable. I've had Drupal crash when installing security updates to modules, for example. It gives you full access to the header metatags, has fully integrated php and smarty tags, seems quite complete.
AFA importing, this is all mysql-based, although it can use others. If you have a web-whacking coder, pages can be 'scraped' and stuffed if it's more than cut and paste will do.
Lots of us can do it, it's not hard.
If I understand you correctly, it seems like you just need a web-based GUI for editing your DB. Honestly it would probably be faster to just roll your own in the language most familiar to you. There are many fine WYSIWYG editors out there that you can wrap around a text field, such as http://ckeditor.com/.
On the the other hand if you're hoping to solve this problem with DB skills and not do any web dev it may indeed be easier to find a simple CMS. ModX and SimpleCMS comes to mind. Joomla, Drupal and WP all come with so many out of the box features you'd have to strip out - look for something that starts fairly simple. Drupal in the right hands could do this, it has tools for importing/exporting to external DBs but the learning curve is pretty steep. Be aware that some CMSes do strange things with entry data...you may have to look for a text field inside a stored array (Drupal) instead of stored as a straight text field.