如何使用IOS来实现富文本编辑器的方法
来源：爱站网时间：2020-07-01编辑：网友分享
我们在开发中经常使用富文本编辑器，所以今天爱站技术频道小编就给大家介绍如何使用IOS来实现富文本编辑器的方法，相信阅读完本文的介绍后对您有一定的参考价值，有需要的朋友可以看看。
我们在开发中经常使用富文本编辑器，所以今天爱站技术频道小编就给大家介绍如何使用IOS来实现富文本编辑器的方法，相信阅读完本文的介绍后对您有一定的参考价值，有需要的朋友可以看看。
实现的效果
解决思路
采用webview加载一个本地html文件,该html内部编写好js方法用于与oc相互调用 最终输出该富文本字符串传输给服务器
为什么选择这样的方式
服务端要求我最终返回的数据格式为:
{
@"Id":"当时新建模板这个不传，更新模板必须传",
@"title":"模板标题",
@"text":"
测试文字
", @"sendstr":"22372447516929 如果模板要保存同时发送给患者，这个值必须传，可以多个患者发送患者id以逗号隔开" @"1457968280769.jpg": @"文件名":"BACES64 数据 这个是多个图片或语音一起上传" }
其中text字段即为富文本字段.
同时又需要编辑已有文本等功能.倘若用原生代码写较为复杂,最终选择了使用本地html代码实现
解决步骤
新建一个richTextEditor.html文件
1.页面设计
/*界面不要太简单 一个简单的输入框*/
2.js方法设计
插入图片
function insertImage(imageName, imagePath)
{
restoreSelection();
var imageElement = document.createElement('img');
var breakElement = document.createElement('div');
imageElement.setAttribute('src', imagePath);
imageElement.setAttribute('id', imageName);
breakElement.innerHTML = "
";
editableContent.appendChild(imageElement);
editableContent.appendChild(breakElement);
}
function updateImageURL(imageName, imageURL) {
var selectedElement = document.getElementById(imageName);
selectedElement.setAttribute('src', imageURL);
}
获取html代码
function placeHTMLToEditor(html)
{
editableContent.innerHTML = html;
}
4.oc与js相互调用
oc端实例一个webview加载该html和一个按钮用于添加图片
self.webView = [[UIWebView alloc]initWithFrame:CGRectMake(0, 64+50, [UIScreen mainScreen].bounds.size.width, self.view.frame.size.height - 50)]; self.webView.delegate = self; [self.view addSubview:self.webView]; NSBundle *bundle = [NSBundle mainBundle]; NSURL *indexFileURL = [bundle URLForResource:@"richTextEditor" withExtension:@"html"]; [self.webView setKeyboardDisplayRequiresUserAction:NO]; [self.webView loadRequest:[NSURLRequest requestWithURL:indexFileURL]]; UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom]; [btn addTarget:self action:@selector(addImage:) forControlEvents:UIControlEventTouchUpInside]; [self.view addSubview:btn];
添加完图片后与html对接
//以时间戳重命名图片
NSString *imageName = [NSString stringWithFormat:@"iOS%@.jpg", [self stringFromDate:[NSDate date]]];
NSString *imagePath = [documentsDirectory stringByAppendingPathComponent:imageName];
NSString *mediaType = [info objectForKey:UIImagePickerControllerMediaType];
UIImage *image = [info objectForKey:UIImagePickerControllerOriginalImage];
NSInteger userid = [[NSString stringWithFormat:@"%@", [[NSUserDefaults standardUserDefaults] objectForKey:@"userID"]] integerValue];
NSString *url = [NSString stringWithFormat:@"http://pic.baikemy.net/apps/kanghubang/%@/%@/%@",[NSString stringWithFormat:@"%ld",userid%1000],[NSString stringWithFormat:@"%ld",(long)userid ],imageName];
NSString *script = [NSString stringWithFormat:@"window.insertImage('%@', '%@')", url, imagePath];
NSDictionary *dic = @{@"url":url,@"image":image,@"name":imageName};
[_imageArr addObject:dic];//全局数组用于保存加上的图片
[self.webView stringByEvaluatingJavaScriptFromString:script];
编辑完成后拿出html代码
NSString *html = [self.webView stringByEvaluatingJavaScriptFromString:@"document.getElementById('content').innerHTML"];
编辑服务器中的富文本
NSString *place = [NSString stringWithFormat:@"window.placeHTMLToEditor('%@')",self.inHtmlString];
[webView stringByEvaluatingJavaScriptFromString:place];
5.与服务端对接
此时我们取出的富文本如下:
企鹅的时候要[站外图片上传中……(4)]
阿空间里发红包啦？我
[站外图片上传中……(5)]
其中id部分为我处理的特殊部分
处理方法如下
-(NSString *)changeString:(NSString *)str
{
NSMutableArray * marr = [NSMutableArray arrayWithArray:[str componentsSeparatedByString:@"\""]];
for (int i = 0; i
总结
好了，至此可实现一个富文本编辑器的新增与编辑。以上就是关于如何使用IOS来实现富文本编辑器的方法，程序员应该要多参考别人的成功案例，吸取别人的经验，然后让项目变得越来越好。
