Мне нужно создать простой текстовый редактор, который сохраняет свое содержимое в файл XML с использованием произвольной разметки для указания специальных стилей текста (например: [b]...[/b] для полужирный и [i]...[/i] для курсивный ).Весь бэкэнд-PHP кажется довольно простым, но интерфейсная часть WYSIWYG-функции выглядит немного более замысловатой.Я не стал использовать один из доступных в настоящее время JavaScript-редакторов WYSIWYG на основе JavaScript, потому что параметры расширенного текста, которые я хочу разрешить, настолько ограничены, а эти приложения настолько полнофункциональны, что кажется, что для их подготовки требуется больше усилий.вплоть до нужных мне функций.
Итак, при создании простого текстового редактора я столкнулся с тремя подходами:
- В первых двух подходахсвойства
contentEditable или designMode для создания редактируемого элемента и метод execCommand() для применения новых стилей текста к выбранному диапазону. - Первый параметр использует стандартный элемент
div, выполняет все команды стилевого оформления для содержимого этого элемента.
- Второй параметр использует редактируемое
body окназаключенный в iframe, затем передает все команды стиля, инициированные кнопками в родительском документе, в его contentWindow, чтобы изменить выбранные диапазоны в содержании тела.Это похоже на несколько дополнительных шагов для достижения того же эффекта, что и в первом варианте, но я полагаю, что изоляция редактируемого содержимого в его собственном документе имеет свои преимущества. - Третий вариант использует
textarea с наложением div и использует событие oninput JS для обновления innerHTML фона div, чтобы оно соответствовало value входной текстовой области всякий раз, когда оно изменяется.Очевидно, что для преобразования таких элементов, как newline символы в текстовой области, в <br/> в div, требуется некоторая последовательность строк, но это позволило бы мне сохранить целостность моей [/] разметки, в то же время оставляя потенциально грязный DOMманипуляции только с внешним интерфейсом.
Я вижу преимущества и недостатки для каждого метода.Решения contentEditable кажутся изначально простейшими, но поддержка этих функций в разных браузерах, как правило, различается, и каждый браузер, поддерживающий его, кажется, манипулирует DOM по-разному при реализации execCommand().Как упоминалось ранее, решение textarea / div кажется лучшим способом сохранить мои условные соглашения по стилю, но пользовательская процедура манипуляции со строками для отображения расширенного текста в выходном div может стать довольно сложной.
Итак, япредставлю вам мой вопрос: учитывая цели развития, которые я изложил, какой метод вы бы выбрали и почему? И, конечно, если есть другой метод, который я пропускаю, который мог бы лучше служить моей цели, пожалуйста,просвети меня!
Заранее спасибо!