Редактирование информационного бюллетеня на основе HTML в браузере — страница внутри шаблона оформления страницы

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

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

application page
    iframe
        html template with html content

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

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

Итак, экран редактирования будет выглядеть примерно так:

application page
    html template containing the editable area
        ckeditor allowing editing the editable area

Теперь, если я использую iframe для редактируемого представления, тогда ckeditor должен быть встроен в iframe. И если я отправлю iframe, страница приложения не обновится. Это решение и обходные пути кажутся чрезмерно сложными/замысловатыми.

application page
    iframe
        html template containing the editable area
           ckeditor allowing editing the editable area

Итак, каким может быть другое решение?

Я думаю о том, чтобы взять стили CSS шаблона информационного бюллетеня и содержимое тега тела и отобразить их на странице приложения. Я должен был бы убедиться, что стили определены уникально для приложения, чтобы они не конфликтовали со стилями новостной рассылки, что может быть выполнимо. Также я контролирую шаблоны и смогу определить области, которые нужно объединить с телом страницы.

application page
    merged html template css
    html template body tag content 
        ckeditor allowing editing the editable area

Это кажется мне немного хрупким, так как мне пришлось бы динамически извлекать стили и содержимое тега тела, и я не уверен, что они будут отображаться на странице приложения на 100% правильно.

Я предполагаю, что это довольно распространенный шаблон, и мне интересно, как другие решили эту проблему или как бы вы ее решили?

Особенно интересно, может ли быть изменение конструкции, которое бы упростило процесс и техническое решение.

Я строю это в Rails 3.2.


person aaandre    schedule 24.02.2012    source источник
comment
На мой взгляд, всегда лучше передавать электронные письма с кодом html, так как количество вещей, которые могут пойти не так с точки зрения макета, феноменально.   -  person Undefined    schedule 27.02.2012
comment
Спасибо. Это тот случай, когда HTML-шаблоны кодируются вручную, но затем в контент вносятся десятки изменений. Поэтому я предоставляю доступ только к редактированию контента.   -  person aaandre    schedule 27.02.2012


Ответы (1)


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

Вместо этого я использовал атрибут contenteditable для всех соответствующих элементов.

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

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

person Dan Blows    schedule 20.05.2012