如何获取Froala编辑器所在DIV的带HTML属性的内容

你已经把Froala编辑器集成到页面里，想要点击按钮获取编辑器中包含HTML标签和属性的完整内容对吧？其实Froala官方提供了专门的API来搞定这个，比直接操作DOM靠谱多了，我帮你把代码补全并说明下：

完整实现代码 #

HTML 代码

<button>获取编辑器内容</button>
<div id="froala-editor-br">
  The editor can use <code>BR</code> tags. When ENTER key is hit, a <code>BR</code> tag is inserted.
</div>

JavaScript 代码

// 初始化Froala编辑器，保持你原来的换行设置
$('#froala-editor-br').froalaEditor({ 
  enter: $.FroalaEditor.ENTER_BR 
});

// 绑定按钮点击事件，获取带HTML的内容
$('button').click(function() {
  // 调用Froala的html.get()方法，这是官方推荐的获取HTML内容的方式
  var editorContent = $('#froala-editor-br').froalaEditor('html.get');
  
  // 这里可以按需处理内容，比如打印到控制台或者展示出来
  console.log("编辑器带HTML的内容：", editorContent);
  // 示例：弹出内容直观查看
  alert(editorContent);
});

关键说明 #

• 别用直接取DOM的$('#froala-editor-br').html()，因为Froala编辑器会把实际编辑内容放在内部的专用容器里，直接取外层div的HTML可能拿到编辑器的框架结构，而不是用户真正编辑的内容。
• html.get()方法会返回编辑器内的完整HTML结构，包括所有格式标签（比如你示例里的<code>、换行用的<br>）和对应的属性，完全符合你的需求。
• 如果之后需要获取纯文本内容，可以用text.get()方法，但你要的是带HTML属性的内容，html.get()就刚好匹配。

内容的提问来源于stack exchange，提问作者user2828442