Markdown editor

Plone Support Customizing Plone
1

With the theme editor being ACE (?): Would it be possible to get something like the markdown editor here:

http://ace.jeka.by/wysiwyg.html

working with Rich text fields (when set to markdown instead of html)?

... I will give it a go if I get some pointers (could I make it a pattern?)

2

Do you want markdown editing in content or for editing the theme. If the theme, I'm not sure why. If for content, I think it's a great idea and has been discussed before. It would could very easily be implemented as a tile in mosaic?

3
4

I did start working on this yesterday ( night).

One thing I have not found a solution for is:
https://pythonhosted.org/Markdown/extensions/admonition.html

This works after I save, but getting a preview is difficult (?).
Maybe it could be possible to have a javascript update a filed with content of #the_markdown_field after transforming it with portal_transform ?
... or will this be too slow?
Maybe it could be possible to update only on (one or two) newlines (or a shortkey / button )

5

will give this a try, thanks

6

Great... got this working:

For reference: It works perfectly well with any text field

7

I have done some work on this, suggestions, feedback (and help :slight_smile: ) would be nice....

  1. My project is here: https://github.com/espenmn/medialog.markdown
  2. You need to install it from the control panel
  3. it adds a behavior, markdown behavior. Add a new content type and add this behavior to it

Skjermbilde 2017-06-23 kl. 16.08.22.png956×382 16.6 KB

  1. It adds some control panel settings, where one can set 'extra buttons' (you will need to add datagridfield JS )

    Skjermbilde 2017-06-23 kl. 16.18.30.png920×498 73.7 KB

  2. Add a new 'My content type', New buttons will be to the right of 'Preview'

Skjermbilde 2017-06-23 kl. 16.09.05.png1201×257 19.9 KB

  1. The preview button will show your markdown before it is saved (not sure if it renders it 100% correct)

Skjermbilde 2017-06-23 kl. 16.09.11.png1129×287 18.5 KB

  1. Extra buttons are set in the control panel

    Skjermbilde 2017-06-23 kl. 16.07.29.png916×569 35.9 KB

  2. The text you set in the control panel will be added:

Skjermbilde 2017-06-23 kl. 16.09.55.png1143×217 17.8 KB

  1. On save the 'admonition extensions' will show ( https://pythonhosted.org/Markdown/extensions/admonition.html ), if you have enabled this for markdown.

Skjermbilde 2017-06-23 kl. 16.10.05.png1118×284 12.3 KB

#Suggestions

  • I could need some help on how to get the markdown extensions to preview correctly. DONE
  • Could there be a way to 'read it through portal transform' ? YES
  • Off course, a 'live preview' like https://community.plone.org would be great .... Works, but turned off since it would be too slow (?)
  • It would also be nice if the bodyText field used this editor when set to markdown instead of html.
    I have had troubles with using the Richtext field, because the rich text behavior always defaults to html (evn if set in control panel to something else). and adding a Richtext field TTW gives errors on save (instead of saving the input, it saves 'did you mean Raw or output)
1 Like
8

Yes it could.

I have done quite a bit of work

I made it a behavior, if someone needs a mosaic tile I can probably make that.

1 Like
9

Is there any point in making a tile?
I have added it as a behaviour, which means one can just add the field to the layout.
(of course, one can just add one (instance), but I dont think many markdown fields in a mosaic layout is a very common use case

10

You are thinking in terms of content types. Once you switch to mosaic page content is made up of tiles. This is no body anymore. Or rather the body is made up of tiles. So it wouldn't make sense have a single body which is markdown. But it might make sense to have parts of the page being markdown and parts being rich text.

11

Ok, I made that too.

To do: make the tile searchable

12

There is now a setting in the control panel to enable live preview

1 Like
13

The live preview has been updated, so mathjax updates without reload and preview scrolls to 'where you are' when hitting enter. ( This feature is still a bit buggy, so if some javascript guru could help it would be great )