This is a really boring post and is designed purely to attract the attention of content editor developers who very kindly make the vast array of Content Editing plug-ins that are available today.
I’m using one now – it’s in Blogger and it works fine if it is a little bit limited. But try copying and pasting a Word document in and it will go belly up and insert a ton of Microsoft or Apple stuff in. It’s a real pain.
So what’s going on – in the early days we had HTML Editor – it was a simple Plugin that you used to allow people to format their entries on their CMS. So you have a website – you want to edit it and you use an Admin Area (password protected) to get to your pages. But unless you know HTML you need to have the controls to make the text bold, italic, bigger, smaller, add an image and so on. Many of you always use these tools and that is fine.
After HTML Editor – which worked well – we had FCK Editor – it became the norm – until TinyMCE came along and that was awesome. Now we have a few more CK Editor is also well respected. But ALL these tools are made by developers and ALL of them apply some sort of HTML Verification system. To make sure normal people like you and don’t go making any mistakes and making a big mess of things.
The problem with this is that all these tools rewrite our text. When I hit Save on this document I am writing now… everything I will have written will be checked and overwritten.
The problem is simple – what if I have written something I want to write, but that does not agree with this process. I lost. So here are my bugbears:
- Paragraph Tags – I often have code that does not require tags – why does TinyMCE & CKEditor insist on having tags surrounding absolutely everything. I might have an image or a block of text that does not need the tag… Tables are common – a Table cell does not additional tags inside it. Stop putting these in for me.
- iFrames – it common to add a Google Map, or some other outside content – why do these text editors bleeding well chuck out most of my code. The code is coming from Google – of course, it’s going to be OK. I’m putting it for a reason and I want it. Stop rewriting my code.
- Flash – same thing – If I want a small Flash File in this Post – it just won’t have it – why not the code is all validated by Adobe. Let me have it will you? There is no reason a Post like this cannot use Flash. YouTube is going to turn all their Flash Videos into iFrames – but they won’t work here.
- The biggest of them all. If I paste something from Word – what happens – It takes all the formatting, all the styles, all the code, acres and acres of it into the Editor with it. If I copy and paste – surely I only want the text – what’s this all about.
——————
In short, what is my gripe here? These Plugins are fantastic and make a hard job, much easier, but do they have to be such sticklers for code… They say there are being XHTML compliant – but we’ve moved onto HTML5 now – get with it.
And stop bunging in tags everywhere, will you.
========================
I did warn you that this post would be boring – but you ever have the same problem as me – post a reference to this article on the CK Editor, TinyMCE or FCK forums or other content editor sites will you, thanks…
Sorry if I came across harsh, but some things are hard to explain so I get frustrated 🙂
If you want a straight up answer to "why" it is this way, there is no simple answer, some if it is cause of browser limitations, some if it is expected behaviour doesn't match up with everyone and some is just plain configuration problems.
It is always good to have a debate though, thank you.
I don't mean to go in circles and thanks for the article. I shall leave the issue here for the time being.
Clearly there is a difference between what 'educated' developers want us to do and what 'average' user would like to be able to do. Only time will tell.
On a more serious note, thank you for your input on this subject.
Seems to be going around in a circle, but ill try again.
Here is a good article regarding P tags you can read, done by the TinyMCE devs I think. http://blog.moxiecode.com/2010/09/13/paragraphs-vs-br/
There is no "solution" to give you, cause there is no problem if you use the tools as they where meant to be used.
As for the iframe/flash… what is it you do not get? Adding a flash or an iframe to a page is possible, however, it doesn't work well in a CONTENTEDITABLE field, and thats the field you are editing inside when you use any WYSIWYG editor. Whether you want it or not, if the browser can't handle it, you have to use the tools (workarounds) available.
If you can not modify the WYSIWYG editors options without breaking your CMS, I would advice against using that CMS at all. There are plenty of systems that do offer configuration support (through the admin user interface even) for the most common WYSIWYG editors, WordPress and Drupal are two of them.
You are right, when you google the P tag "problem" there are some posts and they all say the same, and its usually cause the person asking the question does not understand an ounce on how things work. There are zero downsides to using P tags in your code, it is actually consider more semantically correct to use P tags.
I am getting there, but you're not selling me on everything… CKEditor is the best in my limited opinion, followed by TinyMCE – but regardless it's a battle.
Currently, I'm working on Magento – which advise you not to update settings if you ever want to upgrade and stay current. They use TinyMCE, I have another bespoke CMS solution that we use CKEditor so I am not short on experience.
And, with respect and with my current level of experience – if I don't need a < p > then I really don't want one. Why cannot I choose for myself… why do these WYSIWYG editors force it on me. I am not recreating Word here – I'm using the Internet. I just want the ability to choose – that's all.
If I want to get Flash and iFrames working I can… fiddly, but possible… WYSIWYG editors just simply have to let me choose – not rewrite my code. It seriously annoying.
Implementation – we've been through hurdles for this and agree with you totally there's tons that can be customised – but in this morning case I was using Magento (building an e-commerce site) and they use TinyMCE, but they advise against customising because of future updates… any customisation are written over.
My final comment really to move this on a notch is that when I googled 'TinyMCE paragraph tags', there is tons of people out there with the requirement as me… but often these requests are met with the same request – you need the tag you just don't know it.
No one offers a solution – everyone says stop complaining and get over it.
Well sorry – but I know what I need and I don't need < p > tags – and I do need Flash and iFrame support period… often too.
About your title, heard of SHIFT+Enter?
Afaik both TinyMCE and CKEditor has the ability to clean up Word HTML and does it quite well, and if there should be a problem with it, they also have force paste plain text options, so might be an implementation issue with whatever editors you have, but I actually agree that the pasting from word is a problem with most editors. However, even with this there are browser limitations that prevent the editors from handling it correctly.
I am not involved in developing editors directly, but I know quite a lot about browsers and wysiwyg editing in general.
1) You do need p tags, you just don't know it.
2/3) What? I just said browsers have problems displaying Flash/iFrames inside another contentEditable field? What didn't you get?
4) Huh? You still get the same crap in the browser when pasting from Microsoft now as you did 5 years ago, nothing has changed. Actually, Safari also adds a bunch of junk (apple-style-spans etc) when you paste, so its not limited to Microsoft.
One thing I forgot to mention, implementation issues, also something these editors have problems with, if you look at CKEditor or TinyMCE you see they have tons of options and customization. Usually the default set should work for most ppl, but depending on how you set things up on your site you might need to tweak the configs. On a well formed website for example, you shouldn't have to even know what P tags is.
A lot of the behaviour in the current WYSIWYG editors is also due to the fact that they mimic Microsoft Word, in order to have the shortest learning curve possible for users, that is also one reason why paragraphs are so essential, the behaviour in Word is exactly the same, you press enter, you get a paragraph, you press SHIFT-Enter you get a single line break.
I do not know what editors you have tested, there are a whole bunch of really crappy commercial/open source editors, stick to the big ones that actually solve browser issues, editors such as CKEditor and TinyMCE.
Do you feel informed?
I just re-read your reply – for which I thank you… but on thinking – what have browsers got to do with it. All my Browsers (IE7, 8, FF3, 4, Chrome etc) have the same issues… These annoyances I am gripping about are cross browser.
Your points
1) Sorry I do not always need a < p> tag – to say I do is not user friendly…
2 & 3) iFrames and Flash should work and DO work fine wherever I want them to work… it's my choice and should not be down to the WYSIWYG editor…
4) Microsoft may have started this ball rolling – but they are nothing to do with it now…
Your final comments also attack the STUPID USER behaviour – I cannot disagree more… The user has a need – he employs certain tools to do a job… he expects them to work according to his needs.
If there are better tools that could be employed to achieve a better WYSIWYG experience – please inform me.
Mate – I'd love to know who you are… Just look at the Title of this Post (in Blogger) – I inserted the < p> and it put in a Paragraph.
I would agree I am probably off on many parts of this, but as a user I am exasperated with these WYSIWYG editors.
When's the last time you pasted a Word Doc into a WYSIWYG editor, try it… then deal with it. That is my definition of Horrible! How can these editors allow all that code in and then force me to have a Paragraph Tag when I don't want one.
You call these WYSIWYG editors – but the funny thing is that is just not true – What I See and What I Get are two different things.
If you're involved in developing these Editors please make then more user friendly because at the moment they just aren't.
PS I know of hundreds of instances where a Paragraph Tag is just not needed.
You are so off on so many things.
You are completly forgetting the browser(s), they are the ones that provide the editing functionality and almost all your issues has to do with the browser wysiwyg editing functionality, or lack there off. There hasn't been any update on this area in the browser since MSIE 5.5 was released, thats what all the WYSIWYG editors have to deal with. But what about the browsers released since MSIE 5.5 you say? Well there IS NO OFFICIAL SPECIFICATION FOR WYSIWYG EDITING, they all mostly copied other browsers (IE 5.5) implementation and made some random changes of their own. Thats why a lot of the code in the WYSIWYG editor is simply to normalize the editing experience for all the different browsers.
1) Paragraphs are needed in order for some browser functionality to work at all.
2) iFrames inside an editable content area does not function well in most browsers, period.
3) Flash inside an editable content area does not function well in most browsers, thats why most editors use a placeholder instead of the image.
4) Yeah I bet all editor developers HATE Microsoft for that part as well, but most editors do a good job of filtering this out now.
One thing to note about HTML5, your code just became HORRIBLE! Open tags and attributes without quotes is valid in HTML5, I had some examples here but your comment field didn't allow some tags.
Try to parse horrible code on the server side! Thats why XHTML and XHTML5 is needed, in order to provide a good ruleset for server side parsing as well as proper validation, also XHTML5 should be faster to render than HTML5, since the parser doesn't need to figure out STUPID USER behaviour.