Rather than write an article again (and fix the image upload part as it doesn't work here) I thought I would share a post I created over on dev.to for a WYSIWYG.
You will have to have a dev.to account to use it and it is clunky being a bookmarklet (if you preview the page it disappears) but hopefully it offers some ideas for a WYSIWYG for Forem.
Features include:-
-
better image upload - it inserts it into the post and encourages the use of and explains
altattributes better. -
No H1 - only h2 to h6 are valid options to further enforce that a
<h1>should not he used in an article. (this and the previous point link nicely with the new accessibility features the team just added to the preview which I love!) - Liquid tags quick add - it makes liquid tags easier to discover and use (needs an awful lot of tidy up but the concept works)
- Keyboard shortcuts - this is the main one for me, select text and Ctrl + B will make it bold (loads of other keyboard shortcuts for common tasks)
- Tables - not perfect but the ability to add columns and rows to a table plus generate a blank table is really useful.
- Sticky Keys concept - a made a boo boo and used \ for the sticky key...but the idea is that one handed operation of the editor becomes possible.
Anyway the post explains it all, I just thought I would share it here as it seems like it would be more appropriate.
I am hoping to get the next stage out but I am struggling hacking that in for features such as a list of a user's posts for liquidtag shortcuts.
Anyway, any questions just ask.
Top comments (7)
This is great, as are a lot of these concepts...
Fundamentally the most important factor for the default editor is that it be minimal and intuitive and present what you need when you need it— Also it should really be pleasant for sharing quick bites. Yes, big blog posts need exhaustive functionality, but small questions for the community don't.
That's the commentary I need to have on anything with an abundance of functionality, but I think this is a fascinating concept project and I wholly support this exploration. @lisasy you should definitely pay attention to this 😄
Thanks Ben
I agree with that entirely. Simple by default! I would imagine as Forem moves into less tech orientated spaces though the reverse would be true.
But then the argument would probably be for an actual WYSIWYG by default, rather than a markdown editor calling itself a WYSIWYG 😋
Thank you for sharing this @inhuofficial - and for all the time and effort you've put into this darn fine proof of concept. The editor has cropped up a few times in feature requests and general conversation here, so I'm sure plenty of people are happy to see that there are potential solutions in the works!
@rickavmaniac , is this something like what you have in mind?
Thanks Ella! ❤
This would be a perfect integration for many authors and writers I know. Most of the bloggers and writers usually prefer Ghost over any other CMS; one of the main reason they point out deliberately was the simplicity of the Writing Engine. In other words they are pointing out at WYSIWYG editor.
Thanks Akhil, I tend to agree, I much prefer a "WSYIWYG" (as it is a stretch to call it a WYSIWYG when it is a markdown editor 😋) when writing just for the ease of keyboard shortcuts and making amendments.
Glad you like it, even if it is a little bit clunky in the current form!
I'm a fan of Microsoft Visual Studio Code, VSC, the open source IDE. What amazes me is its world of extensions. People have developed thousands of extensions for every language and platform.
It may look out of place but consider developing a VSC extension to implement Forem Wysiwig editor. Take advantage of all the improvements VSC developers bring and develop a robust forem editor through extensions.