UEdiotr(JSP)——学习笔记

在官网上下载最新的UEditor压缩包,官网下载地址:http://ueditor.baidu.com/website/download.html

在解压后的文件夹中找到下图中相同的文件并添加到项目中:

       其中.java文件在:ueditor-1.4.3.3\jsp\src\com\baidu\ueditor

       fileUpload.js、ueditor.all.min.js在下载的压缩包里没有

添加好所有文件后,需要配置ueditor.config.js文件里的serverUrl属性:

serverUrl: URL + "jsp/controller.jsp"

如果在添加.java文件时出现这两个包报错,是因为缺少了jar包:

import org.json.JSONArray;
import org.json.JSONObject; 

解决方法:

在pom.xml中添加如下代码,让maven下载其依赖包即可:

        <!-- JSON -->
        <dependency>
            <groupId>org.json</groupId>
            <artifactId>json</artifactId>
            <version>20180130</version>
        </dependency>

在jsp中如何使用ueditor ?

 在需要使用的jsp中引用UEditor的js

<table class="formTable">
    <tr>
        <td>内容:</td>
        <td>
            <textarea style="display: none" name="content" id="content">${aboutUs.content }</textarea>
        </td>
        <td name="uecontent" id="uecontent"></td>
    </tr>
</table>

<script type="text/javascript" src="URL/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="URL/ueditor/ueditor.all.min.js"></script>

<script type="text/javascript">
    UE.delEditor("uecontent");
    var  editUE = UE.getEditor('uecontent', {
        autoHeight: true,
        initialFrameWidth: '100%'
    });
    editUE.addListener("ready", function () {
        editUE.setContent('${aboutUs.content}');
    });

</script>

 使用UEditor时遇到的问题:

jQuery easyUI 与 UEditor整合的时候覆盖的问题,如图

解决方法:在方法里添加如下几行代码即可

        onOpen:function(){
            $(".window").css("z-index","499");
            $(".window-shadow").css("z-index","498");
        },
        onMove:function(left,top){
            $(".window").css("z-index","499");
            $(".window-shadow").css("z-index","498");
        },
        onResize:function(width,height){
            $(".window").css("z-index","499");
            $(".window-shadow").css("z-index","498");
        },

示例: 

function createContent(){
    d=$("#dlg").dialog({   
        title: '添加内容',    
        width: 600,    
        height: 500,    
        href:'',
        maximizable:true,
        modal:false,
        onOpen:function(){
            $(".window").css("z-index","499");
            $(".window-shadow").css("z-index","498");
        },
        onMove:function(left,top){
            $(".window").css("z-index","499");
            $(".window-shadow").css("z-index","498");
        },
        onResize:function(width,height){
            $(".window").css("z-index","499");
            $(".window-shadow").css("z-index","498");
        },
        buttons:[{
            text:'确认',
            handler:function(){
                $("#mainform").submit(); 
            }
        },{
            text:'取消',
            handler:function(){
                    d.panel('close');
                }
        }]
    });
}

 效果如图:

 上传图片并显示图片:

解决方法:

1、先检查ueditor.config.js文件中的serverUrl是否在自己目录的对应位置,Controller.jsp文件在下载的ueditor解压后的位置是:ueditor/jsp/:

serverUrl: URL + "jsp/controller.jsp"

2、配置图片访问路径前缀和上传保存路径。

为了能够让图片在编辑器里面显示,我们还需要配置图片访问路径前缀和上传保存路径。

1)打开ueditor/jsp文件夹下面的config.json文件,需要修改的属性有:

/* 假设项目名称为:LeeSystem */
/* 上传图片配置项 */
"imageUrlPrefix": "/LeeSystem", /* 图片访问路径前缀 */
"imagePathFormat": "/upload/images/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */

/* 涂鸦图片上传配置项 */
"scrawlPathFormat": "/upload/images/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
"scrawlUrlPrefix": "/LeeSystem", /* 图片访问路径前缀 */

/* 截图工具上传 */
"snapscreenPathFormat": "/upload/images/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
"snapscreenUrlPrefix": "/LeeSystem", /* 图片访问路径前缀 */

/* 抓取远程图片配置 */
"catcherPathFormat": "/upload/images/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
"catcherUrlPrefix": "/LeeSystem", /* 图片访问路径前缀 */

/* 上传视频配置 */
 "videoPathFormat": "/upload/video/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
"videoUrlPrefix": "/LeeSystem", /* 视频访问路径前缀 */

/* 上传文件配置 */
"filePathFormat": "/upload/file/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */
"fileUrlPrefix": "/LeeSystem", /* 文件访问路径前缀 */

 /* 列出指定目录下的图片 */
"imageManagerListPath": "/upload/image/", /* 指定要列出图片的目录 */
"imageManagerUrlPrefix": "/LeeSystem", /* 图片访问路径前缀 */

 /* 列出指定目录下的文件 */
 "fileManagerListPath": "/upload/file/", /* 指定要列出文件的目录 */
 "fileManagerUrlPrefix": "/LeeSystem", /* 文件访问路径前缀 */

修改完这些配置信息时,照片就可以显示出来了,如图:

猜你喜欢

转载自blog.csdn.net/qq_36023682/article/details/81112535