JQuery Notebook – A Medium-like editor wrapped inside a jQuery plugin

http://raphaelcruzeiro.github.io/jquery-notebook/

by rcruzeiro • 12 years ago

112 62 12 years ago

raphaelcruzeiro.github.io

Ryel3• 12 years ago

Thanks but I think I'll stick with this little gem.

https://github.com/daviferreira/medium-editor

rcruzeiro22• 12 years ago

Didn'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.

teleclimber4• 12 years ago

If 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• 12 years ago

I personally prefer libraries without dependencies when possible.

Edit: http://YouMightNotNeedjQuery.com might be of assistance

cunninghamd2• 12 years ago

Now 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).

Ryel3• 12 years ago

Stay 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.

Jonovono2• 12 years ago

This is cool. Is there anyway you could get markdown (or some similar format) to work with it. Essentially this (http://mangomarkdown.com/) but open source. That would be awesome!

rcruzeiro22• 12 years ago

It'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• 12 years ago

I 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.

Jonovono2• 12 years ago

Cool! 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).

teleclimber4• 12 years ago

I'm curious: what is the point of markdown if you're using a specialized visual editor to write it?

extra88• 12 years ago

Markdown 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.

teleclimber4• 12 years ago

I much prefer editing like this than in markdown!

FYI, when I hit "enter" I expect a new paragraph to be created.

rcruzeiro22• 12 years ago

Thanks for your feedback!

If there is any behaviour that you consider weird, or any feature that you think is missing just create an issue on Github. Also, pull requests are more then welcome ;)

rcruzeiro22• 12 years ago

Fixed!

xux• 12 years ago

You can't press Enter to line break. Was that intended?

rcruzeiro22• 12 years ago

Short 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• 12 years ago

Quick 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.

rcruzeiro22• 12 years ago

This 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• 12 years ago

Like it. Making text H1 or H2, it's impossible to make it normal text after. Is that a bug?

rcruzeiro22• 12 years ago

It is not yet implemented. The issue is already listed on Github. It should be a 2 minutes task to implement it.

rcruzeiro22• 12 years ago

Github user TrevorHinesley has sent a pull request for this issue and it has already been merged into master ;)

eitany• 12 years ago

very nice.

cunninghamd2• 12 years ago

Love 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

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.

rcruzeiro22• 12 years ago

Thanks for the feedback! Lists are definitely on the way!

rcruzeiro22• 12 years ago

We now have support for numbered an bulleted lists ;)

abcd_f• 12 years ago

How do I remove hyperlink markup from a piece of text?

rcruzeiro22• 12 years ago

It's still not possible to remove a hyperlink. I have created an issue on Github https://github.com/raphaelcruzeiro/jquery-notebook/issues/35

Thank you for pointing this out!

Doctor_Fegg• 12 years ago

Really 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.

rcruzeiro22• 12 years ago

Would 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!

jbeja3• 12 years ago

I 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.

nhangen2• 12 years ago

It'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.

rcruzeiro22• 12 years ago

Thanks man!

There are still a few thing missing for the first official release but I think we're getting there real soon ;)

k-mcgrady• 12 years ago

Love 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• 12 years ago

Nice plugin. There is another project( https://github.com/sofish/pen) similar to this that supports lists and also can be used with markdown

rcruzeiro22• 12 years ago

I 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• 12 years ago

Interesting 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...

rcruzeiro22• 12 years ago

Thank you for your feedback. I'll take a look on these issues you reported ;)

nateabele2• 12 years ago

Am I the only one who reads 'wrapped inside a jQuery plugin' and thinks 'great, yet another awesome-looking library rendered completely useless'?

rcruzeiro22• 12 years ago

I 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.

nateabele2• 12 years ago

I'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.

straws• 12 years ago

I'm surprised no one has tried to emulate Quip's editor yet

https://quip.com/

rhizome2• 12 years ago

There isn't an indication of what that might be on that page.

tethis• 12 years ago

CKEditor 4 also supports inline editing like this.

victorhooi• 12 years ago

I 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• 12 years ago

Is 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.

rcruzeiro22• 12 years ago

This is just a question of styling. You can set the margin for p elements on your own css ;)

andremendes• 12 years ago

It didn't work on android Browser, what a bad.

rcruzeiro22• 12 years ago

Mobile support is on the way ;)

JQuery Notebook – A Medium-like editor wrapped inside a jQuery plugin

Related Stories