Редактор для хабра

[@no_smoking]

Не знал в какой блог запостить так что буду признателен если подскажите.

[@no_smoking]

О нашол похоже тему подходящую

[@Kallisto]

Если зажать табулятор в текстарея — начинает кидать по всей странице :)

[@Fr3nzy]

www.bankinform.ru/HabraEditor/
Чуток опоздали :)

[@no_smoking]

Там нет горячих клавиш, не умеет подсвечивать код прямо в из статьи нужно вставлять самому ну и т.д.

[@no_smoking]

Да и если есть ie6 это не значит что другии браузеры не нужны :)

[@Fr3nzy]

Я бы для такого проекта тоже повесил сообщение, что IE6 не поддерживается. Просьба обновить :)
Хотя бы потому, что он для хабра )

[@no_smoking]

А я бы на вашем мести хотябы пояснил что именно не работает в ie6

[@Dangelweb]

ie 6 работает?

[@no_smoking]

Я под него не старался т.к. думал что на хабре не пользуются таким динозавром, но на нем вполне нормально можно работать.

[@plastinin]

конкуренция — двигатель прогресса ©

[@no_smoking]

Знаете я не дизайнер по этому уж извините.

[@Nurked]

Хмм…
Привет

//test
public static void func()
{
    return;
}

______________________
Текст подготовлен в Хабра Редакторе от © SoftCoder.ru

Как бы, несмотря на то, что это не первый редактор, всё-таки в нём есть пара приятных моментов.
1) Подсветка кода прямо в статье
2) Нормально работает табуляция

Короче приятно. Фейс не особо, но это не главное. Если есть возможность, то сделайте так, чтобы превью было слева, а не снизу. Ну, и риббон надо немного причесать. А так — хм. Удобно. Я бы сказал — конкурентноспособно.

Ну, и конечно же, название придётся сменить 8-))

[@no_smoking]

На счет пред просмотра занимать пол экрана как то не то, не у всех ведь большие мониторы. Я наоборот старался по горизонтали чтобы не что не мешалось.

[@Nurked]

Ну, тогда по возможности было бы неплохо отключать превью вообще, сворачивать, чтоли. Потому что пока пишу статью мне не нужно превью.

[@no_smoking]

Вот это хорошая идея причем настройки сохранять на сервере для каждого свои.

Если я пойму что мой редактор хоть комуто нужен то я буду его развивать дальше.

[@Nurked]

у меня уже в избранном 8-)

[@no_smoking]

Ну раз так значит я не имею право бросать его :)

[@pieceofsummer]

Широких мониторов гораздо больше, чем высоких.

[@no_smoking]

Дмаете на разрешение 800х600 полосочка в 400px будет смотреться лучше?

[@pieceofsummer]

Думаю, что 800х600 сейчас найти довольно сложно (лично у меня оно только на виртуальных машинах бывает.).
Зато какие-нибудь 1280х800 — почти на всех ноутбуках, и как минимум 1280х1024 на большинстве мониторов.

[@no_smoking]

вы забыли про нетбуки

[@pieceofsummer]

Еще я забыл про КПК и прочие iPhone-ы.

1) Таких устройств пока сильно меньше. Да и если взять, к примеру, тот же 901-й еееПЦ, то там будет 1024х600, т.е. ширина все равно больше, и этим нужно пользоваться.

2) Для маленьких экранов обычно есть смысл полностью перерабатывать интерфейс.

[@y0ga]

вы часто пишите статьи на хабр с телефона?

[@pieceofsummer]

Я и с нетбука их нечасто пишу :)

[@no_smoking]

Знаете в нетбуке хорошо то что он маленький. Не знаю как у вас но у нас они все больше получают распространение так что думать надо и о них.

[@pieceofsummer]

«думать о них» != «сделать интерфейс, одинаково неудобный на обоих типах устройств».
На «большх братьях» удобнее колонки (с возможностью отключения просмотра вообще), на нетбуках — возможно, вообще не нужно делать «живой» просмотр, так как и без него тормозит.

[@no_smoking]

Предварительный просмотр уберу в настройки чтобы можно было отключать.
Может даже сделаю выбор где выводить этот пред. просмотр.

[@TiGR]

Сделайте размещение предпросмотра автоматом (в зависимости от размера окна браузера).

[@Kane]

Нравится больше чем другой хабраредактор.
Ещё бы подсветку синтаксиса для разных языков…

[@no_smoking]

Э так там более 80 языков.

[@Kane]

А как указать какой язык подсвечивать?

[@no_smoking]

можно так <code class=«Название языка»></code>
а лучше выбрать в выпадающем списке

[@Kane]

Хм… Я не виду выдающего списка… откуда он должен выпасть и что для этого нужно сделать?

[@no_smoking]

В верху на панели «Абзац» есть кнопочка code а рядом с ней стрелочка так вот эта стрелочка открывает список :)

//TODO: Надо будет написать подробную инструкцию

[@Kane]

К сожалению стрелочки есть не во всех браузерах. В частности нет в firefox:

Кстати, в некоторых браузерах редактор не работает вовсе, а выглядит так что я даже стесняюсь сюда скриншут постить… Вот ссылка, взгляните сами bayimg.com/JaNdnAaBd.

[@no_smoking]

А какой браузер я тестил FF3, IE6,IE7,Opera 9.61, Chrome

[@Kane]

С FX я разобрался. Стрелок не видно из-за того что их блокирует addblock. Название картинок с ними попадает под регулярное выражение «/button.$image» из подписки «Hackrus’ anti-advertisement (general)»

А ничего не работает в Konqueror 3.5.9. Знаю что не самый популярный браузер, но он идёт по-умолчанию с kde

[@no_smoking]

Извениете но я тоже не все силен, так что проверил на основных браузерах. Konqueror я проверить не могу у меня винда

[@Kane]

Я и не настаиваю, просто это единственный браузер который у меня есть помимо fx :) Но всё же странно, что в нём вообще ничего не работает…

[@no_smoking]

Да странно. Но как я сказал я даже посмотреть не могу да и я думаю не зачем процент пользователей очень мал.

[@lifestar]

Нажать на стрелочку правее code

[@GooRoo]

Что-то подстветка С++ не ахти…

[@Dimster]

Её потом руками надо еще редактировать.

[@no_smoking]

можно по подробнее

[@GooRoo]

Скопировал из редактора, как было:
#include <cstdlib>
#include <iostream>

using namespace std<font  color=" #008080">;

int main()
{
    return EXIT_FAILURE<font  color=" #008080">;
}

______________________
Текст подготовлен в Хабра Редакторе от © SoftCoder.ru

[@no_smoking]

Поправил, зачем то GeSHi заменял два пробела на такую конструкцию и встречалось это только в этой цветовой схеме.

#include <cstdlib>
#include <iostream>

using namespace std;

int main()
{
  return EXIT_FAILURE;
}
______________________
Текст подготовлен в Хабра Редакторе от © SoftCoder.ru

[@ha2bj]

Address Not Found
www.softcoder.ru could not be found. Please check the name and try again.

[@crackos]

Все круто, дизайн бы немного улучшить :)

[@no_smoking]

Если ктонибуть поможет я буду рад. И ссылка его будет красоваться на странице редактора :)

[@crackos]

Я как раз практикуюсь в веб-дизайне :)
Пишите в icqjabber, жид в профиле.

[@crackos]

icq jabber, жид в профиле.*

[@Silenius]

Вообще можете отсюда выцепить. Не знаю, насколько они там будут против :D

[@SIO]

Спеллчекер, пожааалуйста. И перечитайте пару раз написанное. Читается правда очень нелегко

[@eolexe]

spell checker, в хороших браузерах и так интегрирован и прекрасно работает для textarea ;) будет только льшняя нагрузна на JS, хотя это имхо, а также дела вукуса. Возможно добавлять spell cheker стоит для обдилёных браузеров как IE6.

[@SIO]

Я не про редактор. Его открыть я уже не мог. Мой мозг был вынесен текстом топика >_<

[@eolexe]

Аааа, действительно, прочитал только половину вашего комента.

[@no_smoking]

Спосибо старался :). А так спелчекером проверял видемо плохо да и пишу не важно главное чтобы вам удобнее писалось в моем редакторе.

[@tema_sun]

Я не знаю почему, но когда на Хабре (и только на нем) попадаются слова вроде «на скока» или «подцветка» — это несколько раздражает.
Прививает грамотность, видимо… :)

P.S. Редактор понравился, но название стоит как-то изменить.

[@no_smoking]

А что вам подцветка не нравится?

[@no_smoking]

«Подсветить» значит осветить что то светом чтобы было видно но не как не разукрасить в разные цвета, так что я больше склоняюсь к «Подцветить» от слово цвет а не свет.

[@pieceofsummer]

В английском «syntax highlighting», про цвета там ни слова.

[@no_smoking]

Не знаю как вы а я Русский

[@pieceofsummer]

Вас, как Русского, оскорбляет факт, что чуть менее, чем все компьютерные термины происходят из английского?

[@no_smoking]

Нет не оскорбляет. Но это не означает что надо дословно переводить. Вот человек не разу не встречавшийся с этим определением может подумать совершенно другое.

[@pieceofsummer]

Человек, не встречавшийся с этим определением, вряд ли будет писать код.

[@Serzhenko]

Если уж Вы делаете упор на грамотность, то две запятые в этом комментарии лишние.

[@pieceofsummer]

Ммм…
Если перед «чем», то это мем. Он там даже курсивом выделен.
Где еще?

[@Serzhenko]

«как русского» не обособляется. Да и «русского» с маленькой буквы пишется.

[@pieceofsummer]

Почему не обособляется? Причинное же значение оборота с «как».

Большая буква сохранена из исходного сообщения.

[@Serzhenko]

Извините, возможно, я и ошибся.
Обороты с «как», имеющие значение, синонимичное «в качестве», не обособляются.
Обороты же, имеющие значение, синонимичное «будучи», обособляются.
Отсюда и возникло некоторое замешательство.

[@no_smoking]

а судя по вашему комментарию я вас лично как то задел раз вы переходите на личности. Да я не селен правописание по этому наверно я не работаю лингвистом :)

[@tema_sun]

Хм. Тут я не прав. Это чисто субъективная неприязнь. Слово-то грамотное.
В принципе, это, наверное, даже более грамотно чем «подсветка».

[@eolexe]

Очень нравится поддержка табуляции, интуитивно получилось, спасибо и нивкоем случае не запускате проект! По поводу того, что вы опоздали, так же не слушайте, конкуренция двигатель прогресса :) Но вот над название прийдёться подумать. Всегда приятно иметь альтернативу, да ещё и такую достойную.

[@y0ga]

в опере горячие клавиши пересекаются с горячими клавишами браузера, либо вообще не работают. а в целом очень даже здорово!

[@no_smoking]

Я старался горячии клавиши по тегам выбирать, но опера многии из них заняла и как ее отучить перехватывать события не нашол, но если это возможно то я обязательно сделая. А на данный момент лучшая поддержка это FF3

[@GooRoo]

да, у меня Tab пробелы вставляет, но к сожалению переводит-таки фокус из окна ввода :(

Opera 10 alpha

[@bigbes]

Привет, ребята!: P
______________________
Текст подготовлен в Хабра Редакторе от © SoftCoder.ru

[@Nurked]

Шикарная идея 8-)

[@no_smoking]

Ok

[@Adelf]

Небольшие баги есть… После Ctrl-Z все выделяется как после Ctrl-A. А так приятненько и удобно.

[@modernstyle]

Мне понравилось, пишу много, предыдущий хабраредактор мне вообще не нравится. Спасибо. На мнения умников внимание не обращайте.

[@no_smoking]

По 'Ч' в ворде посмотрите. А остальное учту спасибо.

[@y0ga]

1. при вставки хабраюзера или хабраката не хватает кнопочки «отмена» (хоть и можно убрать по «esc»).
2. позионирование курсора восле вставки списков страдает, так же как и выделение после вставки blockquote или pre.

[@HornyVi]

Долго не мог понять почему не подсвечивает код. Потом дошло, что надо надавить «Посмотреть». Спереди кнопки длинющий текст совсем не связал с кнопкой. Обзовите кнопку «Предпросмотр», а примечание о том что «может получиться не то что хотели» где нибудь внизу написать. Мне кажется так будет юзабельней.

Но это мелочи, редактор отличный.)

[@Fortop]

В IE8 имеются глюки. В частности при попытке получить текст нажать на кнопку на popup'e не представляется возможным.

[@garex]

=Русский язык=

1. Посветка от слова свет. Слова «подцветка» нету в текущей стабильной версии русского языка.

2. "… Копирование и публикация материалов без активной ссылки на первоисточник запрещено..." д.б. «Копирование и публикация… запрещены».

[@pieceofsummer]

Слова «подцветка» нету в текущей стабильной версии русского языка.

Наверное, автор отыскал его где-то в найтли билдах русского языка :)

[@Splurov]

1. На кнопке «подчёркивание» подсказка «Курсив» (и зачем вообще подчёркивание? уже традицией стало подчёркивать только ссылки)
2. Хоткеи лучше сделать через ctrl, чтобы было так же, как в Word и других текстовых редакторах.
3. Несколько смутило, что описание у ссылки вставляется в title (смысла в title у текстовых ссылок нету, обычно).
4. Предлагаю убрать с панельки p и br и расставлять их автоматически (они и так расставляются, но можно умнее — начало текста или два перевода строк = начало нового абзаца).
5. Интересно, почему «цитирование» написано не тегом, как всё остальное :-)
6. Вместо выпадающего списка «заголовок» возможно лучше 6 кнопочек поставить? Места не намного больше будут занимать, но сократим количество кликов.
7. На блоках вставки a/img хотелось-бы кнопку «отмена» (а вместо «ок» -> «вставить» :-))
8. «Это примерный результат он может не совпадать с результатом» -> «Он примерный и может не совпадать с результатом» (хотя всё равно ужасно не красиво звучит).

[@pieceofsummer]

8. Может, что-то типа
«сферический, в вакууме» :)

или просто
«может отличаться от реального результата» (или от «реальной публикации» ?)

[@no_smoking]

1. поправил (банальный копипаст)
2. хотел через Ctrl но в опере большинство занято
3. Ссылки бывают и не текстовые а содержащие картинки, выделенный участок помещается во внутрь тегов а title не кто не обязывает заносить
4. Многие противники такой автоматизации. Тем более как оказалось хабр вырезает теги 'p'
5. :)
6. И так уже на разрешение 1024 еле влазит а для уменьшения кликов есть Alt + 1-6
7. Ну раз просите :)
8. Вот и я не мог что то корректное придумать но ваш вариант мне больше нравится.

[@Dimster]

# include <iostream>
using namespace std;  
void main()
{
        cout<<"Hello world";
                cout<<"\n\n";
}
______________________
Текст подготовлен в Хабра Редакторе от © SoftCoder.ru

[@GooRoo]

хм… Почему, когда я пробовал, код С++ подсвечивался по-другому? Вы выбирали <code class=«cpp»>?

[@Dimster]

Я в выпадающем меню выбрал C++. И потом еще пришлось руками подредактить выданный код, потому что он писал: <font   color= >.

[@Dimster]

Хм, да, code class=«cpp».

[@no_smoking]

Цветовые схемы не мои, их там несколько. Посмотрите может другая понравится :)

на счет как вы это добились я сейчас все перепробовал все нормально

[@GooRoo]

у меня предпросмотр в редакторе отличается от предпросмотра на хабре…

Opera 10 alpha. В других браузерах не проверял.

[@Ras_Dan]

Очень понравилось.

При вставке изображений хотелось бы иметь возможность добавлять width и height прямо из формочки. (Ну или автоподсосом :)

Буду использовать для вёрстки простеньких текстов-афиш (нехабр), спасибо!

[@Lesanol]

Простите, не хочу быть навязчивым, но вижу ошибку: „и сделал сервис для написаниЯ статей для хабра“.

[@feedbee]

Текст подготовлен в Хабра Редакторе от © SoftCoder.ru < — А о чем этот копирайт? Вы определяете свои права на текст топика/коммента? Если нет, то не ставится в таких местах ©.

[@navix]

Очень понравилось, не против, если некоторые функции «скопипастю»?

[@no_smoking]

Да пожалуйста. А какие если не секрет понравились?

[@kompo]

чудесное начало, не понятно, зачем так было набрасываться ;-)
еще несколько часов с напильником и дизайнером и будет конфетка.

[@no_smoking]

Да хороший дизайнер не когда не мешал. Но т.к. проект не коммерческий могли бы и потерпеть мои дизайнерские способности :)

[@GooRoo]

Как Вам к примеру вот такой ribbon? :)

[@no_smoking]

Поверти если бы я стал еще и рисовать картинки с градиентом то получилось бы намного ужаснее :)

Я конечно не против таблиц но использовать их для верстки. У меня более гибко стоит только графики немного добавить.

[@pavel_manylov]

У меня в Opera 10alpha как-то старнно рабоатет табуляция — нажимаю tab — «курсор» переезжает как положенно на 4 элемента вправо, НО после этого срабатывает классический tab, тоесть становится «наведённой» кнопка «Посмотреть», чтобы обратно вернуться в textarea приходится щёлкать мышкой на оной))

[@DerSpinner]

а можно прям очень не скромный вопрос? очень очень)))
а планируется ли расшарить исходники, и если да — то под какой лицензией?

[@no_smoking]

Вы какие исходники имеете виду. JS или Серверные. Если js то вот приведу код в порядок и читаемый вид и можно подумать, если те что на серверы используются так я дал на них ссылки это типограф и GeSHi а как это связать я думаю сами догадаетесь.

[@ElMaxo]

А есть оффлайн-редакторы для Хабра? Что-то вроде ZRaven и подобных вещей? есть ли в них необходимость?

[@no_smoking]

Редактор предназначен для добавления функционала которым не может похвастаться встроенный.
На данный момент это Горячие клавиши, подсветка кода, типограф и в планах мягкие переносы.
В первую очередь он будет удобен конечно тем кто вставляет код.
Про ZRaven не слышал.

[@Tilli]

Круто. Развивайте.

Далее пишу по принципу WYSIWYG'а — что вижу, то и пишу :]

www.bankinform.ru/HabraEditor — эта штука мне понравилась значительно меньше, а использовать что-то подобное очень хочется, правда, не только для написания на Хабр. Именно от желания пользоваться в дальнейшем (и другим советовать) и напишу несколько ви-зи-виг-рекомендаций:

Можно добавить больше спец символов. Думаю, многим бы пригодилось ударение. И, возможно, его стали бы чаще использовать.

«Текст подготовлен в Хабра Редакторе от © SoftCoder.ru» — это лучше убрать. Чтобы больше людей начали пользоваться этим Хабра-редактором, нужны другие ходы, а не такая подпись, которую всеравно, чаще всего будут стирать. Это даже раздражает.

Ещё очень не хватает отмены действия с помощью Ctrl+Z после применения чего-нибудь. Даже применив примитивный «Курсив», отменить его можно только стерев em и /em.
Кстати, а как вставить в текст какие-нибудь теги? <рrе> </рrе>

А так же не помешала бы кнопка «Отмена», справа от «Ок» при вставке ссылки или изображения. Опять же стирать потом руками не очень интересно.

Горячее сочитание клавиш в подсказаках корректнее всего писать в скобках. Дифисы там не нужны.
Пример того как будет лучше: Курсив (Ctrl+I), или можно двоеточие применить: Курсив: Ctrl+I

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

Думаю, ссылка на Типограф обязательна. Её можно дать прямо там, в настройках, просто сделав ссылкой.

Меня бы порадовала возможность смены регистра: капителью, строчными, первое с прописной. По типу сочетания Shift+F3 из Ворда.

И почему предпросмотр примерный и может не совпадать с результатом? Чего то я не пойму :] Собственно, зачем тогда всё это?

[@no_smoking]

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

[@no_smoking]

* Меня бы порадовала возможность смены регистра: капителью, строчными, первое с прописной. По типу сочетания Shift+F3 из Ворда.

Если посмотрите в исходник там есть это меню, осталась только реализация:)

* А так же не помешала бы кнопка «Отмена», справа от «Ок» при вставке ссылки или изображения. Опять же стирать потом руками не очень интересно.

Отмену сделаю, а сейчас можно Esc использовать.

* И почему пред. просмотр примерный и может не совпадать с результатом? Чего то я не пойму :] Собственно, зачем тогда всё это
Потому как подсветка и типографика делается на сервере и в реальном времени показывать не возможно, по нажатию кнопки посмотреть должно показываться то что будет на хабре, но и опять же я не могу знать вес механизмы форматирования на хабре по этому чтото может не совподать.

У меня тут появилась идея сделать мягкии переносы, стоит ли?

[@Mephistophele]

Сейчас пользовался, родилась неболшая идейка. А не добавить ли меню файл, чтобы можно было сохранять и загружать документ на винт. Мне бы очень пригодилось :)

[@no_smoking]

Как раз счас делаю чтобы статьи можно было сохранять, только на сервере. Так я даже думаю будет удобнее, доступ на любом компьютере.