| 原文出处：五阿哥永琪
前言:最近帮公司的一名程序员搞一个项目的收尾工作,差一个富文本编辑器功能未实现,时间紧迫,调研了下网上的解决方法均较为繁琐.不得已找了个别门来实现该问题,且看下文
需要实现的效果
需要实现的效果
解决思路
采用webview加载一个本地html文件,该html内部编写好js方法用于与oc相互调用最终输出该富文本字符串传输给服务器
为什么选择这样的方式
服务端要求我最终返回的数据格式为:
1
2
3
4
5
6
7
8
| {
@"Id":"当时新建模板这个不传，更新模板必须传",
@"title":"模板标题",
@"text":"<pdir="ltr">测试文字</p>
<p><p>",
@"sendstr":"22372447516929如果模板要保存同时发送给患者，这个值必须传，可以多个患者发送患者id以逗号隔开"
@"1457968280769.jpg":
@"文件名":"BACES64数据这个是多个图片或语音一起上传"}
|
其中text字段即为富文本字段.
同时又需要编辑已有文本等功能.倘若用原生代码写较为复杂,最终选择了使用本地html代码实现
解决步骤
新建一个richTextEditor.html文件
1.页面设计
1
2
3
4
5
6
7
8
9
10
11
| /*界面不要太简单一个简单的输入框*/
<style>
img
{display:block;width:100%;margin-top:10px;margin-bottom:10px;
}
[contenteditable=true]:empty:before
{content:attr(placeholder);color:#a6a6a6;
}
#content
{padding:10px0;font-family:Helvetica;-webkit-tap-highlight-color:rgba(0,0,0,0);min-height:100px;
}<divid="content"contenteditable="true"onmouseup="saveSelection();"onkeyup="saveSelection();"onfocus="restoreSelection();"placeholder="轻触屏幕开始编辑正文"></div>
|
2.js方法设计
插入图片
1
2
3
4
5
6
7
8
9
10
| functioninsertImage(imageName,imagePath){
restoreSelection();varimageElement=document.createElement('img');varbreakElement=document.createElement('div');
imageElement.setAttribute('src',imagePath);
imageElement.setAttribute('id',imageName);
breakElement.innerHTML="<br>";
editableContent.appendChild(imageElement);
editableContent.appendChild(breakElement);
}functionupdateImageURL(imageName,imageURL){varselectedElement=document.getElementById(imageName);
selectedElement.setAttribute('src',imageURL);
}
|
获取html代码
1
2
3
| functionplaceHTMLToEditor(html){
editableContent.innerHTML=html;
}
|
4.oc与js相互调用
oc端实例一个webview加载该html和一个按钮用于添加图片
1
2
3
4
5
6
7
| self.webView=[[UIWebViewalloc]initWithFrame:CGRectMake(0,64+50,[UIScreenmainScreen].bounds.size.width,self.view.frame.size.height-50)];self.webView.delegate=self;
[self.viewaddSubview:self.webView];NSBundle*bundle=[NSBundlemainBundle];NSURL*indexFileURL=[bundleURLForResource:@"richTextEditor"withExtension:@"html"];
[self.webViewsetKeyboardDisplayRequiresUserAction:NO];
[self.webViewloadRequest:[NSURLRequestrequestWithURL:indexFileURL]];UIButton*btn=[UIButtonbuttonWithType:UIButtonTypeCustom];
[btnaddTarget:selfaction:@selector(addImage:)forControlEvents:UIControlEventTouchUpInside];
[self.viewaddSubview:btn];
|
添加完图片后与html对接
1
2
3
4
| //以时间戳重命名图片
NSString*imageName=[NSStringstringWithFormat:@"iOS%@.jpg",[selfstringFromDate:[NSDatedate]]];NSString*imagePath=[documentsDirectorystringByAppendingPathComponent:imageName];NSString*mediaType=[infoobjectForKey:UIImagePickerControllerMediaType];UIImage*image=[infoobjectForKey:UIImagePickerControllerOriginalImage];NSIntegeruserid=[[NSStringstringWithFormat:@"%@",[[NSUserDefaultsstandardUserDefaults]objectForKey:@"userID"]]integerValue];NSString*url=[NSStringstringWithFormat:@"http://pic.baikemy.net/apps/kanghubang/%@/%@/%@",[NSStringstringWithFormat:@"%ld",userid%1000],[NSStringstringWithFormat:@"%ld",(long)userid],imageName];NSString*script=[NSStringstringWithFormat:@"window.insertImage('%@','%@')",url,imagePath];NSDictionary*dic=@{@"url":url,@"image":image,@"name":imageName};
[_imageArraddObject:dic];//全局数组用于保存加上的图片
[self.webViewstringByEvaluatingJavaScriptFromString:script];
|
编辑完成后拿出html代码
1
| NSString*html=[self.webViewstringByEvaluatingJavaScriptFromString:@"document.getElementById('content').innerHTML"];
|
编辑服务器中的富文本
1
2
| NSString*place=[NSStringstringWithFormat:@"window.placeHTMLToEditor('%@')",self.inHtmlString];
[webViewstringByEvaluatingJavaScriptFromString:place];
|
5.与服务端对接
此时我们取出的富文本如下:
1
| 企鹅的时候要[站外图片上传中……(4)]<div>阿空间里发红包啦？我</div>[站外图片上传中……(5)]<div><br></div>
|
其中id部分为我处理的特殊部分
处理方法如下
1
2
3
4
5
6
7
8
9
10
| -(NSString*)changeString:(NSString*)str
{
NSMutableArray*marr=[NSMutableArrayarrayWithArray:[strcomponentsSeparatedByString:@"\""]];for(inti=0;i<marr.count;i++)
{NSString*subStr=marr[i];if([subStrhasPrefix:@"/var"]||[subStrhasPrefix:@"id="])
{
[marrremoveObject:subStr];
i--;
}
}NSString*newStr=[marrcomponentsJoinedByString:@"\""];returnnewStr;
}
|
至此可实现一个富文本编辑器的新增与编辑.
Demo
|
|
