1.JSP-UEditor实现上传图片到项目外(SSM)

袅袅青烟散 2019-06-27

1.去官网下载jsp版本的UEditor http://ueditor.baidu.com/webs...(注意下载开发版,mini版可能会有坑,我这里下载的是1.4.3.3)
2.WebContent下新建一个文件夹ueditor,把下载下来解压的文件全部放到这个文件夹下

1.JSP-UEditor实现上传图片到项目外(SSM)

3.把jar包复制到WEB-INF下的lib下
4.在需要引入编辑器的页面引入js(路径自己找)

<script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/ueditor/ueditor.all.min.js"></script>
<script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/ueditor/ueditor.all.js"></script>
<script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/ueditor/lang/zh-cn/zh-cn.js"></script>

5.在body中引入编辑器及样式()

<textarea id="myEditor" name="content" style="width:900px;height:300px;">
                
</textarea>
<script type="text/javascript">
                var editor =UE.getEditor('myEditor', {
                    toolbars: [
                               ['redo','undo','bold','indent','italic','selectall','pasteplain','date',
                                'justifyleft','justifyright','justifycenter','justifyjustify','forecolor',
                                'directionalityltr','directionalityrtl','rowspacingtop','rowspacingbottom',
                                'lineheight']
                                ],
                    initialFrameHeight: 250,
                    initialFrameWeight: 80
                });

</script>

6.打开jsp/config.json文件
(1)imageUrlPrefix是图片访问路径前缀,ueditor会在每次访问图片时加上这个前缀;我在这里把他设为了本地的一个目录"/images"
(2)修改imagePathFormat,这里其实就是定义文件的名字,这里我写成了"/{yyyy}{mm}{dd}/{time}{rand:6}"
(3)添加localSavePathPrefix "localSavePathPrefix":"E:/images",
这个是我自己定义的一个参数,修改ueditor-1.1.2.jar中ConfigManager.class的getConfig(int
type)方法,添 加了一句:

rootPath = jsonConfig.getString("localSavePathPrefix");

不想自己反编译修改代码的话可以直接去这里下载jar包:https://download.csdn.net/dow...

1.JSP-UEditor实现上传图片到项目外(SSM)

7.controller层新建UEditorController.java,添加如下代码

@Controller
@RequestMapping("/ue")
public class UEditorController {
    @RequestMapping(value="/config")
    public void config(HttpServletRequest request, HttpServletResponse response) {
        response.setContentType("application/json");
        String rootPath = request.getSession()
                .getServletContext().getRealPath("/");
 
        try {
            String exec = new ActionEnter(request, rootPath).exec();
            PrintWriter writer = response.getWriter();
            writer.write(exec);
            writer.flush();
            writer.close();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}

然后图片就可以实现上传了:

1.JSP-UEditor实现上传图片到项目外(SSM)

8.这时你发现图片虽然能传上去但不能回显,这是因为默认的访问为http访问,可以在tomcat的server.xml中host间添加如下:

<Context
            path="/images" debug="0" docBase="E:/images/" reloadable="true" />

于是发现,帅气的卡卡出现了

1.JSP-UEditor实现上传图片到项目外(SSM)

相关推荐