示例：
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 (五)：首页的布局与数据整理
下一篇： 未完待续