参考文章:https://ask.csdn.net/questions/325285
使用的模板引擎:thymeleaf
静态页自己用ajax读取数据信息后调用编辑器api赋值
$(’#summernote’).summernote(‘insertText’, ‘hello world’);
动态页直接读数据库输出到编辑器容器内部,然后再初始化。
也就是把数据库里的数据,追加到div里再进行summernote初始化,这样编辑器里就会有内容
html:
<div class="form-group">
<label class="col-sm-2 control-label">测试:</label>
<div class="col-sm-9">
<input type="hidden" class="form-control" th:value="*{countryAdvantage}"
name="countryAdvantage">
<div class="summernote" id="countryAdvantage" th:utext="*{countryAdvantage}"></div>
</div>
</div>
JavaScript:
$('.summernote').summernote({
lang: 'zh-CN',
height: 297,
toolbar: [
['style', ['style']],
['font', ['bold', 'italic', 'underline', 'strikethrough', 'clear']],
['fontname', ['fontname']],
['fontsize', ['fontsize']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['table', ['table']],
['insert', ['link', 'picture', 'hr']],
['view', ['codeview', 'help']],
],
placeholder: '请输入内容',
callbacks: {
// 当编辑器里的内容发生改变时赋值给隐藏的input,当提交时直接提交隐藏的input
onChange: function (contents, $edittable) {
$("input[name='" + this.id + "']").val(contents);
},
// 图片上传
onImageUpload: function (files) {
var obj = this;
var data = new FormData();
data.append("file", files[0]);
$.ajax({
type: "post",
url: prefix + "/upload",
data: data,
cache: false,
contentType: false,
processData: false,
dataType: 'json',
success: function (result) {
if (result.code == web_status.SUCCESS) {
$('#' + obj.id).summernote('insertImage', result.url);
} else {
$.modal.alertError(result.msg);
}
},
error: function (error) {
$.modal.alertWarning("图片上传失败。");
}
});
}
}
});