Specific things not so great about the html editors

Topics: General
Jul 6, 2011 at 3:40 PM
Edited Jul 6, 2011 at 3:45 PM

I've been authoring content for about 2 days on a new site which has the fundamental goals of (1) promoting my business, (2) promoting orchard as an easy to use platform for content management via tutorials/quickstarts that are contextual for my clients.

Temporarily the site and some content can be seen here: http://blogs.climbfind.com/social-site-training

It's been 'inefficient' to author html in large quantities and I'm about to embark on a mega site with a client. I wanted to try be very specific about the things that are frustrating in case they shed some light:

With TinyMCE:

- The fact that html is a popup, instead of embedded in the UI

- Having only a small window makes it is basically impossible to work with the html unless you only need to edit more than one character/point in the html.

- Everything being wrapped in p tags automatically and generally the editor changing ANYTHING that you did not type.

- Not preserving the formatting that you set to the text while you work with it so your brain can interpret the html.

Overall I feel TinyMCE is unusable if you want to work with html.

With CKEditor

- Having your cursor someone in text view and switching to source and the html view / cursor is at the top of the HTML and you now need to go dive through to find the point you want.

- The auto formatting on multiple lines!

- The default height of the content area. I drag the size of the editor bigger every time I need to edit a page. This short height is made twice as bad and issue with the auto formatting on multiple lines.

- Pasting an image from the clipboard looks awesome in the content view and leave masses of random characters in the source view (not sure if there's anything that can be done about this), but again this makes editing html hard and slow as the scroll bar becomes so huge.

- I can't customize the buttons (which to show/hide). I want to do this because buttons take up so much of the UI.

- Not preserving the formatting that set to the text while you work with it so your brain can read the html while you create it and coming back next time at it's all ruined.

 

I actually think for now the best thing to do is disable both editors and just work with a plain text box. It will be good to try to use live writer to create/edit pages.

Jul 6, 2011 at 4:55 PM

I've been caretaking the CKEditor module. As it's a third-party module this discussion isn't relevant to Orchard itself, and you can raise issues at: http://orchardckeditor.codeplex.com - I'd started commenting this on the workitem you raised but I got sidetracked. I'll respond in full here anyway:

- The source / HTML switch sounds annoying but obviously that's a limitation of CKEditor itself. Not sure if that will be addressed in a future CK release, but I'm trying to update it fairly regularly.

- By "auto formatting on multiple lines" you might be talking about the CKEDITOR.ENTER_BR setting - the original author put that in to address an issue but I'm not sure what - again you can change that in the configuration (I'll probably remove it in the future, I don't think it's needed)

- I'm not sure if you have the latest version but I introduced a mechanism specifically allowing you to reconfigure it (without changing files that could be overwritten by updates). You can copy the CKEditor.Config.cshtml file directly into the admin theme, or into your own module for convenience (it just needs a dependency on CKEditor) and it will override the default. You'll see that the toolbar is completely defined in that file and you can customise it however you want.

- The height of the editor can again be customised in config. See http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html for all the available config options. I'll probably increase the default, it is a little small; but I'm also in the process of adding config options into the Orchard Dashboard settings page, so that will eventually be available there along with all other options. Obviously there are a lot of options to fully support everything so it'll take a while. Also, are you aware that CKEditor has an instant "full screen" button which is actually somewhat quicker than dragging the size of the editor?

- Pasting from the clipboard is definitely the wrong way to embed images! What's happening is it's encoding the entire image to base64 and including it in your HTML. This is only supported by very new browsers and makes your HTML ridiculously big if you have decent-sized images. The correct way is to upload images on the Orchard "Media" admin, and copy and paste the embed code from there. I realise this is really fiddly, which is why my main priority is getting Orchard's media picker integrated so you have file browsing, uploading and embedding properly available.

- Your final point I have no idea what you mean: "Not preserving the formatting that set to the text while you work with it so your brain can read the html while you create it and coming back next time at it's all ruined." Perhaps you can elaborate a bit on this?

- Finally I would recommend that you actually write your content in MS Word before pasting into CKEditor using the special "Paste from Word" button designed for exactly this purpose. This will also help avoid the danger of losing work that you mentioned in the workitem - which is of course the same on any website. It's a good idea to get in the habit of CTRL-A CTRL-C (select all and copy) any time when you've written a lot before you press a submit button. I don't know how many times I've written something long-winded only to lose it because of a session timeout, internet disconnect, or whatever!

Coordinator
Jul 6, 2011 at 6:08 PM

Jonathon, there is a full screen button on TinyMCE that you may have missed.

Jul 6, 2011 at 6:13 PM

It's a good idea to get in the habit of CTRL-A CTRL-C (select all and copy) any time when you've written a lot before you press a submit button. I don't know how many times I've written something long-winded only to lose it because of a session timeout, internet disconnect, or whatever!

Ideally with Clipmate (or your favorite clipboard extender) installed. Makes for great archival functions.

Jul 6, 2011 at 6:31 PM

@randompete sorry for my English I'm better with code. All I'm trying to say is that when I work with html, I format it (put tags on certain lines, group together in certain ways, indent etc. etc). and that helps me read it. But as soon as you save it with CKEditor it overrides your formatting.

@bertrand the full screen button seems to only work in content view. As soon as you hit html it still opens a tiny little second window, which I guess you can drag and make bigger.

I can tell my client isn't going to be ultimately happy with either of these editors coming from a Dreamweaver background & in their current state they're not working for me coming from a visual studio background. The reality is that the majority of time with Orchard is spend editing html content, so I'm just trying to figure out how best to do it. I will look into the CKEditor suggestions, many thanks for that @randompete!

I'm not sure about writing everything in word and then pasting it over. Whilst that's helpful for some of the process, ultimately every page you create requires you to see multiple versions of the page as you fix up positioning, ask your colleague what they think, decide content needs to be changed etc.

Jul 6, 2011 at 6:58 PM

Ah, I see what you mean - nothing that can be done about that unfortunately, I assume it happens somewhere between CKEditor's XHTML compliance, and the actual edit area (which is actually leveraging a hidden browser feature).

Still, the optimum would be to get things working better in WYSIWYG mode.

If your client is used to Dreamweaver, maybe they should just work in that? They can work with a copy of the site template and stylesheet, get the content looking exactly right there, then just copy and paste the HTML straight in (and you're right, in that scenario you could consider disabling all editors, and that way formatting would be preserved).

The problem with web-based editing is that it's just never been as good as a dedicated desktop application, although I'm sure one day it could be!

Coordinator
Jul 6, 2011 at 8:49 PM

oh, ok, well, then you can double-click the window's title bar to make it fullscreen. The real solution would be for someone to implement LiveWriter Page support. Online editors suck.

Jul 6, 2011 at 9:07 PM

ok, so who is going to implement LiveWriter page support?

Coordinator
Jul 6, 2011 at 10:04 PM

OK, fine, I'll give it a shot :)

Jul 7, 2011 at 1:15 AM
bertrandleroy wrote:

OK, fine, I'll give it a shot :)


Plus 1 for Bertrand :-)

Jul 7, 2011 at 4:38 PM

LOL, thanks man....