ckeditor富文本编辑器上传图片的具体步骤

最新推荐文章于 2025-03-31 11:39:28 发布

浅笑临轩

最新推荐文章于 2025-03-31 11:39:28 发布

阅读量1k

点赞数

分类专栏：富文本编辑器ckeditor 文章标签： ckeditor 富文本编辑器上传图片 ckeditor上传图片

本文链接：https://blog.youkuaiyun.com/qq_34075464/article/details/84879829

版权

这篇博客详细介绍了如何在CKEditor富文本编辑器中上传图片，包括引入CKEditor的JS，处理上传图片的Controller，以及解决上传后保存时出现的非法字符问题。在保存内容时，由于JSON.stringify()导致的反斜杠问题需要通过replace()方法替换，并可能需要对特殊字符进行编码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ckeditor相关配置和应用可以参考：https://blog.youkuaiyun.com/sayoko06/article/details/81450441

第一步：引入ckeditor的js

<td>
    <textarea name="description" id="description"/></textarea>
</td>

<!-- 富文本编辑器 -->
<script th:src="@{/plugins/ckeditor/ckeditor.js}"></script>
<script type="text/javascript">
    window.onload = function(){
        	CKEDITOR.replace( 'description',{
			filebrowserImageUploadUrl : '/xxx/uploadimg',//点击上传文件
			uploadUrl : '/xxx/uploadimg',//粘贴图片上传
			language : 'zh-cn'
		});
    };
</script>