武汉ios培训
达内武汉中心

15827352908

热门课程

ios实现富文本编辑器的方法

  • 时间:2017-12-15 15:04
  • 发布:武汉达内
  • 来源:武汉达内培训机构

武汉ios培训课程:ios实现富文本编辑器的方法

富文本编辑器不同于文本编辑器,国内做的比较好的比如有百度的UEditor和kindEditor。但是这两个也有它的缺点:界面过于复杂、不够简洁、UI设计也比较落后、不够轻量化,这篇文章我们将给大家介绍利用iOS如何实现富文本编辑器。

解决思路

采用webview加载一个本地html文件,该html内部编写好js方法用于与oc相互调用 最终输出该富文本字符串传输给服务器

为什么选择这样的方式

服务端要求我最终返回的数据格式为:

1
2
3
4
5
6
7
8
9
{
 @"Id":"当时新建模板这个不传,更新模板必须传",
 @"title":"模板标题",
 @"text":"<p dir="ltr">测试文字</p>
 @"sendstr":"22372447516929 如果模板要保存同时发送给患者,这个值必须传,可以多个患者发送患者id以逗号隔开"
 @"1457968280769.jpg":
 @"文件名":"BACES64 数据 这个是多个图片或语音一起上传"
}

其中text字段即为富文本字段.

同时又需要编辑已有文本等功能.倘若用原生代码写较为复杂,最终选择了使用本地html代码实现

解决步骤

新建一个richTextEditor.html文件

1.页面设计

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/*界面不要太简单 一个简单的输入框*/
 <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方法设计

插入图片

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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 = "<br>";
 editableContent.appendChild(imageElement);
 editableContent.appendChild(breakElement);
}
 
function updateImageURL(imageName, imageURL) {
 var selectedElement = document.getElementById(imageName);
 selectedElement.setAttribute('src', imageURL);
}

获取html代码

1
2
3
4
function placeHTMLToEditor(html)
{
  editableContent.innerHTML = html;
}

4.oc与js相互调用

oc端实例一个webview加载该html和一个按钮用于添加图片

1
2
3
4
5
6
7
8
9
10
11
12
13
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对接

1
2
3
4
5
6
7
8
9
10
11
12
//以时间戳重命名图片
 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:@"",[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代码

1
NSString *html = [self.webView stringByEvaluatingJavaScriptFromString:@"document.getElementById('content').innerHTML"];

编辑服务器中的富文本

1
2
NSString *place = [NSString stringWithFormat:@"window.placeHTMLToEditor('%@')",self.inHtmlString];
[webView stringByEvaluatingJavaScriptFromString:place];

5.与服务端对接

此时我们取出的富文本如下:

1
企鹅的时候要[站外图片上传中……(4)]<div>阿空间里发红包啦?我</div>[站外图片上传中……(5)]<div><br></div>

其中id部分为我处理的特殊部分

处理方法如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
-(NSString *)changeString:(NSString *)str
  NSMutableArray * marr = [NSMutableArray arrayWithArray:[str componentsSeparatedByString:@"\""]];
 
  for (int i = 0; i < marr.count; i++)
  {
    NSString * subStr = marr[i];
    if ([subStr hasPrefix:@"/var"] || [subStr hasPrefix:@" id="])
    {
      [marr removeObject:subStr];
      i --;
    }
  }
  NSString * newStr = [marr componentsJoinedByString:@"\""];
  return newStr;

}


上一篇:IOS开发代码分享之设置UISearchBar的背景颜色
下一篇:ios开发知识(一)

卓手机或将成功刷入iOS

启动「效能管理」会令iPhone 效能下降多少?

那些升级ios 11.2.6的iPhone现在都怎么样了?

下周发布iOS 11.3正式版?消息可靠吗

选择城市和中心
贵州省

广西省

海南省