Frontend WYSIWYG editing while keeping Markdown content

Editable with ContentTools is a frontend WYSIWYG Editor.

This plugin is a rewrite of my earlier ContentTools plugin. The major difference is that this plugin does not save the content as HTML but as Markdown. This is handled by Turndown, a HTML to Markdown converter by Dom Christie.

Using the plugin is pretty simple. Install it manually (since it is not yet available via GPM) and add [editable] shortcodes to your page content. The content of each shortcode will become an editable region in the frontend.

It's important to have the Markdown start at a new line. For example:

[editable name="chapter_1"]
# Chapter 1
[/editable]

Every shortcode must have a name which is used to identify the different editable regions.

Please try it. If there are no issues I'll ask Team Grav to add it to the Grav plugin repository.

Congrats on the new PlugIn @bleutzinn - very nice! I've just tried it out in the most recent Grav Admin Code skeleton and I was able to get it working with no issues🎉

Thanks Paul for trying and your feedback. That's what I was aiming for!

Works like a charm! It is perfect for me and is 100% what I need for my courses at school! THANK YOU VERY MUCH 🙂

Hi @bleutzinn, I've been testing out your Plugin more and have now got it going with my Open Publishing Space - what a smooth user experience you've got!

One thing I've discovered is that a "Save" in this plugin does not trigger a full page save and so Git Sync does not get triggered to sync the changes to a Git Repo. Might you consider an option in the Plugin to trigger a Git Sync after each save? I think there are strong use cases for both manual and auto Git Sync, esp. with open educational resources editing and student editing scenarios etc., and I think this feature could appeal to a lot of other Grav users too.

Thanks for considering this request🙂

Hello Paul,
Though the plugin does a normal $this->grav['page']->save() for some reason Git Sync doen't get triggered indeed.

Considering your suggestion did not take long 🙂
During development of my Editable with SimpleMDE Plugin I tried to include support for Git Sync. The challenge was that I wanted to sync in the background so the sync does not cause an annoying delay and thus bad user experience. I then couldn't get it to work and I dropped the feature as a whole.

Times have changed and thanks to a 10 year old code snippet on php.net background saving now works fine. There is no return value or something. It just kicks off the sync and hope it works well. If it fails things fail silently. That might be an issue but I think it's the prize of background syncing.

I've uploaded version 1.1.0 to the GitHub repo. Please check it out.

Oh wow Ron thanks so much for that! I will test ASAP and report back🙂

UPDATE: Ok, well I uploaded repo latest, logged in/out online (unix based I think), set to Git Sync sync and tried to edit but the change did not seem to get synced over... any idea? I am also in the Discord Grav chat room if preferred - thanks! BTW, even if a delay was required to ensure compatibility that is reasonable as it is an option that you've now provided and with 1.6 it will be possible to even do a scheduled (i.e. hourly) Git Sync as well.

I seem to have cut some corners. Getting it working from localhost only (MacOS) isn't enough; should have tested it more. I'll look into it.

BTW if a scheduled sync is in play why should my plugin still trigger Git Sync? Changes are saved so pages are changed which Git Sync should notice when run as scheduled.

Version 1.2.0 has a new option "Git Sync Mode" which defaults to foreground syncing. The option to sync in the background is there but isn't stable yet.

Please check the default config: the initial setting is with Git Sync disabled !

Thanks very much Ron. If n edits occur within the time of each scheduled sync revisions are much trickier - if a sync occurs for each page edit then even more novice users of GitHub, GitLab, etc can reverse individual edits (if need be).

Awesome, thank you so much! I will test and share my results here.

Success! I've installed and tested v1.2.0 on my server with Git Sync and saved edits now sync automatically upon save🙂. Nice work Ron!

Great! Then you'll enjoy version 1.2.1 even more since it allows you to sync in the background. Tested on Linux, not on Windows though. Any volunteers?

Thanks! Still no luck with my online install and Background Sync but Foreground Sync works flawlessly!

It seems that executing the Git Sync CLI command in the background from PHP is 'tricky' and depends on server configuration?

I get a real déjà vu. Just like in 2017: working with me om MacOS and on Debian but not working on your server. Duh!

I'm glad that you're OK with foreground saving.

Hi! I've been testing the plugin in various situations now. It works like a charm 99% of the time. I have issues saving information placed in containers at the moment. For example I use markdown tabs (shortcode ui) and placed editable information in different tabs. Saving information doesn't work out (yet =D). Still I'm really happy with the plugin. An idea? 🙂

The Tab shortcode of the Shortcode UI Plugin does not touch the content itself. It just adds the tabbed interface. So in theory it should work.

With this page content I am able to edit the content in both tabs:

[ui-tabs position="top-left" active="0" theme="lite"]
[ui-tab title="First Tab"]
[editable name="1st-tab-content"]
This is content in the First Tab.
[/editable]
[/ui-tab]
[ui-tab title="Second Tab"]
[editable name="2nd-tab-content"]
This is content in the Second Tab.
[/editable]
[/ui-tab]
[/ui-tabs]

What else do you consider "containers"? Again any dynamic change from the page Markdown content by whatever which logic will break this editable plugin. That is a consequence of the conversion from Markdown to HTML and vice versa.

Version 1.3.1 of this plugin does not require the editable shortcode name parameter anymore making for easier shortcode insertion as you can simply use:

[editable]
Lorem ipsum
[/editable]

The plugin still needs to identify the different editable regions and therefor adds any missing name parameters to the page content.

I consider version 1.3.1 a pre-release. Please check it out and let me know any problems.

I tested everything with your new release and it seems to work just fine now!

If anyone want to give this plugin a try I suggest using this demo. It does not do the actual saving of changes, of course, but the editing experience is the same as when you would use it in your site.

The demo currently uses version 1.4.6-beta1 which should become available in the GPM Testing channel sometime soon.

Please use this forum or the GitHub repository for any questions or issues you may have.