2012-02-24 13 views
0

私は、ユーザーが定義済みのテンプレートに基づいて独自の電子メールニュースレターを作成できるようにするアプリを構築しています。ブラウザでHTMLベースのニュースレターを編集する - 「ページ内のページ」デザインパターン

私は、プロジェクト名などとその中に配置されたニュースレターを示すページを持っています。これは、iframeを使用していますが、これは最も簡単な解決策でした。

application page 
    iframe 
     html template with html content 

ここで私は編集ページに取り組んでいますが、iframeがこのような状況の解決策であることは疑いがあります。

編集ページでは、ニュースレターテンプレートの本体に埋め込まれたエディタを表示したいので、テンプレートを見ながら編集可能な領域を編集することができます。また、新しいバージョンを保存する前にプレビューを表示したいと思います。

ので、編集画面のようなものになります。私は編集可能なビューのためのiframeを使用している場合、今

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

を、そして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 

私は動的にスタイルやbodyタグの内容を抽出し、それらがアプリケーションページで正しく100%を表示するであろうことを確認していないする必要があると思いますので、これは私には少し脆い感じています。

これはかなり一般的なパターンで、他の人がどのように問題を解決したのか、それをどのように解決するのだろうと思いますか?

特に、プロセスや技術的な解決策を簡素化する設計上の変更があるかどうか疑問に思う。

これはRails 3.2で構築しています。

+0

私の意見では、レイアウトの面で間違っている可能性のあるものが驚異的なので、コードhtml電子メールを手渡すことが常にベストです。 – Undefined

+0

ありがとう。これは、HTMLテンプレートが手作業でコーディングされている場合ですが、コンテンツには数十の変更があります。だから私はコンテンツの編集だけにアクセスできるようにしています。 – aaandre

答えて

0

私はこれに非常に類似したものを作りました。私はFCKのようなWYSIWYGエディタの使用を検討しましたが、独自のスタイルを削除したり、テキストノードのレンダリングされたスタイルを計算したりするのは面倒でした。

代わりに、関連する要素にcontenteditable属性を使用しました。

バックエンドでは、iframeは変更が行われると常にサーバーに書き込みます。この代わりにHTML5ストレージを使用すると、AJAX呼び出しの頻度を減らすことができます。

このようにして、スタイルとその適用方法を完全に制御できます。

関連する問題