Действительно ли я являюсь сумасшедшим? (Как) я должен создать редактора контента jQuery?
Хорошо, таким образом, я создал CMS, главным образом нацеленный на Начальные школы. Это становится довольно популярным в Новой Зеландии, но одной вещью, которую я ненавижу со страстью, является в основном плохое качество в WYSIWYG-редакторах браузера. Я использовал KTML (сделанный InterAKT, который был куплен Adobe несколько лет назад). По-моему, этот редактор делает много больших вещей (редактирование изображение / управление, thumbnailing и довольно хорошее редактирование содержания). К сожалению, время имело свой противный путь с этим продуктом, и новые браузеры начинают повреждать функции и обычно ухудшать производительность этого инструмента. Это - также довольно страшное базирование моих средств к существованию на более не существующем продукте!
Я искал, на самом деле я регулярно ищу вокруг, чтобы видеть, изменилось ли что-нибудь на арене WYSIWYG. Самая близкая вещь я видел это, волнует меня, платформа WYSIHAT, но они решили проигнорировать довольно соответствующую парадигму редактирования, которую я собираюсь обрисовать в общих чертах ниже. Это - идея для моего предложенного редактора, и я не знаю ни о каких существующих продуктах, которые могут сделать это правильно:
Право, таким образом, традиционная модель для редактирования скажем, Страница в CMS должна войти в 'бэкэнд' и редактирование щелчка на странице. Это затем загрузит другой экран редактором в нем и возможно несколькими другими полями. Более усовершенствованный CMS будет, возможно, иметь несколько полей редактирования, которые являются для различных частей страницы. Так или иначе большая проблема с этим способом сделать вещи состоит в том, что пользователь редактирует документ за пределами заключительного контекста, в котором это появится. Простым языком это означает шаблон страницы. Много вещей могут быть неправильными, например, с области редактирования могло бы отличаться от ширины фактической шаблонной области. Высота почти всегда фиксируется, потому что существующие редакторы всегда, кажется, используют IFRAMES для обратной совместимости. И существует многое из другого, жалуется, который я уверен, что Вы вполне знаете, если Вы находитесь в этой области разработки.
Вот моя утопия редактора:
Вы нажимаете 'Edit Page': фактическая страница (с ее фактическим шаблоном) дисплеи. Части страницы были отмечены как доступные для редактирования через имя класса. Вы нажимаете на одну из этих областей (в моем случае, это просто была бы большая область 'тела' посреди шаблона), и панель редактирования раскрывается от вершины экрана со всеми Вашими стандартными средствами управления (полужирный, курсивный, вставьте изображение и т.д....). Iframes никогда не используются, вместо этого мы полагаемся на установку contentEditable к истинному на рассматриваемом DIV. Firefox 2 и IE6 могут уйти, давайте идти дальше. Можно отредактировать страницу, знающую точно, как это посмотрит при сохранении его. Поскольку все стили для этого шаблона загружаются, Ваши заголовки будут выглядеть корректными, все будет просто денди. Это такое радикальное понятие? Почему мы все еще довольный TinyMCE и что другой редактор, который является слишком смущающим для использования, потому что он походит на ругательство!?
Давайте считаться с фактами:
Я - новичок JavaScript. Я действительно однажды играл вокруг в этой области с помощью Антологии JavaScript от SitePoint как руководство. Это был вполне прохладный полезный опыт, но они, конечно, использовали IFRAME для создания их жизней легче. Я попытался пойти другим путем и просто использовать contentEditable и даже попытался обойти собственный компонент, довольный стандартные программы редактирования (execCommand), и вместо этого записал свое собственное. Они отчасти работали, но всегда были проблемы.
Теперь у нас есть jQuery и несколько библиотек, которые поддерживают абстрактные вещи как отсутствие IE Диапазона. Я задаюсь вопросом, действительно ли я являюсь сумасшедшим, или это - на самом деле хорошая идея попытаться создать редактора вокруг этой парадигмы редактирования с помощью jQuery и соответствующих плагинов для создания задания легче?
Мои фактические вопросы:
- Где Вы запустили бы?
- То, какие плагины Вы знаете этого, помогло бы большинству?
- Действительно ли это стоит того или является там волшебным проектом, который уже существует, на котором я должен присоединиться?
- Что самые большие препятствия должны преодолеть в проекте как это?
- Действительно ли я являюсь сумасшедшим?
Я надеюсь, что этот вопрос был опубликован на правильном форуме. Я полагал, что это - технический вопрос, поскольку я желаю знать, что определенные препятствия и ловушки не упускают и также если это технически выполнимо с сегодняшней технологией.
Нетерпеливое ожидание слышать мысли народов и мнения.
ОБНОВЛЕНИЕ
Я решил, что буду делать попытку этого и запущу проект GitHub для него, когда у меня будет что-то прохладное для взгляда на. Оттуда я был бы полностью рад за любую справку, что люди должны предложить. Это будет открытый исходный код, конечно, :)
ОБНОВЛЕНИЕ 2
Я сделал проект и обрисовал в общих чертах цели. Сообщите мне, хотите ли Вы присоединиться к группе проекта как участник, но я разбужу основы сначала, таким образом, будет что-то для запуска с.
Вот ссылка: http://github.com/brendon/SpikeEdit
Обновление 3
Ничего себе! Я нашел этот проект. Какая классная идея! Я связываюсь с ним, чтобы видеть, добирался ли он когда-нибудь где-нибудь с ним:
http://www.fluffy.co.uk/stediting
Обновление 4
Хорошо, я стал довольно далеким. Самые большие проблемы (как все всегда знает) состоят в том, как сохранить код, сгенерированный в разумном положении дел. WYSIHAT, кажется, имеет, принимают целую non-IFRAME вещь, таким образом, я удерживаю, чтобы видеть, как далеко это добирается. Они проявляют подход просто чистки кода в конце цикла редактирования. Я думаю, что это должно быть убрано на лету иначе, можно отредактировать себя в болото (я сделал это несколько раз). Когда у меня будет время, я исследую своего рода механизм гомогенизации, который мог быть включен, чтобы заставить процесс редактирования вести себя максимально так же во всех современных браузерах.
5 ответов
Вы пробовали 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.
Просто подумайте. Роб
Некоторое время назад у Джо Армстронга была примерно та же идея, что и у вас, и он провел неделю или около того, играя с ContentEditable в паре с CouchDB для персистентности. В итоге у него получился не самый лучший редактор, но это хорошая отправная точка для создания своего собственного (если вы хотите сделать именно это). Кажется, что будет довольно просто взять то, что там есть, и превратить это в солидный контекстный редактор.
В качестве примечания, я согласен с вашим мнением о том, что интерфейсы редактирования должны быть настолько близки по контексту и расположению к артефакту, который они редактируют, насколько это возможно. Дайте мне знать, если в итоге вы создадите свой собственный; я был бы заинтересован в участии в подобном проекте.
Однако прежде чем создавать редактор, стоит узнать, что на самом деле делают ваши пользователи. В корпоративных ИТ-отделах в девяти случаях из десяти вы увидите, как люди набирают свои страницы в Word или что-то подобное, а затем вставляют результаты в любой "редактор", который у вас есть. Я не думаю, что это будет хорошо работать с методом ContentEditable. Кстати, именно поэтому мы до сих пор используем TinyMCE; в нем есть полуприличная кнопка "Вставить из Word". Вы нацеливаете инструмент на начальную школу, а не на корпоративную среду, поэтому там все может быть по-другому.
Если я правильно понимаю, вам нужны динамически редактируемые поля (см.: facebook, другие сайты ajaxy-web2.0). Таким образом, это означает, что вы просто установите класс (или что-либо еще) на соответствующее имя и попросите jquery преобразовать его в текстовое поле/текстовую область onClick. Я думаю, что jquery делает что-то подобное с одним из своих плагинов. В любом случае, тогда вы сможете обновлять каждое поле (в случае, если вы не хотите редактировать всю страницу или обновлять всю страницу/субъект для редактирования одного поля).
Конечно, это потребует немного ajax и некоторой работы с бэкендом, чтобы связать все вместе, но это довольно тривиально, имхо.
В JQuery действительно много редакторов WYSIWYG, но, честно говоря, я разочарован большинством из них. То, что вы предлагаете, звучит очень полезно. Вот как бы я это сделал:
Сначала объект получает ключевые события только тогда, когда он находится в фокусе. Лучший способ обойти это - уловить ключевые события на уровне страницы. Затем добавьте правильный символ к редактируемому в данный момент div. Это будет обрабатывать базовую типизацию в любом div, что, вероятно, будет первым, чем вы захотите заняться.
Затем вам понадобится панель инструментов, которую, вероятно, следует вытащить со страницы, установив фиксированный режим отображения. Вам понадобится некоторая логика для вставки промежутков и тому подобного для обработки стилизации текста.
Конечно, если вы построите все это сами, вам нужно будет построить все - даже мигающий курсор, показывающий, куда идут ваши набранные символы. Выделение текста, установка курсора в середине текста, копирование и вставка; вам придется создавать все, что мы привыкли, с нуля. Другой вариант - использовать какое-то текстовое поле, но, насколько я понимаю, вы бы хотели этого избежать.
В любом случае, мой окончательный вердикт - это возможно, но все равно придется много работать. Похоже, в этом есть большой интерес, так что вы, вероятно, могли бы получить некоторую помощь.
Попытка создать еще один редактор WYSIWYG - пустая трата усилий. Вам придется скопировать весь код, уже доступный в других редакторах, чтобы решить особые проблемы, необходимые для создания правильного HTML, упростить редактирование элементов, правильно управлять клавиатурой ...
Лучше использовать существующий тот, который находится в разработке, и сначала попробуйте использовать его как есть, убедитесь, что он обрабатывает ваш код и генерирует то, что вы хотите, затем узнайте, как настроить его ширину в соответствии с контейнером, автоматически настроить его высоту в соответствии с его содержимым, поместите панель инструментов во внешнем div, и вы получите то, что хотите. Если вы действительно хотите избавиться от iFrame, отправьте им исправления для этого, если они еще не предоставляют такую возможность, но это будет намного проще, чем создавать все с нуля.
И я могу заверить вас, что есть много людей, которые использовали этот тип настройки в течение нескольких лет, и им не нужно было заботиться о том, какой внутренний элемент используется для редактирования, в том числе делая любую часть веб-страницы доступной для редактирования с помощью запускать как контекстное меню, двойной щелчок или плавающую кнопку. Они просто сосредотачиваются на CMS и передают подробную информацию о редакторе специальной команде.