-
Notifications
You must be signed in to change notification settings - Fork 0
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Editor feature #24
Comments
List of editors from SOhttp://stackoverflow.com/questions/6756407/what-contenteditable-editors-are-there |
Very solid research on this @begedin. I lean very heavily in the direction of a Medium-like front-end. Not full WYSIWYG, but something drastically simplified. I'm pretty sour on Markdown because it's kind of painful to write, and even more painful to read and edit. It's okay for small amounts of documentation like a README, but anything larger and longer than that, or that has to be edited often, and it becomes arduous for me. I'd be very interested in the document/editing structure and architecture that Medium uses. The front-end work around the editor seems hard but achievable, but the document structure itself is a black box to me. |
After much searching, I found it: https://medium.com/medium-eng/why-contenteditable-is-terrible-122d8a40e480 |
@idelahoz and I have had a long conversation in Slack about this. Did some deep reverse engineering and really like their approach. |
I took a look at some editors that support "inline" editing. I didn't completely understand from the discussion if we want to try to implement something of our own, or repurpose something existing, but here's what I found: Aloha Editor 2 (in alpha)
Etch
CKEditor
FreshEditor
Hallo
Mercury
TinyMCE
MediumJS
Redactor
ThoughtsOut of these above, I'm leaning strongest towards Aloha based on UI alone, though it doesn't have all the features we'd want yet. For instance, image drag and drop doesn't work yet. Outside of that, i'd probably go with Redactor or Mercury, followed by MediumJS, in order of preference. |
Copied from https://gist.github.com/begedin/8aaecc4fe5681b1ea5af Options for image uploading with medium-editorWhat's supported and what isn't.At the moment, medium-editor allows dropping an image into the editor area in order to add it to the document. However, this works via base64 image embedding, which isn't optimal and I'm guessing we don't wont. This feature also does not work when pasting image files (file path is pasted instead), or image clipboard data (nothing happens). What can we doFor UI-based image uploadsmedium-editor does support extensions. You can define a simple button extension which modifies the selection automatically, or a form extension, which first shows a form and then does something based on our interaction with the form. What we could do is define our own form extension. The extension allows us to browse for an image and upload it. Upon upload, it replaces the selection with an image tag containing an url to the image. The obvious problem here is that the medium-editor toolbar is selection-based, meaning we still need to select a piece of text to insert the image, which is a bit unintuitive. Even the default There are probably ways around it, but nothing satisfyingly straightforward enough. For dropping from the file system into the editorWe need to somehow override the default behavior of embedding the image as For pasting from the file systemI don't think this is possible due to browser security limitations. At least, I wasn't able to find a method of doing it. GitHub doesn't support this either, nor do a bunch of other services I tried out. For pasting image data from clipboardWe can again implement our own Once we do that, we will have access to the
It may even be possible to insert some placeholder text while the upload is being performed, similar to how github does it. Future-proofing
This means all of our extension stuff will be bound to this specific library instead of working in a more general manner. I could look into hooking into these events directly and handle image stuff through the component instead of through the I'm not sure how viable that is, though. It might proove too difficult. |
Moving this here from the gist, so we can have it more easily accessible
Options
Ember.js Wysiwyg Component with Summernote
Ember Simple Wysiwyg component
Using a markdown processing library with some simple helpers we can implement
Ace with ember-ace-editor
CodeMirror with ivy-codemirror
Thoughts
ivy-codemirror
ember addon, or something of our own making, based on how Ghost does it.The text was updated successfully, but these errors were encountered: