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>

（在本例中，我不希望包含段落标签）

我可以创建一个简短的函数来为我处理这个问题，但对于我从 Froala 获取字符串的方式，我似乎遗漏了一些非常明显的东西。

非常感谢您的帮助！

Answer 1

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

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

然后去掉 HTML 标签，如果我没听错的话。最简单的方法是jQuery .text() method：

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;
}

Live example.

另一个更新

剥离所有顶级标签。

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

Live example