Кто-нибудь делает open-source HTML5 WYSIWYG редактор?

Question

[Алексей Помогаев]

Не могу найти легковесный HTML5 WYSIWYG редактор, может кто начал open-source подобный проект или подкинет ссылок как такие редакторы вообще делаются?

Comments

[Григорий Перетяка]

А чем HTML5 WYSIWYG редактор отличается от не HTML5? Или вы имеете в виду contentEditable? Таких мало и большой разницы по сравнению с designMode я не вижу.

[Алексей Помогаев]

Я не очень в этой теме, мне вообще WYMEditor больше всего нравится, но там тоже куча недоделок есть. Думал помочь поправить им эти недоделки, но их код довольно сложен к быстрому понимаю, комментов нет. Так что решил, что проще своё реализовать.

Answer 1

[Gosha Arinich]

Думаю, вам Mercury Editor (там же демка) подойдет в самый раз. Open source, HTML, Markdown, написан на CoffeeScript, использует jQuery. Подходит?

Comments

[Алексей Помогаев]

Почему он не вставляет параграфы на Enter?

Answer 2

[Петруша Укропов]

habrahabr.ru/blogs/html5/111307/

Comments

[Григорий Перетяка]

Насколько я помню, он работает на Ext JS, который весит под метр, так что он не очень легковесный и целесообразность использования такой мощной библиотеки для табов — это большой вопрос. И у него нет режима классического размещения тулбара над полем, а плавающий тулбар не всегда корректно вписывается в интерфейс.

А так — очень симпатичный, но не очень функциональный редактор.

[Алексей Помогаев]

Да там блин даже изображение вставить нельзя, поделка какая-то школьная… И верно подмечено еще прикрутили extjs хрен знает зачем…

[VasilioRuzanni]

Откуда вообще информация про ExtJS, его там сроду не было.
Насчет функциональности — все очень даже в тему — такой редактор не чтоб HTML верстать, а чтобы задать минимальное оформление тексту в специально отведенных для этого блоках.

[Григорий Перетяка]

Откуда вообще информация про ExtJS, его там сроду не было.

Да, сроду не было, просто авторы назвали свой фреймворк тоже ext и структура случайно совпала и то, что такой простой редактор потянут на 1 МБ — это нормально (кстати, можно было не все библиотеки включать).

Человек с нормальной кармой и утверждает чушь в категоричной форме. Даже, если вы не разбираетесь в javascript или не работали с Ext JS, то достаточно было загуглить: www.google.com.ua/search?q=Aloha+Editor+ext. Поленились? A мне минус в карму поставил кто-то, не знаю вы или нет, но судя по всему за это.

Прув: файл редактора Aloha: www.aloha-editor.org/aloha/aloha/aloha.js, попробуйте поискать в нем фразу в кавычках, вместе с пробелом: " ext.".

Answer 3

[Григорий Перетяка]

http://www.google.com.ua/search?q=WYSIWYG+редактор+своими+руками

Я делал по какому-то толмуду из 10-ти уроков, но сейчас не найду.

Open Source согласен, все ужасные, а платных была парочка нормальных, уже не помню какие, но нагуглить легко, если для одного проекта, то проще купить, тем более, что они не много стоят. Тот что я делал/делаю — для Open Source проекта и там проприетарные использовать нельзя, потому пришлось свой писать.

Comments

[Алексей Помогаев]

Я уже сам нашел blog.whatwg.org/the-road-to-html-5-contenteditable

Answer 4

[Zamorozka]

По рекомендую NicEdit, легковесный + можно создавать свои кнопки.
nicedit.com/

Comments

[Алексей Помогаев]

Почему он вставляет div на enter?

[Алексей Помогаев]

Всмысле, почему не параграфы, как по идеи должно быть.

Answer 5

[dio]

Я вроде как делаю elrte и никак не возьму в толк какого html5 вы в редакторе хотите? html5 теги? contentEditable?

Comments

[Алексей Помогаев]

contentEditable

[Алексей Помогаев]

Посмотрел ваш проект — более вменяемый, чем другие, но слишком перегружен. Нажал вставить изображение и попал в центр управления полетами…

[Алексей Помогаев]

Хотя нет, беру слова обратно, у вас таже проблема div заместо p… Из-за опыта с wymeditor обманулся из-за выделения блока с текстом — думал это параграфы.

Answer 6

[Finom]

А какие требования? Я недавно зафигачил редактор на базе execCommand и contenteditable, столкнулся с парой проблем, но они не существенны для легковесного редактора. Получилось чуть больше 50 строк несжатого кода в виде jQuery плагина. А расширять можно легко, главное чтоб была соответствующая команда для execCommand. Если интересно, напиши в ЛС, я его чуть допилю и вышлю.

Comments

[Алексей Помогаев]

Основные стили (h1, h2, h3, параграфы, болд, италик, зачеркнутый, подчеркнутый), вставка ссылок, таблиц, изображений и embed объектов. Также нужен сброс стиля и чтобы по enter всегда создавались параграфы, а не br, div и прочая хрень. А по shift+enter делался перенос.

Также нужно, чтобы код документа форматировался (html source) и подсвечивался и чтобы можно было глянуть source конкретного участка. Но это я как понял, никому из open-source проектов это не подсилу, так что думаю организовать это через сервер-сайд и ajax или вебсокеты.

[Алексей Помогаев]

Как пример я себе уже нашел сырцы редакторов, как пример code.google.com/p/html-5-wysiwyg/ — там всего 25Кб и можно разобратся как начать это дело делать :)

[Finom]

У меня скромнее :)

Answer 7

[Asm]

Вот такой вот есть, к сожалению, сам пока не пробовал.
jejacks0n.github.com/mercury/

Comments

[Gosha Arinich]

Выше писал про него.

[Asm]

Проглядел. Виноват. Каюсь.

Answer 8

[Антон Ипатов]

redactorjs.com рекомендую