wangEditor富文本编辑器集成七牛云做图片上传 — 实现单页面初始化多个编辑器

最新推荐文章于 2023-12-07 11:09:23 发布

superSubfn

最新推荐文章于 2023-12-07 11:09:23 发布

阅读量966

点赞数

分类专栏：前端文章标签：富文本编辑器 wangEditor 七牛云图片上传

本文链接：https://blog.csdn.net/superSubfn/article/details/103744818

版权

该博客介绍了如何在单页面应用中集成wangEditor富文本编辑器，并结合七牛云服务进行图片上传。适用于博客、新闻等内容编辑场景。文中详细提供了前端和后端的代码示例，包括编辑器初始化、七牛云token获取以及上传功能的实现。

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

一.适用场景

博客、新闻等需要特殊排版的效果展示界面

二.准备

jQuery文件：https://jquery.com/download/
七牛云js文件：https://developer.qiniu.com/kodo/sdk/1283/javascript
plupload文件：https://www.plupload.com/download/
wangEditor文件包：http://www.wangeditor.com/
七牛云个人服务器地址

三.效果原型

四.代码示例

1.前端代码

引用库文件：

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/qiniu.min.js"></script>
<script type="text/javascript" src="plupload/plupload.full.min.js"></script>
<script type="text/javascript" src="wangEditor/release/wangEditor.min.js"></script>

创建DIV作为初始化编辑器的容器：

<div id="firstEditor"></div>
<br />
<div id="secondEditor"></div>

页面加载初始化编辑器：

$(function(){
    initEditor('firstEditor','firstBtn','这是一个标题','min');
    initEditor('secondEditor','secondBtn','这是一个内容','max');
})

初始化富文本编辑器：

/*
* 初始化富文

最低0.47元/天解锁文章