iOS实现富⽂本编辑器的⽅法详解
前⾔
富⽂本编辑器不同于⽂本编辑器，国内做的⽐较好的⽐如有百度的UEditor和kindEditor。但是这两个也有它的缺点：界⾯过于复杂、不够简洁、UI设计也⽐较落后、不够轻量化，这篇⽂章我们将给⼤家
介绍利⽤iOS如何实现富⽂本编辑器。
实现的效果
解决思路
采⽤webview加载⼀个本地html⽂件，该html内部编写好js⽅法⽤于与oc相互调⽤最终输出该富⽂本字符串传输给服务器
为什么选择这样的⽅式
服务端要求我最终返回的数据格式为:
{
@"Id":"当时新建模板这个不传，更新模板必须传",
@"title":"模板标题",
@"text":"<p dir="ltr">测试⽂字</p>
<p><p>", @"sendstr":"22372447516929 如果模板要保存同时发送给患者，这个值必须传，可以多个患者发送患者id以逗号隔开"
@"1457968280769.jpg":
@"⽂件名":"BACES64 数据这个是多个图⽚或语⾳⼀起上传"
}
其中text字段即为富⽂本字段.
同时⼜需要编辑已有⽂本等功能.倘若⽤原⽣代码写较为复杂，最终选择了使⽤本地html代码实现
解决步骤
新建⼀个richTextEditor.html⽂件
1.页⾯设计
/*界⾯不要太简单⼀个简单的输⼊框*/
<style>
img
{
display: block;asp富文本编辑器
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相互调⽤
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 stringByEvaluatingJavaScriptFromString: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部分为我处理的特殊部分
处理⽅法如下
-(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;
}
总结
好了，⾄此可实现⼀个富⽂本编辑器的新增与编辑。以上就是本⽂的全部内容，希望对⼤家的学习或者⼯作能带来⼀定的帮助，如果有疑问⼤家可以留⾔交流。
发表评论