Я сумасшедший? (Как) я должен создать редактор контента jQuery?

Question

Хорошо, поэтому я создал CMS, в основном предназначенную для начальных школ. Он становится довольно популярным в Новой Зеландии, но единственное, что я ненавижу со страстью - это плохое качество браузерных WYSIWYG-редакторов. Я использую KTML (сделанный InterAKT, который был приобретен Adobe несколько лет назад). На мой взгляд, этот редактор делает много хороших вещей (редактирование / управление изображениями, миниатюры и довольно хорошее редактирование контента). К сожалению, время с этим продуктом пошло не так, и новые браузеры начинают ломать функции и, как правило, снижать производительность этого инструмента. Также довольно страшно основывать свои средства к существованию на несуществующем продукте!

Я охотился, на самом деле я регулярно охотюсь, чтобы увидеть, изменилось ли что-нибудь на арене WYSIWYG. Самая близкая вещь, которая меня поразила, - это структура WYSIHAT, но они решили игнорировать довольно актуальную парадигму редактирования, которую я собираюсь изложить ниже. Это идея моего предложенного редактора, и я не знаю ни одного из существующих продуктов, которые могли бы сделать это правильно:

Правильно, поэтому традиционная модель для редактирования, скажем, Страница в CMS, состоит в том, чтобы войти в «бэкэнд» и нажать «Изменить» на странице. Затем будет загружен другой экран с редактором и, возможно, с несколькими другими полями. Более продвинутые CMS могут иметь несколько полей для редактирования, предназначенных для разных частей страницы. В любом случае, большая проблема этого способа состоит в том, что пользователь редактирует документ вне конечного контекста, в котором он будет отображаться. В простейшем смысле это означает шаблон страницы. Многие вещи могут быть неправильными, например Размер области редактирования может отличаться от ширины фактической области шаблона. Высота почти всегда фиксирована, потому что существующие редакторы всегда используют IFRAMES для обратной совместимости. И есть много других проблем, о которых, я уверен, вы вполне осведомлены, находясь в этой области разработки.

Вот мой редактор утопии:

Вы нажимаете «Изменить страницу»: отображается фактическая страница (с ее текущим шаблоном). Части страницы были помечены как редактируемые через имя класса. Вы нажимаете на одну из этих областей (в моем случае это просто большая область «тело» в середине шаблона), и в верхней части экрана появляется панель редактирования со всеми стандартными элементами управления (полужирный, курсив). , вставьте изображение и т. д.). Iframes никогда не используются, вместо этого мы полагаемся на установку contentEditable в true для рассматриваемых DIV. Firefox 2 и IE6 могут уйти, давайте двигаться дальше. Вы можете редактировать страницу, точно зная, как она будет выглядеть при сохранении. Поскольку все стили для этого шаблона загружены, ваши заголовки будут выглядеть правильно, все будет просто модно. Это такая радикальная концепция? Почему мы до сих пор довольны TinyMCE и другим редактором, который слишком неловко использовать, потому что это звучит как ругательство!?

Давайте посмотрим правде в глаза:

Я новичок в JavaScript. Я однажды поиграл в этой области, используя в качестве руководства Javascript Anthology от SitePoint. Это был довольно крутой опыт обучения, но они, конечно, использовали IFRAME, чтобы облегчить свою жизнь. Я попытался пойти другим путем и просто использовать contentEditable и даже попытался обойти нативные процедуры редактирования контента (execCommand) и вместо этого написал свой собственный. Они вроде работали, но всегда были проблемы.

Теперь у нас есть jQuery и несколько библиотек, которые абстрагируют такие вещи, как отсутствие поддержки IE в Range. Мне интересно, я сумасшедший, или это действительно хорошая идея, чтобы попытаться построить редактор вокруг этой парадигмы редактирования, используя jQuery и соответствующие плагины, чтобы облегчить работу?

Мои актуальные вопросы:

• С чего бы вы начали?
• Какие плагины знаете ли вы, что это поможет больше всего?
• Стоит ли это того, или есть волшебный проект, который уже существует что я должен присоединиться?
• Какие самые большие препятствия нужно преодолеть в проект, как это?
• Я сумасшедший?

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

С нетерпением жду возможности услышать мысли и мнения людей.

UPDATE

Я решил, что я попробую это и начну проект github, когда у меня будет что-то классное на что посмотреть. Оттуда я буду полностью рад любой помощи, которую могут предложить люди. Это будет с открытым исходным кодом, конечно:)

ОБНОВЛЕНИЕ 2

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

Вот ссылка: http://github.com/brendon/SpikeEdit

Обновление 3

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

http://www.fluffy.co.uk/stediting

Обновление 4

Хорошо, я получил достаточно далеко. Самая большая проблема (как все всегда знают) состоит в том, как сохранить код, генерируемый в разумном состоянии. WYSIHAT, кажется, взял на себя все, что не связано с IFRAME, поэтому я сдерживаюсь, чтобы посмотреть, как далеко это продвинется. Они используют метод очистки кода в конце цикла редактирования. Я думаю, что это должно быть очищено на лету, иначе вы можете отредактировать себя в болоте (я делал это несколько раз). Когда у меня будет время, я исследую какой-то механизм гомогенизации, который можно подключить, чтобы процесс редактирования работал максимально схожим образом во всех современных браузерах.

Answer 1

Я полностью согласен с вашим предложением редактора - разметка и фреймы так 2001 года :) Мир движется по семантике, поэтому нам нужны современные инструменты для редактирования контента. (см. мои слайды http://www.slideshare.net/draftkraft/aloha-editor-contenteditable-useable). Я запустил Aloha Editor (http://aloha -editor.org) более или менее с той же интенсивностью, что и ваша выше. Утопия :-) в нашем случае стала более или менее реальностью и у нас уже есть какое-то программное обеспечение, использующее его:

Известно, что Aloha Editor используется в качестве главного редактора

• Typo3 (в следующей основной версии V5 http://latest.phoenix.demo.typo3.org/. Крутые ребята, огромные cms с открытым исходным кодом в ЕС. Около 500.000 пользователей)

• Gentics Content.Node V5 (Первая известная крупная производственная система, использующая Aloha Editor. Клиент с 16 000 пользователей. http://gentics.com/Portal.Node/blog-detail/gentics/postings/company/Telekom-Austria-Group---communication-with-16-000-em.en.html)

Известно, что эти системы имеют плагины

• Drupal (cms с открытым исходным кодом https://github.com/evo42/aloha-drupal)

• Midgard (cms с открытым исходным кодом http://www.midgard -project.org / обсуждение / форум разработчиков / aloha_editor-and_hrungnir_user_interface / )

• некоторые другие проекты, которые я слышал, но я не знаю

Мы приветствуем любого разработчика, который хочет присоединиться, внести свой вклад, участвовать, оставить отзыв или что-то еще. Мы хотим, чтобы дорожная карта и разработка были максимально открытыми для всех. Обратная связь приветствуется!

Answer 2

Хорошо, вау!Эти ребята делают именно то, о чем я думал:

http://aloha -editor.com /

Мне не очень нравится их панель инструментов, но они актуальныфункциональность выглядит великолепно!Я буду следить за их прогрессом:)

Answer 3

Это может помочь .

Джо Армстронг придумал ту же идею, что и вы, и провел неделю или около того, играя с ContentEditable в паре с CouchDB для обеспечения устойчивости.Он не закончил с очень отточенным редактором, но это хорошая отправная точка для создания собственного (если это то, что вы хотите сделать).Кажется, было бы довольно просто взять то, что есть, и поместить его в надежный контекстный редактор.

В качестве примечания, я согласен с вашим представлением о том, что интерфейсы редактирования должны быть как можно ближе по контексту и макету картефакт, который они редактируют, насколько это возможно.Дайте мне знать, если вы закончите свое дело;Мне было бы интересно внести свой вклад в такой проект.

Прежде чем вы выйдете и создадите редактор, стоит заплатить, чтобы проверить, что на самом деле делают ваши пользователи.В корпоративных информационных технологиях девять раз из десяти вы увидите, как люди собирают свои страницы в Word или что-то подобное, а затем вставляют результаты в любой «редактор», который у вас есть.Я не думаю, что это будет работать слишком хорошо с методом ContentEditable.Кстати, именно поэтому мы все еще используем TinyMCE;на полпути приличная кнопка «Вставить из Word».Вы нацеливаете инструмент на начальные школы, а не на корпоративную среду, поэтому там все может быть по-другому.

Answer 4

Вы пробовали uEditor ? Это надежное и простое решение Jquery, которое превращает текстовые редакторы в редакторы WYSIWYG

//Grab the content of the editable area then replace it with a textarea like so...

var editableContent = $(selector).html();
$(selector).after("<textarea>" + editableContent + "</textarea>")

// add attributes to text area as desired

// kill the original area:

$(selector).remove();

// call uEditor

$(textareaSelector).uEditor({options});

Очевидно, вы бы добавили опции и обработчики событий в uEditor.

Просто мысль. Rob

Answer 5

Все эти годы я рад, что не сделал свой собственный! Люди поняли, что можно использовать contenteditable в качестве устройства ввода-вывода, чтобы принимать ввод, а затем поддерживать фактический HTML чистым вне contenteditable. Два проекта, которые я использую, которые используют этот метод:

• Редактор Froala
• trix (скоро будет интегрирован в Ruby on Rails)

Froala - безусловно, более многофункциональный редактор, но оба они работают одинаково, что приводит к чистой и предсказуемой разметке

Answer 6

Попытка создать другой редактор WYSIWYG - пустая трата усилий. Вам придется реплицировать весь код, уже доступный в других редакторах, чтобы справиться со специальными проблемами, необходимыми для создания правильного HTML, упростить редактирование элементов, правильно управлять клавиатурой ...

Лучше использовать существующий, который находится в стадии разработки, и сначала попытаться использовать его как есть, убедиться, что он обрабатывает ваш код и генерирует то, что вы хотите, а затем узнать, как настроить его ширину в соответствии с контейнером, автоматически настроить его высота до его содержимого, поместите панель инструментов во внешний div, и вы получите то, что хотите. Если вы действительно хотите избавиться от iFrame, отправьте им патчи, если они еще не предоставляют такую ​​возможность, но это будет гораздо проще, чем создавать все с нуля.

И я могу заверить вас, что есть много людей, которые использовали этот вид настройки в течение нескольких лет, не заботясь о том, какой внутренний элемент используется для редактирования, включая создание любой части веб-страницы, редактируемой вызвать как контекстное меню, двойной щелчок или плавающая кнопка. Они просто сосредотачиваются на CMS и передают подробности о редакторе отдельной группе.

Answer 7

В JQuery есть много редакторов WYSIWYG, но, честно говоря, я был разочарован большинством из них. То, что вы предлагаете, звучит очень полезно. Вот как я это сделаю:

Сначала объект получает ключевые события только тогда, когда у него есть фокус. Лучший способ обойти это - отлавливать ключевые события на уровне страницы. Затем добавьте правильный символ в div, который в данный момент редактируется. Это будет обрабатывать простую типизацию в любом div, который, вероятно, будет первым, что вы захотите решить.

Далее вам понадобится панель инструментов, которую, вероятно, следует вытащить со страницы, установив фиксированный дисплей. Вам понадобится некоторая логика для вставки интервалов и тому подобное для обработки стилизации текста.

Конечно, если вы создадите все это самостоятельно, вам нужно будет построить все - даже мигающий курсор, показывающий, куда идут введенные вами символы. Выделение текста, вставка курсора в середину текста, копирование и вставка; вам в значительной степени придется создавать все то, что мы используем для получения с нуля. Другой вариант - использовать какое-то текстовое поле, но, насколько я понимаю, вы хотели бы избежать этого.

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

Answer 8

Если я правильно понимаю, вам нужны динамически редактируемые поля (см. Facebook, другие сайты ajaxy-web2.0). Таким образом, это будет означать, что вы просто установите класс (или что-то еще) на соответствующее имя и сделаете jquery преобразовать его в текстовое поле / textarea onClick. Я думаю, что jquery делает что-то подобное с одним из своих плагинов. В любом случае, тогда вы можете получать обновления для каждого поля (если вы не хотите редактировать всю страницу или нужно обновить всю страницу / объект для редактирования одного поля).
Конечно, чтобы связать их вместе, потребуется немного Ajax и немного бэкэнда, но это довольно банально imho.