0

私の現在のプロジェクトでは、html エディターを作成しています。

どのように機能する必要があるか

内部の要素

  1. テキスト領域 - HTML をテキストとして入力するには
  2. Iframe - 入力された HTML を実際のものとして表示するには [文字列 HTML を UI にレンダリング]
  3. 一部のボタン

ワーキングロジック

テキスト領域内に何かを入力する登録済みユーザー:

元 ：

<div style="border:1px solid red;">This is a div</div>

そのユーザーがボタン [UI に変換] をクリックした後、iframe コンテンツを新しい値 [テキスト領域の値] に変更する必要があります。

iframe要素を変換した後、htmlは次のようになります

<html>
<head>
<style>
 .mydiv{

  }
</style>
 </head>
<body>

<div class="mydiv" style="color:red">This is a div</div>

</body>
</html>

iframe HTML をテキスト領域に戻す別のボタンがあります。

これらはすべて正常に動作します [firebug の問題を除いて現在大きな問題はありません]、しかし、iframe コンテンツをカスタマイズするには、より良い UI を統合する必要があります - >

例：ユーザーがDIViframeでクリックすると、そのdivの色とフォントを変更するポップアップが表示されます[色を選択するためのカラーピッカーになり、フォントを選択するためのドロップダウンになります][いくつか実装する必要がありますもっとこのように]。大きな痛みにならないことを願っています。

その後、変更された値を取得する必要があります。

例: div の色を変更しました。

したがって、戻り値は次のようになります

<html>
<head></head>
<body>

<div class="mydiv" style="color:gray;">Hello World !</div>
</body>
</html>

すること

  1. スタイル属性 [上記] はインライン スタイルであることに注意してください。要素にクラスが定義されている場合は、それをクラス スコープに変換する必要があるため、CSS クラス「mydiv」を新しいスタイルで追加/更新する必要があります。

  2. bodyiframeの要素で何かを変更しているとします。これは一般的な要素であるため、css スタイル ブロックでスコープbodyを追加/更新する必要があります。BODY

    元：

    BODY{ color:グレー; }

    皆さんが私のアイデアを理解してくれたことを願っています。現在のプロジェクトでこのようなものを実装する必要があります。

これよりスリムなものはありますか？[心配する必要がないように、私はそれを使用できます]またはどうすればこれを達成できますか? 特にcssクラスのグループ化。

ある種の正規表現を使用する必要があることを願っていますが、これには非常に弱いです。

完了するのを手伝ってください。

私が試したのはここです：http://jsfiddle.net/5PKXq/3/

ありがとうございました。

4

1 に答える 1

0

ここであなたが本当に車輪を再発明していると思うのと同じように、 の内容を取得することをtextarea妨げているものはわかりdivません。である必要がありますがiframe、これは個人的には悪い方法だと思います)。

var $textarea = $('textarea'),
    $container = $('div#container'),
    $refresh = $('button#refresh'),  // or something
    ;

$refresh.on('click', function () {
    $container.empty()
              .html($textarea.val())
              ;
    // or something
});

これはテストされていないコードであることに注意してください。

于 2012-04-12T06:16:42.177 に答える