Froala - 获取HTML

Question

我正在尝试使用Froala 2.4从元素中获取当前HTML
我的主要原因是能够比较新HTML中的原始HTML以查看用户是否更改了任何内容,以及是否触发了保存事件.

这是我目前的代码

console.log($(this).froalaEditor('html.get'))    
console.log($(this).data('froala.editor')._original_html);    

这是输出

<p spellcheck="false">TestString<b>Edited</b></p>
TestString<b>Original</b>

问题是我只想从第一个输出中检索这个:

 TestString<b>Edited</b>

(我不希望在此示例中包含Paragraph标记)

我可以做一个简短的功能来处理这个问题,但似乎我错过了一些关于我从Froala获取字符串的方式.

帮助真的很感激!

Answer 1

您可能需要在某处存储编辑器的内容:

var html = $(this).froalaEditor('html.get'); // <p spellcheck="false">TestStringEdited</p>

如果我说得对,那就删除HTML标签吧.最简单的方法是jQuery .text()方法:

var text = $( html ).text(); // TestStringEdited

更新

你需要只剥离上层<p>标签吗？这是一个在jQuery的帮助下实现过滤标记的函数.但是您可以重写它并创建一个排除标记数组,或者在内容的每个子元素上递归调用它.而且,您可以使用正则表达式作为替代方案.

function stripParagraphs( html ) {
  var r = '';

  $( html ).each(function() {

    // test each higher-level tag to be <p>
    if ($( this ).prop( 'tagName' ) === 'P') {
      r += $( this ).html(); // add contents of <p> to result

    } else {
      r += this.outerHTML; // add the whole element to result
    }
  })

  return r;
}

实例.

还有一次更新

剥离所有顶级标签.

function stripTopLevelTags( html ) {
  var r = '';
  $( html ).each( function() {
    r += $( this ).unwrap().html();
  });
  return r;
}

实例