当前位置 : 主页 > 编程语言 > java >

JSP实现嵌入富文本编辑器UEditor的配置

来源:互联网 收集:自由互联 发布时间:2021-06-25
最近在写数据库大作业——BBS论坛系统,其中发帖子内容时用到了UEditor,在此记录一下。UEditor是由百度WEB前端研发部开发的所见即所得的开源富文本编辑器,具有轻量、可定制、用户

最近在写数据库大作业——BBS论坛系统,其中发帖子内容时用到了UEditor,在此记录一下。UEditor是由百度WEB前端研发部开发的所见即所得的开源富文本编辑器,具有轻量、可定制、用户体验优秀等特点。开源基于BSD协议,所有源代码在协议允许范围内可自由修改和使用。百度UEditor的推出,可以帮助不少网站开发者在开发富文本编辑器所遇到的难题,节约开发者因开发富文本编辑器所需要的大量时间,有效降低了企业的开发成本。接下来,是关于在JSP页面中嵌入UEditor的配置。
1.首先,下载UEditor压缩包,网盘链接(永久有效):https://pan.baidu.com/s/1cbKUho,下载后解压为文件夹命名为ueditor。
2.将解压后的ueditor文件夹整个复制到Eclipse的web项目中的WebContent目录下。将/WebContent/ueditor/jsp/lib下的5个jar包复制到/WebContent/WEB-INF/lib中。在Eclipse的Project Explorer中右击项目名选择刷新。

3.在要嵌入UEditor的JSP页面的< head >< / head >代码中嵌入以下代码,引入UEditor文件,路径需自己调整

<script type="text/javascript" src="ueditor/ueditor.config.js"></script>  
<script type="text/javascript" src="ueditor/ueditor.all.js"></script>  
<link rel="stylesheet" href="ueditor/themes/default/css/ueditor.css"> 
<script type="text/javascript" charset="utf-8" src="ueditor/lang/zh-cn/zh-cn.js"></script>

4.添加textarea标签并实例化编辑器

<textarea id="container" name="text" placeholder="请输入帖子正文内容" style="width: 720px; height: 400px; margin: 0 auto;"></textarea> 

  <script type="text/javascript"> UE.getEditor("container"); </script>>

5.最后,在/ueditor/jsp/config.json中图片上传路径的配置

6.最后实现效果如下:

网友评论