现在位置首页 / 项目实战 /正文

前后端分离ueditor富文本编辑器的使用-Java版本(3)

作者: IT小兵 | 2017年12月28日| 热度:℃ | 评论: |参与:

接上篇[前后端分离ueditor富文本编辑器的使用-Java版本(2)]。

代码看附件。新建UEditorController.java文件,编写上传接口

其中:

if("config".equals(action)){ 
这段代码是用来判断是否是初始化上传的,因为在点击多图上传弹出上传窗口的时候,是会请求这个接口,经测试,如果没有该段判断,前端的上传是无法使用的。

   else if("uploadimage".equals(action) || "uploadvideo".equals(action) || "uploadfile".equals(action)){ 

   这一部分代码判断中, uploadimage,uploadvideo,uploadfile 这三个值,都是来自于conf.json文件中的配置,因此这一个接口既可以上传图片,也可以上传其他类型文件。

   另外接口返回的json字段,也是固定的。

 

3、前端部分

3.1、demo目录结构

 

在ueditor-demo目录下新建lib目录,然后从之前解压的jsp版本中,把dialogs、lang、themes、third-party四个文件夹和ueditor.all.min.js、ueditor.config.js、ueditor.parse.js、ueditor.parse.min.js四个js文件复制到lib目录下,并添加jQuery(用来执行ajax提交数据)

3.2、文件修改

1、修改ueditor.config.js

修改服务器统一请求接口路径 - serverUrl属性的值修改为后台上传文件的接口地址

 

2、修改dialogs/image/image.js、dialogs/video/video.js、dialogs/attachment/attachment.js三个文件

 这三个文件分别对应图片上传、视频上传、附件上传,主要是要去掉默认设置的请求头(可以直接在这三个js文件中删掉该段代码),否则无法上传文件

   2.1、dialogs/image/image.js大概在706行

        

   2.2、dialogs/video/video.js大概在719行

        

   2.3、dialogs/attachment/attachment.js大概在488行

        

 

3.3、index.html

在页面中需要引入ueditor.config.js、ueditor.all.min.js和zh-cn.js

在body元素中写一个script元素,给一个id,这里为editor,并设置type="text/plain",这个id主要是通过它来初始化ueditor实例的。

初始化的方式是在通过 UE.getEditor('script标签id', {})

这里有两个参数,第一个参数是script标签的id值,第二个参数是一个对象,可以用来设置ueditor编辑框的宽高等属性,这里只设置了宽高。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ueditor-demo</title>
    <script src="/lib/jquery.min.js"></script>
    <script src="/lib/ueditor/ueditor.config.js"></script>
    <script src="/lib/ueditor/ueditor.all.min.js"></script>
    <script src="/lib/ueditor/lang/zh-cn/zh-cn.js"></script>
    <style>
        #submit {
            width: 100px;
            height: 30px;
            line-height: 30px;
            font-size: 16px;
        }
    </style>
</head>
<body>
<h2>ueditor测试使用</h2>
<script id="editor" type="text/plain"></script>
<div style="margin-top: 20px; text-align: center;">
    <input type="button" class="btn btn-blue w-100" value="提 交" id="submit">
</div>
<script>
    $(function () {
        //实例化编辑器
        var ue = UE.getEditor('editor',{
            initialFrameWidth:"100%",   //初始化宽度
            initialFrameHeight:400,     //初始化高度
        });
        $('#submit').click(function () {
            //获取ueditor编辑框中的html文本内容
            var content = UE.getEditor('editor').getContent();
            $.ajax({
                url: 'http://172.16.4.160:8081/ssm_project/news/addNews.do',
                type: 'POST',
                data: {
                    content: content,
                },
                dataType: 'json',
                success: function (res) {
                    console.log(res);
                },
                error: function () {
                    console.log(res);
                }
            })
        })
    })
</script>
</body>
</html>

UE.getEditor('editor').getContent()方法就可以获取到编辑框中的html文本,然后调用添加接口,就可以把html格式的文本保存到数据库中了。

此时就可以在服务环境下访问该index.html页面,即可看到ueditor富文本编辑框,并进行上传文件并保存到数据库中。

 

4、效果

 

 

 

注意:在测试之前,需要先启动文件服务器——另外一个Tomcat服务器 ,至于关于这一块的介绍,请参考11月2号的一篇博客:前后端分离跨服务器文件上传-Java SpringMVC版

 

备注:由于这里是前后端分离的,涉及到跨域的问题,所以也在网上也查了很多资料,自己也尝试了很多次,都没法实现单图上传,因此这里就在ueditor.config.js中,把单图上传给去掉了。

由于本人是做web前端开发的,只是最近在学学java,因此项目或者demo中都有很多不足之处。如若大家有建议,欢迎在评论区提出。


点击阅读本文所属分类的更多文章: 项目实战 。和高手一起交流:346717337

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询