如何使用jQuery在summernote编辑器中输入内容？

Posted 2023-03-22

【中文标题】如何使用jQuery在summernote编辑器中输入内容？

【英文标题】：How to get entered content in summernote editor using jQuery?

【发布时间】：2020-04-14 15:26:27

【问题描述】：

我使用了 Summernote 编辑器。我可以获取编辑器，但无法获取在编辑器中输入的数据。

我已按照this url 中的说明进行操作，但单击按钮时无法在编辑器中获取输入的数据。谁可以帮我这个事？谢谢

$('#summernote').summernote(
  tabsize: 2,
  height: 100
);

$("#test").click(function() 
  var markupStr = $('#summernote').summernote('code');
  alert(markupStr);
);

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote-bs4.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote-bs4.js"></script>
<div id="summernote"></div>
<div> <button id="test">click</button> </div>

【问题讨论】：

在这里工作正常

我将您的代码放入一个可执行的 sn-p 中，它似乎可以正常工作。检查您的控制台是否有错误，并确保您在 DOM 加载之后运行 jQuery 代码，即。在 document.ready 事件处理程序中

【参考方案1】：

像这样添加代码

$(document).ready(function() 
 $('#summernote').summernote(
  tabsize: 2,
  height: 100
);

$("#test").click(function() 
  var markupStr = $('#summernote').summernote('code');
  alert(markupStr);
);
);

【讨论】：

你把所有的js都加到head标签里了吗？您可以在问题中添加整个 html 吗？