
JQuery Notebook – A Medium-like editor wrapped inside a jQuery plugin - rcruzeiro
http://raphaelcruzeiro.github.io/jquery-notebook/
======
Doctor_Fegg
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.

~~~
rcruzeiro
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!

~~~
jbeja
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.

~~~
rcruzeiro
I removed the gradient, the border and the transparency. It's looking better
now. I'll now make some experiments with shortening the animation time.

~~~
weixiyen
The main issue is that the bar moves location. It's really jarring. It would
be better if it just sprouted above the text I was editing, instead of flying
in to position.

Other than that, great job, impressive work.

~~~
whisk3rs
Agree, the animation is distracting. I'd rather that the bar fade-in (quickly)
in place. Otherwise, this is awesome, and I'm going to use it.

~~~
voyou
Yeah, I think the animation as "move-from-previous-place" is a mistake, in
that I don't think it matches our mental model (or my mental model) - I don't
think of the toolbar as something that remains tied to the place I was
previously editing after I stop editing there.

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

[https://github.com/daviferreira/medium-
editor](https://github.com/daviferreira/medium-editor)

~~~
rcruzeiro
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.

~~~
teleclimber
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.

~~~
jbeja
How jQuery is a burden beyond the extra 32kb gziped file that the browser have
to load? Please don't try the " i am cool because i hate jQuery" mantra.
Cheers

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

~~~
rcruzeiro
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
Like it. Making text H1 or H2, it's impossible to make it normal text after.
Is that a bug?

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

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

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

------
cunninghamd
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](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.

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

------
nateabele
Am I the only one who reads ' _wrapped inside a jQuery plugin_ ' and thinks '
_great, yet another awesome-looking library rendered completely useless_ '?

~~~
rcruzeiro
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.

~~~
nateabele
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.

~~~
rhizome
"Fork me on Github!"

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

~~~
rcruzeiro
Thanks man!

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

------
teleclimber
I much prefer editing like this than in markdown!

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

~~~
rcruzeiro
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 ;)

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

~~~
rcruzeiro
It'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!

------
Jonovono
This 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
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
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.

------
sospep
Nice 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
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 ;)

------
k-mcgrady
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.

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

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

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

~~~
rcruzeiro
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.

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

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

[https://quip.com/](https://quip.com/)

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

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

~~~
rcruzeiro
Mobile support is on the way ;)

------
tethis
CKEditor 4 also supports inline editing like this.

------
eitany
very nice.

