使用Ueditor上傳圖片到圖片服務器（一）

網站的文章，經過運營平臺來發布文章（圖文消息），上傳圖片等。百度Ueditor比較成熟就採用了該技術，另外上傳的圖片是網站系統以及運營平臺系統共享的，因此考慮搭建獨立的圖片服務器，之後也能夠提供給公司其餘服務使用，當作單獨的文件服務器。javascript

一、Ueditor接入

關於Ueditor的接入，資料不少，我主要參考了：http://blog.csdn.net/Amayadream/article/details/47285209等博客，官網：http://fex.baidu.com/ueditor/。css

（1）：添加pom依賴前端

<!-- Ueditor begins -->
        <dependency>
            <groupId>commons-codec</groupId>
            <artifactId>commons-codec</artifactId>
            <version>${version.commons-codec}</version>
        </dependency>
        <dependency>
            <groupId>commons-fileupload</groupId>
            <artifactId>commons-fileupload</artifactId>
            <version>${version.commons-fileupload}</version>
        </dependency>
        <dependency>
            <groupId>org.json</groupId>
            <artifactId>json</artifactId>
            <version>${version.json}</version>
        </dependency>
<dependency>
            <groupId>commons-io</groupId>
            <artifactId>commons-io</artifactId>
            <version>${commons-io.version}</version>
        </dependency>
        <!-- Ueditor ends -->

並無引入ueditor的jar包，而是在源碼的基礎上進行了二次開發，有須要的能夠找我要（連接：https://pan.baidu.com/s/1kXb17gz 密碼：joom）。全部ueditor的統一入口Controller接口：java

/** * ueditor編輯器 */ @RequestMapping("ueditor") public ResponseEntity<String> ueditor(HttpServletRequest request) { HttpHeaders headers = new HttpHeaders(); headers.setContentType(MediaType.TEXT_HTML); String json = ueditorService.exec(request); return new ResponseEntity<String>(json, headers, HttpStatus.OK); }

具體看我提供的連接裏的代碼。json

（2）將ueditor的靜態代碼js/css等放到項目裏，須要配置的地方：服務器

ueditor.config.json——配置各類圖片、文件路徑名稱，遠程上傳的話須要配置如下：app

ftp上傳部分的代碼，在我提供的包裏，我提供的代碼改一下相應的包名，能夠直接使用。接下來的文章會講解包裏的部分代碼。編輯器

imageUrlPrefix能夠配置圖片服務器的地址，若是是本地的話爲空。Ueditor是自動將imageUrlPrefix+imagePathFormat做爲完整的圖片地址來使用的。ide

（3）配置：網站

設置window.UEDITOR_HOME_URL

設置後臺請求URL，全部Ueditor的統一請求地址，請求到我上邊提到的Controller的統一入口，不一樣的請求包括：imageUpload/config等等。該配置是ueditor.config.js：

二、textArea嵌入編輯器：

引入js文件：

<!-- 配置文件 -->
<script type="text/javascript" src="${staticPath }/static/ueditor/ueditor.config.js"></script>
<!-- 編輯器源碼文件 -->
<script type="text/javascript" src="${staticPath }/static/ueditor/ueditor.all.js"></script>
<!-- 實例化編輯器 -->
<script type="text/javascript"> var jobRequirementUe = UE.getEditor('jobRequirement', { autoHeightEnabled : true, autoFloatEnabled : true }); var jobResponsibilityUe = UE.getEditor('jobResponsibility', { autoHeightEnabled : true, autoFloatEnabled : true }); </script>

View Code

textArea部分：

<td>
                        <!-- 加載編輯器的容器 --> <textArea id="newsContent" name='newsContent' style="width: 100%; height: 100%;">${newsCenter.newsContent}</textArea>
                    </td>

View Code

至此，該編輯器能夠正常使用，能夠寫文字，文章中嵌入圖片。圖片會上傳至遠程服務器，圖片地址是ueditor自動拼接：imageUrlPrefix+imagePathFormat，我是把整篇文章的內容（getContent方法），包括樣式，圖片地址存入數據一個text字段。網站的前端能夠直接拿來展現。

三、Ueditor單獨上傳圖片功能：

Ueditor沒有提供單獨上傳圖片的功能，可是編輯器中有上傳圖片的功能，能夠基於此，稍稍加點內容就能夠實現了：

JS代碼以及HTML部分代碼：

<!-- 配置文件 -->
<script type="text/javascript" src="${staticPath }/static/ueditor/ueditor.config.js"></script>
<!-- 編輯器源碼文件 -->
<script type="text/javascript" src="${staticPath }/static/ueditor/ueditor.all.js"></script>
<!-- 實例化編輯器 -->
<script type="text/javascript"> var uploadImageUe = UE.getEditor("uploadImage", { initialFrameWidth : 800, initialFrameHeight : 300, }); uploadImageUe.ready(function() { //設置編輯器不可用(事實上不能夠設置不可用...因此註釋掉,以觀後效) //_editor.setDisabled(); //隱藏編輯器,由於只使用上傳功能
 uploadImageUe.hide(); //偵聽圖片上傳
        uploadImageUe.addListener('beforeInsertImage', function(t, arg) { //將圖片地址賦給input
            $("#pictureHref").attr("value", arg[0].src); //將圖片地址賦給img的src,實現預覽
            $("#showImage").attr("src", arg[0].src); }); }); //上傳dialog
 function upImage() { var myImage = uploadImageUe.getDialog("insertimage"); myImage.open(); } </script>

View Code

<tr>
                    <td>新聞配圖</td>
                    <td><input type="text" id="pictureHref" name="pictureHref" style="width: 100%;" value="${newsCenter.pictureHref}"></td>
                    <td><a href="javascript:void(0)" onclick="upImage()">上傳圖片</a></td>
                    <td><img id="showImage" src="${newsCenter.pictureHref}" style="width: 120px; height: 100px;"> <!-- 定義一個新編輯器,可是會隱藏它,由於只會用到圖片上傳 -->
                        <textarea id="uploadImage"></textarea></td>
                </tr>

View Code

image.js中作以下修改，找截圖部分位置，加一句：

至此，就能夠單獨使用上傳圖片的功能了。效果以下：

由於我對前端不太熟練，因此這篇文章寫得不是很清晰。還請見諒。

下一篇文章我會寫搭建圖片服務器部分，以及如何經過ftp傳文件到圖片服務器部分。