xdxxdx
www.xdxxdxxdx.com

 

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

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

直接说怎么用。

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

 

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这个文件,主要是为了能让上传图片等功能生效,才需要配置这个文件。

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

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

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

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

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

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

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.我们来看看效果。

 

 

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

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

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

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

 

 这样就可以了。

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

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

 

posted on 2017-07-28 16:49  xdxxdx  阅读(14322)  评论(0编辑  收藏  举报