5

リアルタイム マークダウン エディターdillinger.ioのクローンを作成していますが、ドキュメントにビデオを埋め込んだ場合の dillinger とは異なりますが、ドキュメントが更新されるたびにビデオが更新されて点滅することは望ましくありません。

DOM の構成方法は次のとおりです。

<div id='editor'></div>
<div id="viewer">
    <h2>title</h2>
    <iframe width="560" height="315" 
    src="http://www.youtube.com/embed/9bZkp7q19f0" frameborder="0" allowfullscreen>
    </iframe> <!-- Gangnam style youtube embed-->
    <p>What a dull video</p>
</div>

この場合のエディターはすばらしいAce エディターで、editor.getValue()

これを行う簡単な既知の方法はありますか？私はグーグルで検索しましたが、有用なものは何も見つかりませんでした。

これは私が現時点で持っているものです

function update(){
    var mk = editor.getValue();
    var updatedHtml = converter.makeHtml(mk);
    $('#viewer').html(updatedHtml); 
}

editor.getSession().on('change', function(e) {
    update();
});

しかし、私はそれをこのようなものに変更したいと思います

function update(){
    var before = $('#viewer').html();   
    var mk = editor.getValue();
    var updateHtml = converter.makeHtml(mk);
    $('#viewer').replaceWhereDifferent(updateHtml, before); 
}

これにより、更新が発生するたびに埋め込まれた youtube ビデオが点滅するのを止めることができます。

問題は、関数の適切な形式がないことです

replaceWhereDifferent(updateHtml, before)

HTML文字列の例は次のとおりです。

<div id="viewer">
    <h2>title</h2>
    <iframe width="560" height="315" 
    src="http://www.youtube.com/embed/9bZkp7q19f0" frameborder="0" allowfullscreen>
    </iframe> <!-- Gangnam style youtube embed-->
    <p>comment</p>
</div>

ここで、ユーザーが p コメントを次のように変更するとします。

<p>OMG thats the best video ever</p>

ビデオを更新せずに更新したい

これはすべて、 Ace エディターからコードを取得するマークダウン コンバーターによってコードが生成されていることです。そのため、すべてのマークダウンが一緒に変換され、マークダウンのさまざまな部分を識別したりタグ付けしたりすることはできません。私が得るのは、更新されたhtml文字列だけです

4

4 に答える 4

0

「簡単」な方法はありません。html の 2 つのビットを Diff してから、デルタで派手なことをする必要があります。

私は問題に対してまったく異なるアプローチをとります：

  1. HTML を更新する場合は、jQuery を使用して、新しい DIV 内にビデオ マークアップ HTML を配置します。
  2. 単純な文字列 replace または .html() などを使用してすべての HTML を置き換えます。
  3. ビデオ マークアップをあるべき場所に戻します。

例えば

$('#placeholder').html($('#videodiv').html()); //1.
$('#divtoupdate').load("/URL/for/newdata");    //2
$('#videodiv').html($('#placeholder').html()); //3
于 2012-12-13T14:04:21.920 に答える
0

追加情報ありがとうございます。これで、より明確な画像が得られました。交換したいだけなら<p>簡単です。

JS:

$('#add_comment').click(function(){ //User clicks add comment
  var comment = $('#comment_input').val(); //Get user's comment
  $('#viewer p').html(comment); //update viewer's <p>
});

これにより、進め方のアイデアが得られることを願っています。

于 2012-12-13T14:26:54.013 に答える