summernote修改回填：上传图片后再次生成一个编辑器（已解决）

最新推荐文章于 2021-07-16 11:22:07 发布
最新推荐文章于 2021-07-16 11:22:07 发布
阅读量193 收藏
点赞数
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cjymym/article/details/116491076
版权
博主在使用Thymeleaf模板引擎时遇到了一个问题，即在后台数据回填到表单后，上传图片操作会额外生成一个summernote编辑器。问题的关键在于使用`th:field`进行回填。通过阅读文章发现，解决方法是在回填时使用`th:value`，避免额外编辑器的生成。这个小细节给博主带来了困扰。
摘要由CSDN通过智能技术生成

我遇到的问题是，在修改回填后再次点击上传图片会额外生成一个summernote编辑器
在这里插入图片描述

我所使用的是模板引擎是thymeleaf
经过各种排查发现问题出在thymeleaf的回填
我这里是获取后台数据进行回填的，而后台返回的是一个对象所以表单就用了th:object来接收数据
用th:filed来回填数据
问题就出在th:filed
具体可以看一下这篇文章：https://www.cnblogs.com/sspox/p/13256344.html
回填的时候一定要用th:value，这样就不会出现额外生成一个编辑器
这个问题可把我恶心吐了

3的奇迹
关注
专栏目录
【编译原理笔记14】中间代码生成：布尔表达式的回填，控制流语句的回填，switch语句的翻译，过程调用语句的翻译
记录学习痕迹的公众号：Piper蛋窝
08-11 6911
中间代码生成的最后一节课(4/4/)。一共包含四课，内容如标题。
富文本编辑器summernote
06-28
富文本编辑器summernote，非常好用便捷的编辑器！！！
summernote编辑器修改回填
flame的博客
05-07 632
参考文章：https://ask.csdn.net/questions/325285 使用的模板引擎：thymeleaf 静态页自己用ajax读取数据信息后调用编辑器api赋值 $(’#summernote’).summernote(‘insertText’, ‘hello world’); 动态页直接读数据库输出到编辑器容器内部，然后再初始化。 也就是把数据库里的数据，追加到div里再进行summernote初始化，这样编辑器里就会有内容 html： <div class="form-group"&
summernote 图片上传 php,php – summernote图片上传和替代不工作
weixin_42160398的博客
03-25 173
我在我的网站上使用summernote编辑器,并使用他们网站here上提到的Click2edit方法实现了它.但是,如果按原样使用图像上载会导致各种问题.我的理解是这是使用一种叫做base64的东西.我尝试使用来自另一个stackoverflow答案[here]的代码将更直接的文件上传到服务器. (Summernote image upload)然而它似乎没有做任何事情,图像仍然插入原始方法.如果...
summernote 图片上传 php,summernote.js图片上传的使用
weixin_30388691的博客
03-25 384
这是一个常用的富文本编辑器而已，特别注意(本地图片上传后，图片的宽度会固定，建议编辑一下，否则自适应时手机版会变成)一、js部分$(document).ready(function () {$('.summernote').summernote({height: 300,lang: 'zh-CN', //如果开启中文，要导入中文插件focus: true,callbacks: {//图片上传onI...
summernote 图片上传 php,summernote富文本图片上传方法重写
weixin_42529328的博客
03-25 199
网上很多关于summernote 图片上传 重写的方法，就是因为有很多，所有有一些乱的，或者说比较复杂的。今天我写的这个，非常的简单，从js，到后台 处理的方法，都有。希望能给需要的人一些帮助js代码。$('#add_summernote').summernote({lang: 'zh-CN', // default: 'en-US'focus:true,onImageUpload: functi...
利用poi读取word模板文件，并回填逻辑数据，生成并导出需要的word文档源码。解决模板读取异常问题，提供wordUtils工具类（各种功能实现）
02-21
利用poi读取word模板文件，并回填逻辑数据，生成并导出需要的word文档源码。解决模板读取异常问题，提供wordUtils工具类（各种功能实现）
一个兼容IE且可以回填值的多文件上传插件
06-14
原始的EasyUpload是一个H5的上传插件，它的缺点是：1、不可以回填值；2、不兼容IE浏览器；3、不可以获取控件对象；经再次封装后，完美修复这些缺陷；回填值的方法: var arrImg = []; arrImg.push("文件路径"); $...
编译原理及实现技术：27.目标代码生成.ppt
09-20
对于循环结构，如while，四元式转化为目标代码时，会先记录当前指令地址，然后生成加载和跳转指令，并在遇到结束标志时回填跳转地址，形成一个完整的循环结构。 总的来说，目标代码生成是编译过程的关键步骤，它...
解决Element中el-date-picker组件不回填的情况
01-21
新建一个活动，需要定义活动的时间范围； 因此我们在新建活动的操作过程中需要选择一段时间区间以及活动名称等信息提交，新建完成； 网页上出现了新建好的活动，其他人想查看详细信息，打开页面，发现时间区间并没有...
Summernote实现图片上传功能的简单方法
09-02
下面小编就为大家带来一篇Summernote实现图片上传功能的简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
summernote 图片上传 php,summernote实现图片上传至服务器功能2
weixin_39926540的博客
03-25 217
先说说summernote吧，第一眼看到他是在网上一些后台模板中，简洁、漂亮、易用直接就吸引了我，再看看自己之前用的CKEditor，就略显的笨重了许多，于是就想着把CKEditor换成summernote。但是还有一个问题就是summernote在上传图片的时候，会把图片转成图片的base64数据，存储起来实在是太庞大了，处理起来也不太方便，想着将其上传到服务器存储，然后返回图片路径。下面是De...
PHP使用summernote编辑器
AlgoRain的博客
03-22 1501
PHP使用summernote编辑器 summernote是一个很好用的编辑器，简单大方，基本功能都有，我只记录使用图片上传接口和获取内容接口功能的演示，其他的功能暂时还没有用到，下面是summernote编辑器的样子 1.summernote界面的代码 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; ...
summernote 文本编辑器 图片上传
默然ii
07-16 402
以下示例代码 为laravel框架 blade 模板 写法 summernote官方文档： https://summernote.org/getting-started/#get-summernote 引入资源文件 <link href="you-path/summernote-0.8.18-dist/summernote.css" rel="stylesheet"> <script src="you-path/summernote-0.8.18-dist/summernote.min.j
summernote的使用，及单图片上传
sdiudui的博客
05-31 2332
summernote是一款不错的文本编辑器，楼主也是刚刚用，目前用到的就是文字和图片直接上代码了&lt;div id="summernote"&gt;&lt;/div&gt;这个是html代码,下面就是初始化和图片上传应用的代码//富文本编辑器初始化 $('#summernote').summernote({ height: 200,                 // set edito...
summernote编辑器数据回显
huangbaokang的博客
08-14 3885
<div class="summernote" style="height: 500px;"></div> $(function(){ $('.summernote').summernote({ height : '400px', lang : 'zh-CN', callbacks: { onImageUpl...
使用summernote编辑器上传图片，重写onImageUpload
weixin_30408675的博客
06-12 449
JS部分：$('.summernote').summernote({ height: 200,//高度 tabsize: 2,//页面上的summernote编辑框的个数 lang: 'zh-CN',//语言 callbacks:{//回调函数，重写onImageUpload方法 onImageUpload: function(files, editor, w...
summernote(富文本编辑器)将附件与图片上传到自己的服务器（vue项目）
weixin_33811961的博客
11-19 1251
1.上传图片至自己的服务器（这个官方都有例子，重点介绍附件上传）图片上传官方网址 // onChange callback $('#summernote').summernote({ callbacks: { onChange: function(contents, $editable) { console.log...
summernote文本编辑器实现（服务与服务之间）文件上传
yubangxin929的博客
07-27 774
summernote文本编辑器实现（服务与服务之间）文件上传 步骤1：搭建一个Spring Cloud         SpringCloud是一系列框架的有序集合。它利用SpringBoot的开发便利性巧妙地简化了分布式系统基础设施的开发，如服务发现注册、配置中心、消息总线、负载均衡、断路器...
同一个页面上多个上传图片的按钮,可以分别上传并返回url回填
最新发布
10-11
在同一页面上使用layui创建多个独立的图片上传按钮时，每个按钮都可以关联到各自的文件输入元素和上传配置。这样每个按钮点击后，都会触发对应的图片上传，并将上传成功的URL返回填充到对应的区域。 例如，假设你有...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值