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

1

是的，这是可能的。您可以使用Google 的 Incremental DOM，也可以查看 Flarum 使用的 s9e TextFormatter并提取您需要的部分。

于 2016-10-21T13:35:44.860 回答
0

在您的 DOM 元素上放置一个属性，其中包含上次更新时间的时间戳。当进行实际更改时增加时间戳，仅当时间戳不同时才更新 DOM。

于 2012-12-13T14:03:43.100 回答
0

没有“简单”的方法。您必须区分 html 的两个位，然后用 delta 做一些花哨的事情。

我会对这个问题采取完全不同的方法：

  1. 如果要更新 html，请使用 jQuery 将视频标记 HTML 放置在新的 DIV 中。
  2. 使用简单的字符串替换或 .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 回答