Froala

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

Froala - 获得 HTML

Froala - get HTML

html

javascript