游戏社区App (六)：文章编辑与上传

一、文章编辑-Android端

示例：

1、富文本编辑器
富文本编辑器参考的是GitHub上RichEditotAndroid的富文本编辑器
实现方式为使用 WebView + JavaScript。
原理为使用WebView来显示一个本地HTML。
1）、需要先在assets里放置静态网页和需要的初始化css。其中editor.html 为静态网页，editor.js为Android通过js与html相互调用的方法。
2）、RichEditor.java 作为富文本的实现类。

2、对RichEditotAndroid富文本编辑器进行修改
1、RichEditotAndroid编辑时，插入的图片为原图大小，对于浏览图片很不友好。需要修改图片，让其大小适应屏幕。
修改rich_editor.js中insertImage方法，为插入的图片新增style。
示例：

RE.insertImage = function(url, alt,style) {
    var html = '<img src="' + url + '" alt="' + alt + '" style="' + style + '" />
</br>';
    RE.insertHTML(html);
    RE.editor.scrollIntoView(false)
}

修改RichEditor.java中insertImage方法，传入对应的style。

String alt = "picvision";
String style = "margin-top:10px;max-width:100%;";
mEditor.insertImage(url,alt,style);

public void insertImage(String url, String alt, String style) {
    exec("javascript:RE.prepareInsert();");
    exec("javascript:RE.insertImage('" + url + "', '" + alt + "', '" + style + "');");
}

2、因为工程使用 Fragmentation 和 ButterKnife ，所以要对RichEditotAndroid进行相应的修改。

3、需要为RichEditotAndroid增加打开相册选择图片的功能。

2、富文本中的图片
1）、打开相册选择图片返回uri，把uri转换为File
示例代码：

public File uriToFile(Uri uri){
    File file = null;
    try {
        String[] arr = {MediaStore.Images.Media.DATA};
        Cursor cursor = mLatte.getProxyActivity().managedQuery(uri, arr, null, null, null);
        int img_index = cursor.getColumnIndexOrThrow(MediaStore.Images.Media.DATA);
        cursor.moveToFirst();
        String img_path = cursor.getString(img_index);
        file = new File(img_path);
    } catch (Exception e){
        LocalLogUtils.e("e ="+e,true);
    }
    return file;
}

2）、使用的Retrofit封装中的upload进行图片的上传，后台保存图片并返回图片的url。最后富文本通过insertImage插入图片。

public void UpPhoto(File file){
    RestClient.builder()
            .url(API_UP_PHOTO)
            .file(file)
            .success(new ISuccess() {
                @Override
                public void onSuccess(String response) {
                    onUpPhotoListener.onSuccess(response);
                }
            })
            .failure(new IFailure() {
                @Override
                public void onFailure(String msg) {
                    LocalLogUtils.e("msg="+msg,true);
                    onUpPhotoListener.onFailure(msg);
                }
            })
            .error(new IError() {
                @Override
                public void onError(int code, String msg) {
                    LocalLogUtils.e("code="+code+"  msg="+msg,true);
                    onUpPhotoListener.onError(code,msg);
                }
            })
            .build()
            .upload();
}

3、上传文章
1）、获取发布的范围和封面图，并插入对应的文章样式。把html上传后台。
文章上传后台，示例代码：

private void initTop(){
            RestClient.builder() 
                    .url(AppInfo.API_UP_NEW_ARTICLE)
                    .params("bigType",bigType)
                    .params("smallType",smallType)
                    .params("coverPhotoUrl",coverPhotoUrl)
                    .params("title",title)
                    .params("articleContent",htmlData)
                    .params("author",author)
                    .success(new ISuccess() {
                        @Override
                        public void onSuccess(String response) {
                            LocalLogUtils.d("response="+response,false);
                            final JSONObject dataObject =JSONObject.parseObject(response);
                            int code = dataObject.getInteger("code");
                            if(code==300){
                                Tips.ToastLong("成功");
                                startWithPop(new EcBottomDelegate());//返回主界面
                            }else {
                                Tips.ToastLong("失败");
                                LocalLogUtils.d("上传文章失败，错误码："+code,true);
                            }
                        }
                    })
                    .failure(new IFailure() {
                        @Override
                        public void onFailure(String msg) {
                            LocalLogUtils.d("msg="+msg,false);
                        }
                    })
                    .error(new IError() {
                        @Override
                        public void onError(int code, String msg) {
                            LocalLogUtils.d("code="+code+"  msg="+msg,false);
                        }
                    })
                    .build()
                    .post();
            }

二、Spring Boot后端
在利用Spring Boot为Android App搭建一个简易的后台中新增上传图片的接口。
示例代码：
把上传的image图片保存到服务器，并返回图片的url

@RequestMapping("/up_photo")
public ApiResult upPhoto(@RequestParam("file") MultipartFile image){
    int code = 0;
    String status = "unknown error";
    String data = "";
    try {
        String fileName =saveFile(image); //保存图片
        String photoUrl = generateFileUrl(SON_PATH + fileName);//生成图片url
        data=photoUrl;
        code = ApiCallback.Success;
        status = "Save file success";
    }catch (Exception e){
        //报错了，返回错误信息
        status=String.valueOf(e);
    }
    //返回对应数据
    ApiResult apiResult = new ApiResult();
    apiResult.setCode(code);
    apiResult.setStatus(status);
    apiResult.setData(data);
    return apiResult;
}

把image图片保存到服务器。会在服务器的filePath文件夹生成对应的图片文件
示例代码：

在这里插入代码片private String saveFile(MultipartFile image){
    //图片存储的位置
    String filePath =ROOT_PATH+SON_PATH;//存储根目录+图片目录
    System.out.println("filePath="+filePath);
    //先判断是否存在，不存在就创建
    File storageFolder = new File(filePath);
    if (!storageFolder.exists()) {
        storageFolder.mkdirs();
    }
    //生成随机的文件名（当前时间+4位随机数）
    String suffix_temp = image.getOriginalFilename();
    String suffix = suffix_temp.substring(suffix_temp.lastIndexOf(".")+1); //获得后缀名称
    Random random = new Random();
    Integer randomFileName = random.nextInt(1000);
    String fileName = TimeUtil.TimeStr(TimeUtil.TIME_TYPE_ALL_PREFIX) + randomFileName +"." +  suffix;
    //假如文件不存在 即重新创建新的文件已防止异常发生
    File dest = new File(filePath + fileName);
    if (!dest.getParentFile().exists()) {
        dest.getParentFile().mkdirs();
    }
    try {
        image.transferTo(dest); //保存图片
    } catch (IOException e) {
        System.out.println("Save file error,e="+e.toString());
    }
    return fileName;
}

再生成图片的url
需要先在配置文件application.properties配置

#上传文件的配置
#设置url访问图片（访问url为：ip + 端口 +image+图片名，例如：http://xx.x.xx.xxx:80xx/image/857.png）
spring.mvc.static-path-pattern=/image/**
#图片真实的存放路径
spring.resources.static-locations=file:C://image/

//生成图片url
private String generateFileUrl(String filePath) {
    //合成图片URL(域名/IP+端口号+标记（static-path-pattern）+文件地址)
    String MARK = STATIC_PATH_PATTERN.substring(0,STATIC_PATH_PATTERN.length()-3);
    String url = "http://"+ IP + ":" +SERVER_PORT  + MARK+ filePath;
    return url;
}

最后把后台返回的url通过insertImage方法插入图片到文章编辑中。
文章的上传接口和图片基本类似，但还需要把生成的url和相关分类信息保存到对应的数据库中。

上一篇： 游戏社区App (五)：首页的布局与数据整理
下一篇： 未完待续