如何部署JSP版本的百度富文本编辑器（带图片上传功能）

博主之前因为公司项目需要部署百度的富文本编辑器到项目中，由于之前一直是后端开发，所以部署上还是费了一番心思的，网上也有很多教程但是用起来总会有各种问题，今天在这里记录一下以备今后的不时之需，也希望帮助到需要用到的人。
首先我们要去百度富文本编辑器的官网上下载源码：

百度编辑机器官网的超链接
我用的是JSP的，下载UTF-8版本就可以。

然后我们找到刚刚下载的文件，打开后可以看到如下的目录结构：

然后我们可以直接将这些文件全部复制到我们的项目中，我用的是springboot项目，所以就放到了resources下的static目录下面：

然后我们打开jsp文件夹下的lib文件夹将里面的jar包添加到自己的项目依赖中，具体怎么操作就不多赘述了，入门级的。
接下来就比较重要了，我们打开utf8-jsp下的ueditor.config.js文件，打开后界面如下：

这里面最重要的就是这行代码了，原来的代码好像指向的是它自带的controller.jsp，具体我也忘记了时间太久，这行代码的作用是读取百度编辑器的配置文件，而你的配置文件就在utf8-jsp/jsp/config.json，由于之前我部署的时候从controller.jsp跳转一直出问题，所以这里我就直接让他读取json文件了。
然后我们打开config.json文件，界面如图：

这里主要配置的是上传图片的配置项，重要的就是imageFieldName，这个和你上传图片的接口的参数名字一定要一致，比如你上传图片，后台接口接受这个文件的参数名是test，那么imageFieldName：“test”，这个是不可以写错的，否则上传会报错。接下来就是imageUrlPrefix了，这个是图片上传之后的图片回显的前缀，如果上传到云服务器，就写你访问图片的域名就可以了。
这样我们编辑器的配置就基本结束了，现在我们在前端进行调用。
首先我们引用js

项目路径配置的时候需要引用到自己文件夹下的js，和我的可能会不一样，注意自行修改。
然后我们在body中写一个用来显示编辑器的标签，如图：

就一行，非常简单，但是现在还没完，我们还需要写实例化编辑器的js，在项目最下面写一个在中间写方法：
图片上传的接口是我自己在后台已经写好的，这个也需要大家自己先写好，我的另一篇文章有介绍如何编写图片上传的接口。
springboot将图片上传至七牛云服务器（超详细）

在js方法中我们可以自定义编辑器的样式，具体可以参考官网给出的参数。
都配置完了后我们就可以启动项目，来看看我们的编辑器了

看一看，文字和图片插入与回显都没有问题了。别看代码没多少，对于没弄过的人来说还真有点难搞，不过成功之后的滋味还是非常不错的，那么本篇文章就写到这里，如果有不懂的地方或者发现本文有问题欢迎留言。

如何部署JSP版本的百度富文本编辑器（带图片上传功能）相关推荐

百度富文本编辑器ueditor支持上传mp3格式等音频文件的方法
百度富文本编辑器ueditor算得上比较强大的了,但是有一个比较令人难受的问题,就是不支持本地上传音频文件.ueditor自带的mp3功能是直接在百度音乐里面搜索加进去的,显而易见这个不是我们想要的, ...
Ueditor富文本编辑器修改图片上传路径
Ueditor富文本编辑器修改图片上传路径版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/QZPHP_L 由于网站后台使用Zend framewor ...
vue3中使用vue-quill富文本编辑器重写图片上传功能
最近开发的一个vue3+element-plus的项目,需要用到富文本编辑器,最终选择了VueQuill这一款轻便型的富文本编辑器. 说说遇到的问题:富文本编辑器的图片上传,默认是直接以base64图 ...
百度富文本编辑器UEditor 图片宽度100%自适应，手机端
有些时候富文本编辑器的图片在手机端显示超出,没有自动100% 修改ueditor.all.js的23774行(左右,不一定)和24533(左右,不一定),不行就搜索增加内容 loader.setAt ...
edui 富文本编辑_改造百度UMeditor(UEditor-min)富文本编辑器的图片上传功能
最近项目需要新增一个发布文章的模块,用的是百度的Ueditor富文本编辑器. 公司用的是阿里云的图片服务器,需要直接把文章中图片上传到服务器上,但是这个编辑器的上传图片是直接上传到Tomcat的根目录 ...
使用 SpringBoot + Ckeditor 富文本编辑器、图片上传
一.前言在一些页面中,进行发表文章.评论等功能,都要涉及到富文本编辑器, 如 CSDN 的 markdown 编辑器使用传统的 textarea 标签是远远满足不了需求的, 现在流行的富文本编辑 ...
关于移动手机端富文本编辑器qeditor图片上传改造
日前项目需要在移动端增加富文本编辑,上网找了下,大多数都是针对pc版的,不太兼容手机,当然由于手机屏幕小等原因也限制富文本编辑器的众多强大功能,所以要找的编辑器功能必须是精简的. 找了好久,发现qed ...
vue-quill-editor富文本编辑器及图片上传到服务器
最近在做后台管理平台,该项目是使用vue+element-ui框架,有一个界面就是关于消息推送的,在网上找了一圈,比较适合的就是vue-quill-editor富文本编辑器 1.需求完成图: 此项目就 ...
quill富文本编辑器自定义图片上传
github老哥的代码 const editor = new Quill('#quill-editor', {bounds: '#quill-editor',modules: {toolbar: th ...

如何部署JSP版本的百度富文本编辑器（带图片上传功能）

如何部署JSP版本的百度富文本编辑器（带图片上传功能）相关推荐

最新文章

热门文章