如何获取 DIV 的值

Question

我在我的 HTML 页面上集成了 froala 编辑器。我需要获取我在

div

中写入的数据及其 HTML 属性。

下面是我的代码：

html

<button>
  click
</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>

js代码

$('div#froala-editor-br').froalaEditor({
  enter: $.FroalaEditor.ENTER_BR
});


    $("button").click(function(){
        var chk = $('#froala-editor-br').html();
alert(chk);
    });

这是工作jsfiddle

如果你按下

click

按钮，它正在获取 froala 代码，而不是我输入的代码。

Answer 1

只需用以下脚本替换您的代码。

 $("button").click(function(){
        var chk = $('#froala-editor-br').froalaEditor('html.get');
        alert(chk);
    });

这里是文档链接。

getHTML

Answer 2

只需要将按钮点击功能中的一行中的选择器更新为：

var chk = $('#froala-editor-br .fr-element').html();

---

ES6 更新

这是使用模板文字和

querySelector

的相同代码的 ES6 版本：

const chk = document.querySelector('#froala-editor-br .fr-element').innerHTML;

Answer 3

froala 编辑器动态添加自己的

div

s 并包装许多元素。如果您只想要生成的编辑器中的文本，则需要更改选择器。

所以，您的选择器应该是

$('#froala-editor-br .fr-view')

。

如：

$("button").click(function() {
  var chk = $('#froala-editor-br .fr-view').text();
  alert(chk);
});

如评论中所述，@Smit Raval 的回答使用 froala 编辑器的 API，使用它似乎是更好的选择。

Answer 4

纯JS代码

let button = document.querySelector("button");
let div = document.getElementById("froala-editor-br");
button.addEventListener("click", function(e){
    alert(div.innerHTML);
});