summernote编辑器修改回填

参考文章: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("图片上传失败。");
                 }
             });
         }
     }
 });
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值