Summernote 未在 Bootstrap 模式上发布
Posted
技术标签:
【中文标题】Summernote 未在 Bootstrap 模式上发布【英文标题】：Summernote Not Posting on Bootstrap Modal 【发布时间】：2016-09-18 06:23:14 【问题描述】：我在 Bootstrap 模式上使用summernote 编辑器，POST 方法存在问题。 Summernote 编辑器的内容未发布。一切看起来都很好，但是当我尝试发布它时，我得到了这个输出（print_r）：
数组 ( [title] => 测试标题 [category] => 3 [content] => [files] => )
您可以在下面找到我的 html：
<form action="myposturl.php" method="POST" >
<div class="modal-body">
<div class="form-group">
<div class="row">
<div class="col-sm-6">
<label>Title</label>
<input name="title" class="form-control" />
</div>
<div class="col-sm-6">
<label>Category</label>
<select class="form-control" name="category">
<option value="">Please select</option>
<option value="1">Design</option>
<option value="2">Code</option>
<option value="3">Something else</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-12">
<input class="summernote" name="content" />
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Send</button>
</div>
</form>
提前致谢。
【问题讨论】：
将 textarea 用于summernote。 【参考方案1】：summernote 使用 div 或 textarea。像这样的最小实现：
http://summernote.org/getting-started/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Summernote</title>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.1/summernote.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.1/summernote.js"></script>
</head>
<body>
<div id="summernote"><p>Hello Summernote</p></div>
<script>
$(document).ready(function()
$('#summernote').summernote();
);
</script>
</body>
</html>
【讨论】：
【参考方案2】：您可以使用文本区域或输入字段。只需要应用 onchange 监听器。
<textarea class="summernote" name="content"></textarea>
如果是文本区域：
$('.summernote').summernote(
height: 300
).on('summernote.change', function(we, contents, $editable)
$(this).html(contents);
);
如果是输入字段：
$('.summernote').summernote(
height: 300
).on('summernote.change', function(we, contents, $editable)
$(this).val(contents);
);
【讨论】：
以上是关于Summernote 未在 Bootstrap 模式上发布的主要内容，如果未能解决你的问题，请参考以下文章
如何将 Bootstrap 4 添加到库 django-summernote？
Summernote 模态锁定在纯 Bootstrap 模态中
从 SummerNote WYSIWYG Bootstrap 生成的图像损坏