
Sir Trevor Editor - rbcoffee
http://madebymany.github.io/sir-trevor-js/
======
tikhonj
I like the "block" abstraction. It seems like a good way to visually work with
structured content. It also makes the editor really easy to customize (at
least conceptually), which I find a _big_ plus.

At least in the example, there did not seem to be a way to undo things. This
is a bit annoying, especially because it forces a confirmation step when
deleting things. I think most common use-cases would be much better served by
being able to undo a delete than having to confirm it each time. Even if you
don't want to have a general undo button, I would prefer a GMail-style undo
link that only pops up after you've deleted something to the current behavior.

~~~
voyou
: I like the "block" abstraction. It seems like a good way to visually work
with structured content.

Hmm, IDK. I can see that it could be a good way to represent and manipulate
the chunks of text once you've got them, but having to click a special icon
and choose the block type every time you add a new paragraph (rather than just
pressing "return" for the most common case of a new text paragraph) seems
pretty clumsy.

~~~
dchest
Why can't you just press Return and continue writing? You don't have to split
your text into several blocks.

~~~
ajanuary
Would be cool to have the ability to split a block on an empty line so you can
easily move a multimedia block between existing paragraphs.

~~~
gizzlon
Or maybe split a block by clicking (think scissor tool) or something..

------
andreypopp
You might want to see my take on a concept of a structured block-based editor
for Markdown —
[http://andreypopp.github.io/markstruct/](http://andreypopp.github.io/markstruct/)

It's still a rough draft — so expect it to work best only in Blink/WebKit now.

Some shortcuts:

* Arrows — move between blocks

* Shift + Arrows — rearrange blocks

* Enter — creates a new paragraph

* Esc — merge with previous block (only for text based blocks, remove current block otherwise)

* If paragraphs starts with # it transforms into heading (repeat # for more heading levels)

* If paragraphs starts with ``` it transform into code snippet

* Images are entered as ![](url)

* HR — __*

It's just about 500LOC, Thanks to excellent React[1] library. No inline markup
yet, but it's not difficult to add. Also needs some more polishing and tests.

[1]: [http://facebook.github.io/react/](http://facebook.github.io/react/)

------
straws
Structured editors are cool. Not everything needs to be org-mode, but I feel
like this project could learn from some existing tools:

• Quip's block level editing ([https://quip.com/](https://quip.com/)). This
avoids the problem where users can't decide whether they should make multiple
paragraphs within a block, or if they should make multiple blocks with one
paragraph each — Quip makes it so that pressing return puts you into a state
where you've created a whole new block-level chunk of information. Whether
that's a paragraph or a heading or an image or a table, it doesn't matter
because it enforces that the space must mean something. It even prevents you
from pressing return multiple times, which would be handled in other wysiwyg
editors with multiple <br>s or javascript margins or god knows what else.

• The ability to track and apply revisions a la substance.io
([http://substance.io/#substance/manual](http://substance.io/#substance/manual)).
Having granular control about both the contents and placement of blocks is
very important, especially when considering that a lot of content is edited
while being written and revised once published. Substance's extension API is
worth checking out too.

That said though, I think you're doing great work, and I'll be watching this
project closely. Death to TinyMCE!

------
andyjohnson0
Looks good. Should slot into quite of lot of interesting applications.

Strange name though. Since the author is british, I assume it was named after
this guy:
[http://en.wikipedia.org/wiki/Trevor_McDonald](http://en.wikipedia.org/wiki/Trevor_McDonald)

Edit: "Brought to you by ITV.com" kind of confirms it

~~~
jongold
Yeah I believe it was initially abstracted from MxM's ITV.com redesign :)

------
auggierose
Ehhh.... To be honest, I find the editor to be clunky and this would not be
something I would enjoy using. Somebody enlighten me what's so great about Sir
Trevor except that it comes with an MIT license.

------
basicallydan
Folks at MxM: This is _exactly_ what we have been looking for at Huddle: a
decent WYSIWYG -> Markdown editor. Thank you so much.

Good job.

------
artumi-richard
On the example page there is no option to add images. So initially I thought
that sir trevor couldn't do image blocks. You might get more interest if the
Example page makes it clear some blocks are disabled.

------
mschaef
The block based layout reminds me a lot of some of the desktop publishing
software I used to use in the early-mid 90's. At the time, it served well the
purpose of integrating multiple media types into a single document, but it was
a bit of a clunky way to edit. That's my concern with Sir Trevor.

The nicest (for me) aspect of Markdown, is that it removes the need to mess
around with anything other than text to produce a formatted output document.
Sir Trevor seems to remove that benefit, for limited upside.

~~~
robgough
Presumably the upside is that it's easy to use for non-techy types. I
implemented a system with markdown editing for a charity I help out at, and
everyone has freaked out about the markdown editing. I've been looking for a
dead-simple editor I can give them .. and this looks interesting option.

------
madewulf
This is actually very very similar to the UX of checkthis. See here:
[http://checkthis.com/new](http://checkthis.com/new)

~~~
scoot
Checkthis certainly has a beautiful UI/UX. I like the fact that the add-
content bar between blocks doesn't interfere with the block spacing (With Sir
Trevor the add content bar adds height between blocks), and the grouping of
blocks in the add menu of Checkthis is going to work better for a larger
number of block types than the Sir Trevor horizontal list.

The drag-and-drop repositioning is also much slicker with Checkthis, as you
get to see the other blocks shuffle around the one you're moving, rather than
partially so with a copy of the block.

Sir Trevor is a good start though!

------
overshard
Looks like a great editor that is simple enough for your average user to
understand. It's only problem seems to be it's "IE 10+" requirement. I
understand not supporting 6 and 7, fine, not supporting 8, okay that's Windows
XP users, they are dying off, fine, but not supporting 9?

That being said I'll probably still use this somewhere and just deal with the
support calls or try to get it to support 9 somehow, great work!.

~~~
bengillies
Well, theoretically IE9 users should all be automatically upgraded to IE10
anyway, so IE9 has less market share than IE8 at the moment (see
[http://www.netmarketshare.com/browser-market-
share.aspx?qpri...](http://www.netmarketshare.com/browser-market-
share.aspx?qprid=2&qpcustomd=0)).

------
jbrooksuk
This is awesome! We've got plans at Blue Bay Travel, to completely rewrite our
main sales sites, Caribbean Warehouse and Tropical Warehouse to use a block
layout. Now that we're growing, we intend to keep the design limited but feel
like content is always dynamic.

This is going to become a big part for us next year when we hopefully start
the rewrite.

Nicely done! Plus, everyone is excited to use it because we all adore Sir
Trevor!

------
annnnd
Hmmm... This kind of editing is great for trivial examples or when inputting
text through tablet/phone and it beats WYSIWYG editors hands down, but for any
serious work I still prefer WYMeditor:
[http://www.wymeditor.org/](http://www.wymeditor.org/) (don't be fooled by
apparent inactivity - they just don't update the page very often).

~~~
sbarre
I like the concept on the homepage, but the demo doesn't work in latest Chrome
(or at least the demo page is blank) even though they say Chrome is supported.

Doesn't make a strong first impression..

~~~
maxmcd
[http://files.wymeditor.org/wymeditor-1.0.0b2/examples/](http://files.wymeditor.org/wymeditor-1.0.0b2/examples/)

------
orf
We use redactor
([http://imperavi.com/redactor/](http://imperavi.com/redactor/)) for editing
in the browser. It's pretty awesome, I find it better than Trevor.

I like the look of Pen
([http://sofish.github.io/pen/](http://sofish.github.io/pen/)) though

------
codenapper
Pen is also a very nice, unobtrusive alternative:
[http://sofish.github.io/pen/](http://sofish.github.io/pen/)

If you use Rails, also have a look at the Gem I just published for it:
[https://github.com/neowork/pen](https://github.com/neowork/pen)

------
jongold
Orders of magnitude better than any other editor; great API and (obviously)
made by a great team. We're going to be using it for everything we make at
@makeshift from now on :)

------
joshu
This looks nice. I really like the paragraph rearrangement.

I kinda wish there was a paragraph split operator; dupe the paragraph and you
delete some (different) text from each.

------
LeonidBugaev
Looks like it heavily inspired by medium.com editor.

Off topic: Does anyone knows if there is comment system like medium have
(individual comments for each paragraph)?

~~~
dchest
[http://hypercomments.com](http://hypercomments.com) provides comments on any
text fragment.

~~~
ivan_ah
Wow that is pretty cool, though it would be a bit annoying to have you website
copy peppered with footnote indicators each time someone comments...

It kind of reminds me of the commenting system that was used for the GPLv3
draft:
[http://gplv3.fsf.org/comments/gplv3-draft-2.html](http://gplv3.fsf.org/comments/gplv3-draft-2.html)
, for which the source code is here:
[https://gitorious.org/stet](https://gitorious.org/stet)

The use case I am thinking about is crowdsourcing typo corrections --- while
reading some text you see a type, click click and you submit a typo-fix to the
author. Such a tool would vastly improve the quality of English out there on
the interwebs.

------
kylefox
This is awesome. I've been sketching and thinking about such an approach to
editing for months now — it would be perfect for one of my products. Not only
have you validated that this "block" concept makes sense to other people,
you've also given me a head start on the code. Many thanks, and I look forward
to using (and contributing to) the project!

------
swah
Normally the test I make with those WYSIWYG editors is to "select all", cut
and copy a few times... it always messes them up! Does this pass that test? :)
(StackOverflow still uses a plain text editor with separate preview, right?)

Beautiful demo BTW, totally sold it to me. Congrats!

------
maaarghk
Holy wow, I really like it. It has the potential to be really diverse and
huge, I mean, a block can essentially be anything. You could replace entire
CMS with this. It's not often that something can say "the future of..." and
mean it, but I feel like this can.

------
philo23
This is a quite interesting, it also displays the native Bold/Italic/Underline
formatting in Safari on iOS when you select text which I don't think I've ever
seen before on a webpage. Is that just part and part of having something
contenteditable?

~~~
nicksergeant
Yeah. With contenteditable you can pretty much do anything natively in real-
time .

------
Tarang
Unlike concrete5 this actually gives out markdown so there's less worry about
keeping control of weird/wasteful html. I like it uses the medium like editor
since its less clutterful & Its exactly what I was looking for!

------
kolev
Beautiful piece of software! Makes writing (yet another) blogging system
pretty easy. This is where WordPress is headed to anyway.

------
abhi21284
This is great. I am going to try it with angularjs. is there any existing
example/wrapper for angularjs integration?

------
rcarmo
Nice! Any chance jQuery can be removed as a dependency? Also, it would be nice
to have the image block added to the demo.

~~~
twic
It does say you can use Zepto instead. Would that do?

------
radicalbyte
Looks just like the editor in Concrete5..

~~~
blueatlas
Concrete5 has the block model for sure, but I believe the editor is standard
TinyMCE. Sir Trevor seems to take this to the next level, with the ability to
configure a block for context specific editing. This would be a nice
enhancement to Concrete5, or perhaps a new add-on.

One improvement to Sir Tevor would be to provide drag-and-drop ordering, which
Concrete5 has today.

~~~
scoot
It has it, it's just not as slick as it could be. In Sir Tev, you're moving a
copy of the object, whereas moving the actual object would be cleaner, and
more obvious. At the moment it looks more like when you accidentally grab an
image and move it (for it to then snap back into place) in some browsers.

------
pajju
I loved that Text typing effect on the Homepage.

Can anyone share more details on that? It can be cool for pitches.

------
Doctor_Fegg
An editor where I can use cmd-B, cmd-I rather than having to write ASCII
markup. I like it.

------
um304
I am usually finicky with content editors, but this one is very cool.

------
apostlion
Can you do headings with Sir Trevor? If so, I didn't find a way.

~~~
steve19
Yes: [https://github.com/madebymany/sir-trevor-
blocks](https://github.com/madebymany/sir-trevor-blocks)

~~~
apostlion
That's lovely. The DSL for defining custom blocks seems unnecessarily verbose,
though.

------
dreen
It looks very good, but it does need an awful lot more features.

~~~
higgis
We're happy to accept pull requests!

------
archagon
Kinda reminds me of the Squarespace editor.

------
leapius
Umm not sure how this beats sceditor tbh

------
gobengo
Reminds me of Storify. :)

------
bowerbird
it's a good start. but it's not anything more than that.

so i guess you followed the "release early" advice well...

-bowerbird

~~~
NicoJuicy
I'm actually using it.. It's reall good if you can use it and it's stable..

Had a little problem with one of the dependencies though (removed a line from
the source of underscore.js to get it to work, everything else just works
fine)

