Summernote 的默认文本区域名称是啥？

Posted 2023-03-22

【中文标题】Summernote 的默认文本区域名称是啥？

【英文标题】：What is the default textarea name for Summernote?Summernote 的默认文本区域名称是什么？

【发布时间】：2015-05-12 12:00:37

【问题描述】：

有人可以帮助我使用 Summernote 的默认 textarea 名称值吗？编辑器在页面上看起来是正确的（我可以使用界面修改文本）但根据我的理解 POST 不起作用。

我尝试了各种 POST 变量，但似乎没有一个是正确的。例如summernote、note-codable 和text-area。最后两个来自summernote.js。 Jquery 不是我有很多经验的东西，所以请帮帮我。

这些是我正在使用的。

 $('#summernote').summernote(height: 300);
 var shtml = $('#summernote').code();

和

 <div name="summernote" id="summernote"><?php echo $news_body; ?></div>

我还分别尝试了以下几行，试图将 textarea 名称更改为content：

var sHTML = $('#summernote').code(); 
$('#summernote').code();
var content = $('textarea[name="content"]').html($('#summernote').code());
$('textarea[name="content"]').html($('#summernote').code());
var sHTML =  $('textarea[name="content"]').html($('#summernote').code());
var textareaValue = $("#content").code();
$("summernote").code(html);

【问题讨论】：

这被证明是一个非常简单的修复。混乱的根源是说使用 div 的文档。只需使用文本区域即可。尽管summernote 会动态创建文本区域，但无论如何都要这样做。它会起作用的。

【参考方案1】：

我找到了一个使用 Summernote 和 php 执行表单 POST here 的工作示例。

这有点令人费解，所以我将解释发生了什么。

首先，您需要添加一个 textarea 作为帖子内容的容器。在示例中，有一个名为“内容”。 textarea 兼作 Summernote 编辑器的容器，但您可以轻松地使用隐藏的 textarea，并为 summernote 容器使用 div。

要将数据从summernote 获取到textarea，您需要在POST 时调用summernote 元素上的.code() 函数。该示例通过将 onsubmit 处理程序设置为查找 summernote 元素、获取编码输入并将编码字符串设置为 textarea 的 html 的函数（在示例中名为“postForm”）来实现此目的。

【参考方案2】：

结果证明这是一个非常简单的解决方法。混乱的根源是说使用 div 的文档。只需使用文本区域即可。尽管summernote 会动态创建文本区域，但无论如何都要这样做。它会起作用的。

【讨论】：

不幸的是，这会导致其他问题。例如，当您使用 textarea 时，<sometext> 会自动转换为 <sometext>。 （使用div 时可以正常工作）

jsfiddle --- issue on github

@Skeets 我想知道新版本的 Summernote 是否改变了这一点？

是的，因为 div 令人困惑，但我还有另一个困惑或问题，这给我带来了问题。我想在从 jquery 表收到的编辑表单上显示数据，所有内容都在编辑表单上，但如何在 Summernote 框中显示 textarea 内容。

【参考方案3】：

试试这个：

var sHTML = $('.summernote').summernote('code')

【讨论】：

虽然这可能会回答这个问题，但最好解释一下答案的基本部分，以及 OPs 代码可能存在什么问题。

【参考方案4】：

Summernote 在初始化时会构建它自己的 DOM 区域，即使您使用 <textarea>，它的标记也会使用带有 contentEditable 属性的 <div> 用于可编辑区域，顺便说一句，它的类是 note-editable。

如果您还没有，我强烈建议您查看https://summernote.org/deep-dive/ 页面，了解可用的 API 函数选项。