7 ms·
JQuery Notebook – A Medium-like editor wrapped inside a jQuery plugin
- Ryel 13y agoThanks but I think I'll stick with this little gem. https://github.com/daviferreira/medium-editor https://github.com/daviferreira/medium-editor
- rcruzeiro 13y agoDidn't know that one thanks! For your projects, do you consider the fact that this component does not depend on a specific framework to be a positive thing? I ask because when I started writing my editor, I considered to go jQuery free, but then I decided to stick with jQuery and create it as a jQuery plugin since people are used to components wrapped this way.
- teleclimber 13y agoIf I were building a project that used jquery, then this would be a good thing. But these days I prefer things to be as vanilla as possible. jquery is becoming more of a burden than help given how much better modern browsers are becoming. In the not-too-distant future I picture myself stripping jQuery from my projects, so the less tie-in the better.
- sfeng 13y agoI personally prefer libraries without dependencies when possible. Edit: http://YouMightNotNeedjQuery.com http://YouMightNotNeedjQuery.com might be of assistance
- cunninghamd 13y agoNow it's a race, if jQuery Notebook gets up to snuff by the time I need it, I'll use it, if not, Medium Editor it is (personally, I don't care if I have jQuery or not, I'm a pragmatist).
- Ryel 13y agoStay with jQuery but focus on building an awesome media handler. The other medium-editor repo isnt focusing at all on handling user-uploaded media and that really sucks. I would switch immediately if you had baked-in integration for -Youtube inline upload -Images upload But again, thats just my opinion. The other repo is pretty significant and gaining a lot of traction but I think they will end up relying completely on 3rd parties to handle assets. I think if you focused on media, you could compete and be a more beginner-friendly editor. Best of luck to you, I love the Medium editor and may end up sending you some pull requests if you keep this thing going.
- Jonovono 13y agoThis is cool. Is there anyway you could get markdown (or some similar format) to work with it. Essentially this (http://mangomarkdown.com/ http://mangomarkdown.com/) but open source. That would be awesome!
- rcruzeiro 13y agoIt's certainly an interesting challenge to make the plugin output markdown and I have also considered it. I think that if there are people willing to contribute to this feature we could do it.
- tracker1 13y agoI think it may well be worthwhile to do so... In the past, I used pandoc to go from html segments to markdown in order to scrub/cleanup imported input... the eventual goal was to support markdown as a base input in the editor, with a side-by-side view. I like markdown a lot, but I think the point is to "learn" markdown, and maybe an editor with a side-by-side preview is better if that's your target? The point of markdown is to be a slightly enhanced text input.
- Jonovono 13y agoCool! Ya, I have a project that is on the back burner I am planning to work on at some point in the near future that I would like to use. I have started playing around with Codemirror and the newish texteditable HTML tag to see what could be done! I like githubs flavor of markdown, because I would like the ability to perhaps make todo lists (and maybe other things that may be useful).
- teleclimber 13y agoI'm curious: what is the point of markdown if you're using a specialized visual editor to write it?
- extra88 13y agoMarkdown is still a simpler, more lightweight markup than HTML. Storing text in Markdown is good when conversion is not just to HTML but other formats (e.g. EPUB). Even if the text is always going to be converted to HTML, it would make changing the HTML output more straightforward.
- teleclimber 13y agoI much prefer editing like this than in markdown! FYI, when I hit "enter" I expect a new paragraph to be created.
- xux 13y agoYou can't press Enter to line break. Was that intended?
- rcruzeiro 13y agoShort answer: No it is not but it's already fixed ;) Long answer: The editor mode in the default options was mistakenly set to 'inline' and as the demo does not set this option the editor had the new paragraph feature locked.
- jcutrell 13y agoQuick note - if I delete everything in the textarea, I can't undo to get back to where I was. Strangely this is something I do often - not sure why.
- rcruzeiro 13y agoThis is something I hadn't tested. I'll take a good look on this issue. This execCommand thing is new to me. I had never used it before I decided to create this editor.
- pieterhg 13y agoLike it. Making text H1 or H2, it's impossible to make it normal text after. Is that a bug?
- eitany 13y agovery nice.
- cunninghamd 13y agoLove it! But, you need lists. In fact, I'd either document the exact commands you have implemented, or implement all the commands Medium offers, since you're inspired by Medium: https://medium.com/help-center/128f049a7ad https://medium.com/help-center/128f049a7ad I want to use this, but I need lists before I do. I'll be using it to write interviews with breweries around the world in a brewery site I'm building. * Note: I've never used Medium, so needed to Google what commands it has to offer.
- abcd_f 13y agoHow do I remove hyperlink markup from a piece of text?
- rcruzeiro 13y agoIt's still not possible to remove a hyperlink. I have created an issue on Github https://github.com/raphaelcruzeiro/jquery-notebook/issues/35 https://github.com/raphaelcruzeiro/jquery-notebook/issues/35 Thank you for pointing this out!
- Doctor_Fegg 13y agoReally nice. Great to see someone putting attention into WYSIWYG rather than yet _another_ Markdown editor. And it supports keyboard shortcuts too (cmd-B, cmd-I etc.)! Only suggestion I'd make is to speed up the transition when the palette moves around, or maybe replace it with a fast fade in/out - the animation gets in the way.
- rcruzeiro 13y agoWould you say that it is the animation itself (the bubble moving from its previous position) or the duration of the animation? Thanks for your feedback!
- jbeja 13y agoI would say that is the animation itself, intead following me around from the previous point, i would like that just appear below me with a shorter duration, also the style seems a little bit dated.
- rcruzeiro 13y agoYeah, looking at it now it seems iOS < 5. What do you think about no gradients and no transparency? Something flat-ish?
- jbeja 13y agoThe transparency is fine maybe a 0.8 in the alpha channel would do the job, the color is there but the gradient is too harsh, the border line is just there with not purpose and lastly the bubble take so long to hide after i am finish with it that annoys me. Other than that is a great project, i will give a shot to the source code later. Cheers
- rcruzeiro 13y agoI removed the gradient, the border and the transparency. It's looking better now. I'll now make some experiments with shortening the animation time.
- nhangen 13y agoIt's cool to hate on jQuery right now (for some odd reason), but don't let that get you down. This is an awesome start and I'll definitely be keeping an eye on it. We do a lot of front-end editing on WordPress and this might make a handy replacement for the bulky tinyMCE that gets used.
- rcruzeiro 13y agoThanks man! There are still a few thing missing for the first official release but I think we're getting there real soon ;)
- k-mcgrady 13y agoLove it, very nicely done. The only issue I have is with the animation (movie the popup from the previous position to the current one). It looks nice but it's off-putting. A fade-in/out would work fine.
- sospep 13y agoNice plugin. There is another project( https://github.com/sofish/pen https://github.com/sofish/pen) similar to this that supports lists and also can be used with markdown
- rcruzeiro 13y agoI took a look at this project when deciding if I should implement my own. I think both my project and pen editor are going to make each other better with a little competition ;)
- pcarion 13y agoInteresting piece of work - 2 related scroll problems. When you paste a long piece of text in your editor: - the palette doesn't position near the text where you double click (it remains at the top of the document) - any undo action, which change text below the fold doesn't scroll the editor where the change occurs. Good luck with that promising project. Most people who took the contenteditable route to build an editor (ace and codemirror for instance), eventually decided to fully implement the editor themselves...
- rcruzeiro 13y agoThank you for your feedback. I'll take a look on these issues you reported ;)
- nateabele 13y agoAm I the only one who reads 'wrapped inside a jQuery plugin' and thinks 'great, yet another awesome-looking library rendered completely useless'?
- rcruzeiro 13y agoI get why someone might dislike jQuery plugins, but to think that something is "completely useless" by being wrapped in a jQuery plugin is, IMO, a little extreme.
- nateabele 13y agoI'm ambivalent to jQuery plugins themselves, as I simply don't use jQuery. Therefore, any code 'wrapped in a jQuery plugin' (as opposed to, for example, writing well-designed, generic JavaScript objects and providing a jQuery plugin wrapper) is useless to me. As it is to anyone who's not living in the past, where jQuery's presence in an app was an article of blind faith.
- rhizome 13y ago"Fork me on Github!"
- straws 13y agoI'm surprised no one has tried to emulate Quip's editor yet https://quip.com/ https://quip.com/
- rhizome 13y agoThere isn't an indication of what that might be on that page.
- tethis 13y agoCKEditor 4 also supports inline editing like this.
- victorhooi 13y agoI wonder if anybody would wrap this into a open-source wiki project. I'm currently looking at open alternatives to Confluence, haven't found anything that's as easy to use on the editing front.
- badclient 13y agoIs it just me or is there a lot of spacing in between lines? Every time I hit return, it feels like I've hit 3 returns. Overall, impressive! Would pay for a quality and light one of these.
- rcruzeiro 13y agoThis is just a question of styling. You can set the margin for p elements on your own css ;)
- andremendes 13y agoIt didn't work on android Browser, what a bad.
- rcruzeiro 13y agoMobile support is on the way ;)