KindEditor中使用val()获取content内容后图片不显示

墨蓝 2023-10-18 19:16 1阅读 0赞

## 场景 ##

使用KindEditor进行图片上传后，在js部分通过.val()获取内容后，

所获取的图片的<imgsrc=""其中img标签与src连接在了一起导致图片不能显示。

错误的数据库存取内容：

0531<imgsrc="http://*******:9090/test/upload/commentFile/c366ef88-1af7-4164-b688-40c33909031d.jpg"alt=""/>

如果将img 与src之间加上一个空格则正常显示。

## 实现 ##

之前的代码

<textarea name="content" id="content" class="j-content" rows="30"
           cols="58" data-toggle="kindeditor" data-minheight="500"
           style="width: 100%">
                   
     </textarea>

然后在js中：

var content=$("#content").val();

通过.val()方法获取的内容中就是上面的img与src连在一起。

解决：

在页面再添加一个隐藏的textarea，用于中间转换一下，将转换的进行提交。

<dd class="rel border bor_gray_ddd pt_05em " >
                   <textarea name="content" id="content" class="j-content" rows="30"
           cols="58" data-toggle="kindeditor" data-minheight="500"
           style="width: 100%">
                   
                 </textarea>
                 <textarea rows="" cols="" name="schtmlnr" id="schtmlnr" style="display:none;"></textarea>
                </dd>

然后在js中：

var content1=$("#content").val();
         $("#schtmlnr").val(content1);
         var content = $("#schtmlnr").val();

发表评论取消回复

表情：

评论列表（有 0 条评论，1人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue打包后图片不显示问题

天给登录页面加了一个背景图，结果部署到服务器上后，发现图片不见了！！我本地是这样： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5...

旧城等待，/ 2024年04月18日 12:08/ 0 赞/ 144 阅读

相关编辑器上传图片后，使用v-html渲染图片显示不出来(若依编辑器上传图片后，获取接口数据后图片丢失)

编辑器大家都不陌生，使用编辑器上传的文件，获取的接口数据都是带着标签的文本内容返回给前端的，在使用v-html渲染文本内容时，文本内容可以正常显示，图片却显示不了（图片IP前

逃离我推掉我的手/ 2023年10月04日 20:59/ 0 赞/ 43 阅读

相关 06 jquery 获取元素的内容-html()-val()-text()

获取元素的内容作者：曾庆林 html()方法 `Html()`:获取匹配元素集合中第一个元素的HTML内容 `html(htmlstring)` 设置匹配元素

浅浅的花香味﹌/ 2022年12月08日 12:50/ 0 赞/ 210 阅读

相关关于kindEditor获取编辑内容dom节点

如果是获取编辑内容所有HTML代码，使用kindeditor.html()即可；最近项目中要求客户打印模块使用自定义功能，并且能保存模板，所以就想到了使

忘是亡心i/ 2022年09月23日 15:58/ 0 赞/ 362 阅读

相关 HttpClient获取响应内容类型Content-Type

HttpClient获取响应内容类型Content-Type 响应的网页内容都有类型也就是Content-Type 通过火狐firebug，我们看响应头信息：

梦里梦外;/ 2022年07月12日 05:20/ 0 赞/ 272 阅读

相关 HttpClient获取响应内容类型Content-Type

HttpClient获取响应内容类型Content-Type 响应的网页内容都有类型也就是Content-Type 通过火狐firebug，我们看响应头信息：

忘是亡心i/ 2022年07月12日 05:20/ 0 赞/ 281 阅读

相关 kindeditor保存图片路径

对于这个大家都不陌生，就是上传的文件或者图片保存的路径一般来说，大家都知道保存到项目目录下的文件夹中但是。。。。。。我这有一个特殊的需求，就是将

梦里梦外;/ 2022年07月12日 03:14/ 0 赞/ 272 阅读

相关苹果CMS采集资源后不显示图片

在采集资源结束之后，打开网站发现图片不能很好地显示出来，怎么解决呢？【我的站点：[蜜播影院][Link 1] [蜜播影院二][Link 2] [快看影院][Link 3]】

妖狐艹你老母/ 2022年04月15日 00:10/ 0 赞/ 426 阅读

相关 KindEditor图片上传

1返回Json的信息： //成功时 \{ "error" : 0, "url" : "http://www.example.com/path/to/file.ext"

朱雀/ 2022年04月12日 10:20/ 0 赞/ 278 阅读

相关后端返回图片地址，图片不显示的问题

接口返回的数据直接放到浏览器里就可以显示出图片，但是在项目里却显示不出来图一：返回的图片地址 ![watermark_type_ZmFuZ3poZW5naGVpdGk_s

分手后的思念是犯贱/ 2022年02月15日 00:23/ 0 赞/ 574 阅读