副文本编辑器 KindEditor 实现图片上传到腾讯云对象存储 COS

最新推荐文章于 2024-05-13 18:48:21 发布

程序东

最新推荐文章于 2024-05-13 18:48:21 发布

阅读量1.4k

点赞数

分类专栏： Java Web

本文链接：https://blog.csdn.net/weidong_y/article/details/82703620

版权

一、主要功能实现

1、配置 KindEditor

2、在 KindEditor 中实现图片上传

3、将图片上传到腾讯对象存储 COS 上

二、效果图

三、需要导入的包

<!-- JSONObject 需要导入的包 -->
<dependency>
    <groupId>org.apache.clerezza.ext</groupId>
    <artifactId>org.json.simple</artifactId>
    <version>0.4</version>
</dependency>

<!-- 文件上传 -->
<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.3.2</version>
</dependency>

<!-- 腾讯云COS 需要依赖的 jar 包 -->
<dependency>
    <groupId>com.qcloud</groupId>
    <artifactId>cos_api</artifactId>
    <version>5.2.4</version>
</dependency>

四、前端编程

在编写代码之前，我们需要在 index.jsp 中先引入一些 kindeditor 自己封装好的 js 文件，同时还要引入 jquery.js 文件。这些文件我放项目工程中，可以从 github 上下载项目源码后，从里面复制出来，具体位置如下图，在 webapp 下面。github 下载地址在博客最后给出。

引入的 css 和 js 文件：（注意根据自己的实际存放路径修改）

<link rel="stylesheet" href="${pageContext.request.contextPath}/static/kindeditor/themes/default/default.css" />
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/kindeditor/plugins/code/prettify.css" />
<script charset="utf-8" src="${pageContext.request.contextPath}/static/kindeditor/kindeditor-all.js"></script>
<script charset="utf-8" src="${pageContext.request.contextPath}/static/kindeditor/lang/zh-CN.js"></script>
<script charset="utf-8" src="${pageContext.request.contextPath}/static/kindeditor/plugins/code/prettify.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery.js"></script>

body 的内容：（js 代码中的 cssPath 参数值也需要根据实际的路径进行修改）

<body>
<form method="post" action="upload" name="myform" enctype

最低0.47元/天解锁文章

程序东

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
副文本编辑器 KindEditor 实现图片上传到腾讯云对象存储 COS

目录一、主要功能实现二、效果图三、需要导入的包四、前端编程五、后台编程六、github 下载附加内容：一、主要功能实现1、配置 KindEditor 2、在 KindEditor 中实现图片上传3、将图片上传到腾讯对象存储 COS 上二、效果图三、需要导入的包&lt;!-- JSONObject 需要导入的包 --&gt;&lt...
复制链接

扫一扫

专栏目录