在java项目中加入百度富文本编辑器

时间：2023-03-08 17:04:58

富文本编辑器在项目中很常见，他可以将文本，图片等信息存入数据库，在编辑一些图文混排的信息的时候很有用，比如商城项目的商品详情页，包含很多带有样式的文字和图片。

此前一直使用的百度的富文本编辑器ueditor。

直接说怎么用。

1.首先去下载安装包，把它放在webapp下面，如下所示。至于如何下载，可自行百度。

在java项目中加入百度富文本编辑器

2.maven项目的话需要在pom.xml中加入如下语句，以导入所需要的包。

    <!-- 百度富文本 -->

        <dependency>

            <groupId>com.github.qiuxiaoj</groupId>

            <artifactId>ueditor</artifactId>

            <version>1.1.1</version>

        </dependency>

        <dependency>

            <groupId>org.json</groupId>

            <artifactId>json</artifactId>

            <version>20170516</version>

        </dependency>

如果不是maven项目则将安装包中jsp下的lib下的jar包拷入项目的lib下即可。

3.在页面中引入相关的js文件。

<!-- 百度编辑器 -->

<script type="text/javascript" charset="utf-8"

    src="./ueditor1_4_3/ueditor.config.js"></script>

<script type="text/javascript" charset="utf-8"

    src="./ueditor1_4_3/ueditor.all.js"></script>

<script type="text/javascript" charset="utf-8"

    src="./ueditor1_4_3/lang/zh-cn/zh-cn.js">

4.配置ueditor的相关文件，首先配置ueditor.config.js这个文件，主要是为了能让上传图片等功能生效，才需要配置这个文件。

在java项目中加入百度富文本编辑器

我截图了一部分，主要是注意截图这两个地方的配置，相信看了我的项目结构，大家都明白是怎么回事了。HOME_URL即是项目根目录+编辑器所在的根目录，serverUrl为HOME_URL下去寻找controller.jsp这个文件，此文件就相当于ueditor的一个controller，我们后台所要进行的所有操作，比如上传文件等，都是通过访问这个controller来实现的，所以一定要配置正确。

接下来是配置config.json这个文件，我主要是配置了图片上传的路径。如下所示。

在java项目中加入百度富文本编辑器

配置完以上两项后，在浏览器中键入如下地址来验证配置是否正确。

http://localhost:8080/warrior/ueditor1_4_3/jsp/controller.jsp?action=config

大概意思就是访问controller.jsp中action=config这个方法吧，这是ueditor封装好的后台代码，我们也看不到。如果配置成功，你会看到如下的返回值。

在java项目中加入百度富文本编辑器

大概的意思就是显示出了配置项的内容。如果你看到的不是上述内容，说明配置有误。

5.页面编写，以下页面是产品的编辑页，它把之前录入的内容回显，然后修改以后，再重新提交。我们只看与编辑器相关的部分。

首先是表单，代码如下。

    <tr>

                                <th>description：</th>

                                <td>

                                    <div id="dpeditor1" type="text/plain" name="description"

                                        style="width: 800px; height: 400px;"></div>

                                </td>

                            </tr>

                            <tr>

                                <th>Available In：</th>

                                <td>

                                    <div id="dpeditor2" type="text/plain" name="surface"

                                        style="width: 800px; height: 400px;"></div>

                                </td>

                            </tr>

然后是配置ueditor的工具栏并且赋值给表单，并且在加载完成后回显。

<script type="text/javascript">

    var ue_param = {//工具栏配置项

        toolbars : [ [ 'cleardoc', 'selectall', '|', 'undo', 'redo', '|',

                'bold', 'italic', 'underline', 'strikethrough', 'fontsize',

                'forecolor', 'fontfamily', 'link', '|', 'justifyleft',

                'justifycenter', 'justifyright', '|', 'horizontal',

                'pasteplain', '|', '|', 'removeformat', '|', 'charts','|','simpleupload' ]

        ],

        autoHeightEnabled : false,

        autoFloatEnabled : false,

        elementPathEnabled : false,

        relativePath : true,

        pasteplain : true,

        saveInterval : 60 * 60 * 24,

        wordCount : false,

    }

    var ue1 = UE.getEditor('dpeditor1', ue_param);

    ue1.ready(function() {

        var temp = $('.temp_n1').html();

        ue1.setContent(temp);//回显

    });

    var ue2 = UE.getEditor('dpeditor2', ue_param);

    ue2.ready(function() {

        var temp = $('.temp_n2').html();

        ue2.setContent(temp);//回显

    });

</script>

代码很简洁，需要注意的是回显我借助了两个临时表单，temp_n1和temp_n2，因为这边有两个富文本编辑器。

<div class="temp_n1" style="display: none">

            ${product.description}</div>

        <div class="temp_n2" style="display: none">${product.surface}</div>

6.我们来看看效果。

在java项目中加入百度富文本编辑器

这样就完成了ueditor配置，也能保证基本的图片上传功能。

PS：有时候我们部署项目的时候，是不希望显示项目名称的，我们希望直接访问域名即可，如本例中我们不希望显示warrior这个项目名，这时候ueditor图片上传的配置需要做相应的更改。

比如说对tomcat项目而言，我把war包解压后直接放入root文件夹下，此时就相当于不需要访问项目名warrior，直接访问http://192.168.1.185:8080/admin这样就可以进入到系统，而这时我们发现富文本编辑器的上传图片功能失效了。什么原因呢？

这是因为我们之前配置的ueditor.config.js和config.json路径是有项目名称的，而现在没有项目名称了，程序自然找不到。把这两个地方的项目名称去掉即可，如图。

在java项目中加入百度富文本编辑器

在java项目中加入百度富文本编辑器

这样就可以了。

PSS:如果有做负载均衡，希望从编辑器上传的图片都传到一个tomcat项目下以确保图片信息同步，则需在nginx的配置文件中添加如下配置项，这样，图片就都可以上传到http://xdxfile.com这个代理所在的服务上。

location ~ ^/ueditor1_4_3{
            proxy_pass http://xdxfile.com;
        }

相关文章