1.JSP-UEditor實現上傳圖片到項目外(SSM)

1.去官網下載jsp版本的UEditor http://ueditor.baidu.com/webs...(注意下載開發版,mini版可能會有坑,我這裏下載的是1.4.3.3)
2.WebContent下新建一個文件夾ueditor,把下載下來解壓的文件所有放到這個文件夾下javascript

clipboard.png

3.把jar包複製到WEB-INF下的lib下
4.在須要引入編輯器的頁面引入js(路徑本身找)html

<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中引入編輯器及樣式()java

<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)方法,添 加了一句:web

rootPath = jsonConfig.getString("localSavePathPrefix");

不想本身反編譯修改代碼的話能夠直接去這裏下載jar包:https://download.csdn.net/dow...json

clipboard.png

7.controller層新建UEditorController.java,添加以下代碼tomcat

@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();
        }
    }
}

而後圖片就能夠實現上傳了:app

clipboard.png

8.這時你發現圖片雖然能傳上去但不能回顯,這是由於默認的訪問爲http訪問,能夠在tomcat的server.xml中host間添加以下:jsp

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

因而發現,帥氣的卡卡出現了編輯器

clipboard.png

相關文章
相關標籤/搜索