Symphony.

I am a big believer in Markdown and keeping design away from clients, but I completely agree with needing a 'preview' of your markdown.

EpicEditor, with its in-place preview, would make for a nice editor integrated into Symphony.

<-- This is a small potato.

It's a kids show in the UK. Someone said I looked like one.

@designermonkey: Will the other gravatar eventually come back?

Possibly... After a haircut. ;o)

EpicEditor, with its in-place preview, would make for a nice editor integrated into Symphony.

@DavidOliver

Looked at it and don't know how to create a link or insert an image without going through the manual, so it doesn't solve the usability problem for clients.

Sorry to be so persistent on that topic, but someone has to... ;)

@jensscherbel: No, I don't think it's intended to help with knowing the syntax directly, just with previewing.

Isn't there a Symphony extension that includes notes on Markdown syntax?

Interesting discussion. :)

This Showdown one has syntax and preview panes:

link text

Source here:

link text

I was trying to make it be the preview parser for the Markitup extension last night but didn't get far. Lack of experience in both on my part.

Markitup has a preview pane built-in but no preview parser in JS, there's a PHP one linked fromt the Markitup site but there's a php markdown parser already in Symphony Makdown extension I thought?

I was thinking if there was a preview pane and also some basic insert tools like Markitup's button bar it would make life easier.

BTW to play with it you do have to switch the preview launch button on in the Symphony markitup extension in jquery.markitup.js the button graphic is missing, supposed to be a green tick mark but you can still click the blank space where you added the button to be. There is a way to auto launch the preview pane and update when changes are made in the textarea pane.

Markitup has the seemingly OK image browser too for even easier client use. Not that I'm bigging up Markitup too much, it seems to work OK out of the ones I've tried so far.

If we were to get a preview pane for Markdown, it would have to be as another extension. It's not too difficult to do I don't think.

I have a JS markdown live preview script which is quite simple to implement, I'll give it a go.

Markitup has the seemingly OK image browser too for even easier client use

What image browser?

Markitup has the seemingly OK image browser too for even easier client use

Sorry, got confused was part of a different old extension. Taking the place of SSM as we might use now.

If we were to get a preview pane for Markdown, it would have to be as another extension.

Can it be plugged into the Markitup pane do you think? It's already sending the data and waiting for it to come back parsed, I just couldn't seem to get it to work trying to hack the showdown parser into it. I think it's just using different field ID names. Got fed up after a few hours and went to bed :)

What I mean is that it would append a div underneath the 'markdown' enabled textarea and have a live 'as you type' preview.

There'd be no need for buttons to preview it.

It's like that in the Markitup but preview pane just goes blank, my parsed data isn't coming back in. doh!

Revisited EpicEditor, looks quite promising if you don't expect things that it's not meant for (like I did in a previous post, sorry about that, @DavidOliver).

Another interesting thing to look at is CodeMirror.

I still think having a toolbar with basic functions is essential for clients. MarkItUp! is a good start, but despite a sneak peak for MarkItUp! 2 it doesn't seem to be under active development right now.

I also still think that having image- and link-URLs inline with your text looks pretty messy and makes the content nearly unreadable, so using "reference-style" instead (like this forum's editor, which is also not under active development any longer) should be considered as a best practice (would be nice if toolbars and extensions like SSM could adopt "reference-style" as well).

Another idea:

Writing markdown, but having some sort of instant visual feedback like in iA Writer or similar apps.

What do you guys think? I would be happy to invest some time and create an extension that improves the experience with markdown for clients, so what's the best way to go from here?

On a side note, I also considered creating an HTML5-based richtext-extension with wysihtml5, but after playing a little bit with the demo I realized this won't be production-ready for some time and that sticking with TinyMCE for now is clearly a better choice if richtext is needed.

For our customised symphony platform, we created a live frontend editing environment for basic page content. After performing some user testing last week, I'm convinced that WYSIWYG is the way to go. Im currently writing up the conclusions from this, and editing the video down, but WYM is far, far too abstract for the average person to understand.

http://clearassembly.com.au/platform/live-content-editing/

(click the 'edit' button on the right)

Henry, that interesting. Has any clients using Symphony CMS?

The biggest issue with showing a preview is what styles do you apply to the preview? For something like Symphony where one piece of content can appear anywhere, showing a h2 that's 18px, black and Arial in a preview might not be the case when it's actually 16px, purple and Helvetica on the site (and that's just one section).

I guess for simple page based sites where content is not used in multiple places, frontend editing is a solution. But for more complex sites, I think it's worth the education with Markdown.

I should also mentioned Adobe Shadow for any web developer want to test work-in-progress website across multiple devices in realtime. I have a good experience with it.

I don't think WYMeditor has been mentioned in this disucssion yet. Integration examples. Seems like it could maybe be a nice balance between enforcing good markup and UI.

There is a Symphony extension for it in "early development", and there was some work on theming and using it done in 2009 by Nils Hörrmann.

@DavidOliver

Already tried WYMeditor yesterday, and I like it. Far more usable and stable since the last time I checked a year ago.

The current beta of TinyMCE has a similar feature for outlining the content's structure and you can also limit it to just the basic stuff.

@brendo

The biggest issue with showing a preview is what styles do you apply to the preview? For something like Symphony where one piece of content can appear anywhere, showing a h2 that's 18px, black and Arial in a preview might not be the case when it's actually 16px, purple and Helvetica on the site (and that's just one section).

I don't think the point is to make it look exactly like it looks in the frontend. It's more important to apply some basic styling (headlines bigger and stronger, etc.) to improve the content's readability in the backend. That's especially important for blogs and online magazines, where the content mostly consists of long articles with several sections and subheadings.

@jenscherbl, did you try the WYMeditor Symphony extension, or just WYMeditor itself? Would be interesting to know if it's usable with 2.2.5/2.3 or not.

I suppose one of the advantages of using WYMeditor over a Markdown textarea is that it gives you the option of editing the HTML directly should you need to on those occasions where Markdown isn't enough. E.g. inserting a non-breaking space or something like that.

@DavidOliver

id you try the WYMeditor Symphony extension, or just WYMeditor itself?

Just the editor itself. I guess the extensions isn't under active development any longer and needs to be forked or rewritten.

I suppose one of the advantages of using WYMeditor over a Markdown textarea is that it gives you the option of editing the HTML directly should you need to on those occasions where Markdown isn't enough. E.g. inserting a non-breaking space or some thing like that.

You can add plain HTML to a markdown textarea as well (see here).

But that's not my priority. I like WYMeditor because it combines markdown's simplicity with the visual feedback of a richtext editor and makes the content more readable.