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()方法

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

实例化