2012-02-12 3 views
1

Я занимаюсь созданием редактора Rich Text, и вначале я планировал использовать contentEditable, но оказалось, что результаты чрезвычайно противоречивы и что выходной HTML часто нарушается.ContentEditable Alternative

Мне было интересно, есть ли какие-либо альтернативы использованию contentEditable, например, как это делают Документы Google (они создали собственный движок).

+0

Не могли бы вы более конкретно проблемы, с которыми вы сталкиваетесь? Вывод HTML является фиксированным, и большие редакторы (TinyMCE, CKEditor) выполняют разумную работу. –

ответ

0

Почему бы не дать TinyMCE идти? Это довольно хорошо и довольно утонченно - просто нужно объединить его с PHP, и вы можете сохранить содержимое :)

+0

Спасибо за предложение, попробовал, и он отлично работает. – skimberk1

6

Даже Google Docs построены на contentEditable. Они, однако, используют его по-другому, большинство редакторов там делают.

Когда вы фокусируете область документа, кажется, что она сфокусирована из-за поддельной каретки. Фактический фокус направлен на с настройками прослушивания клавиатуры. Затем двигатель (kix) изменяет область документа на основе нажатых клавиш.

Это потрясающе, потому что на самом деле нет серьезных кросс-браузерных несоответствий, поскольку браузер не тот, кто модифицирует DOM.

Единственная альтернатива, я думаю, может быть простой ввод текста вместо contentEditable элемента, но зачем с вопросами, как максимальная длина, когда вы можете просто воспользоваться contentEditable ;-)

+0

Вы уверены, что Google Docs использует 'contenteditable' на скрытом iframe? В прошлый раз, когда я смотрел, я не мог найти ничего довольного. Я мог бы ошибаться. –

+0

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

+0

Я только что проверил. В ядре kix есть определенно contentEditable связанные фрагменты кода. И да, они используют его, чтобы просто обнаружить нажатия клавиш. Вероятно, они хотят сосредоточить внимание на некоторых элементах (проблемы с несколькими браузерами?), Чтобы вы не изменяли контент, когда область документа не была «сфокусирована». Я не изучил его подробно. Но я действительно нашел 'iframe' с' contenteditable = true' в дереве DOM ;-) –