iOS实现富⽂本编辑器的⽅法详解
前⾔
富⽂本编辑器不同于⽂本编辑器，国内做的⽐较好的⽐如有百度的UEditor和kindEditor。但是这两个也有它的缺点：界⾯过于复杂、不够简洁、UI设计也⽐较落后、不够轻量化，这篇⽂章我们将给⼤家介绍利⽤iOS如何实现富⽂本编辑器。
实现的效果
解决思路
采⽤webview加载⼀个本地html⽂件，该html内部编写好js⽅法⽤于与oc相互调⽤最终输出该富⽂本字符串传输给服务器
为什么选择这样的⽅式
服务端要求我最终返回的数据格式为:
{ @'Id':'当时新建模板这个不传，更新模板必须传', @'title':'模板标题', @'text':'<p dir='ltr'>测试⽂字
</p> <p>![]
(pic.baikemy/apps/kanghubang/486/3486/1457968327238.amr@type=1@duration=1852) <p>', @'sendstr':'22372447516929 如果模板要保存同时发送给患者，这个值必须传，可以多个患者发送患者id以逗号隔开' @'1457968280769.jpg': @'⽂件名':'BACES64 数据这个是多个图⽚或语⾳⼀起上传' }
其中text字段即为富⽂本字段.
同时⼜需要编辑已有⽂本等功能.倘若⽤原⽣代码写较为复杂，最终选择了使⽤本地html代码实现
解决步骤
新建⼀个richTextEditor.html⽂件
1.页⾯设计
/*界⾯不要太简单⼀个简单的输⼊框*/ <style> img { display: block; width: 100%; margin-top: 10px; margin-bottom: 10px; } [contenteditable=true]:empty:before { content: attr(placeholder); color:
#a6a6a6; } #content { padding: 10px 0; font-family:Helvetica; -webkit-tap-highlight-color:
rgba(0,0,0,0); min-height:100px; } <div id='content' contenteditable='true'
onmouseup='saveSelection();' onkeyup='saveSelection();' onfocus='restoreSelection();' placeholder='轻触屏幕开始编辑正⽂' ></div>
2.js⽅法设计
插⼊图⽚
function insertImage(imageName, imagePath) { restoreSelection(); var imageElement = ateElement('img'); var breakElement = ateElement('div'); imageElement.setAttribute('src', imagePath); imageElement.setAttribute('id', imageName); breakElement.innerHTML = '<br>'; editableContent.appendChild(imageElement); editableContent.appendChild(breakElement); } function updateImageURL(imageName, imageURL) { var selectedElement = ElementById(imageName); selectedElement.setAttribute('src', imageURL); }
获取html代码
function placeHTMLToEditor(html) { editableContent.innerHTML = html; }
<与js相互调⽤
现货软件
app制作
短信接⼝验证码
软件测试培训
免费域名申请
加好友软件
开微店步骤
软件编程
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:@'pic.baikemy/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 stringByEvaluatingJavaScri
ptFromString:script];
编辑完成后拿出html代码
NSString *html = [self.webView
stringByEvaluatingJavaScriptFromString:@'ElementById('content').innerHTML'];
编辑服务器中的富⽂本
NSString *place = [NSString
stringWithFormat:@'window.placeHTMLToEditor('%@')',self.inHtmlString]; [webView stringByEvaluatingJavaScriptFromString:place];
5.与服务端对接
此时我们取出的富⽂本如下:
企鹅的时候要[站外图⽚上传中……(4)]<div>阿空间⾥发红包啦？我</div>[站外图⽚上传中……(5)] <div><br></div>
其中id部分为我处理的特殊部分
处理⽅法如下免费图片编辑软件app
-(NSString *)changeString:(NSString *)str { NSMutableArray * marr = [NSMutableArray arrayWithArray:[str componentsSeparatedByString:@'\'']]; for (int i = 0; i < unt; i ) { NSString * subStr = marr[i]; if ([subStr hasPrefix:@'/var'] || [subStr hasPrefix:@' id=']) { [marr removeObject:subStr]; i --; } } NSString * newStr = [marr componentsJoinedByString:@'\'']; return newStr; }
总结
好了，⾄此可实现⼀个富⽂本编辑器的新增与编辑。以上就是本⽂的全部内容，希望对⼤家的学习或者⼯作能带来⼀定的帮助，如果有疑问⼤家可以留⾔交流。
发布评论