iOS实现富文本编辑器的方法详解

前言

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

实现的效果

解决思路

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

为什么选择这样的方式

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

{
 @"Id":"当时新建模板这个不传,更新模板必须传",
 @"title":"模板标题",
 @"text":"<p dir="ltr">测试文字</p>
![](http://upload-images.jianshu.io/upload_images/1694866-a9a1da57455b2054.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)<p>![](http://pic.baikemy.net/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 = 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代码

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)]<div>阿空间里发红包啦?我</div>[站外图片上传中……(5)]<div><br></div>

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

处理方法如下

-(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;
}

总结

好了,至此可实现一个富文本编辑器的新增与编辑。以上就是本文的全部内容,希望对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

时间: 2016-10-06

iOS中添加文本链接和图片示例代码

前言 我们在开发过程中会遇到这样的需求.用户注册,或者做些其他操作的时候我们需要在下方加上这样一段话:注册代表你遵守我们的<用户协议>,<隐私条款>这两个是链接,那么接下来我们改怎么做呢,下面来一起看看详细的介绍: 先上图再说话 实现方法 如果我们按照平常的想法在label上面显示文字,然后给label加上手势也可以实现,那么链接多的话,你就要判断点击手势的区域,感觉麻烦,那么苹果给我们提供了很好的方法富文本NSMutableAttributedString. UITextView

iOS中对文本的字符限制示例详解

需求 1.对于文本框,字数限制是一种很常见的需求,判断text.length 即可,然而交互提出了对字符限制,一个英文.一个数字 对应一个字符,一个汉字 对应 两个字符,并只可以输入中英文数字.so what,要肿么办呢? 知识储备 TextField lengthOfBytesUsingEncoding 方法 characterAtIndex 首先,对于正常字数限制的一些操作此处就不讲解了. 方法如下 我们需要监听textfield [textfield addTarget:self acti

JQuery在页面中添加和除移DOM示例代码

1.before():将新节点添加到前面 2.after():将节点添加到低部 3.prepend():把节点变成第一个节点 4.append():把新节点添加到末端,与appendTo()效果相同,只是语法上有差异 5.remove():除移节点 示例: 复制代码 代码如下: <ul> <li class="vacation"> <h2>Hawaiian Vac</h2> <button>Get Price</butt

iOS中UILabel text两边对齐的实现代码

废话不多说了,直接给大家贴代码了,具体代码如下所示: -(NSAttributedString *)setTextString:(NSString *)text { NSMutableAttributedString *mAbStr = [[NSMutableAttributedString alloc] initWithString:text]; NSMutableParagraphStyle *npgStyle = [[NSMutableParagraphStyle alloc] init]

C++中const用于函数重载的示例代码

常成员函数和非常成员函数之间的重载 首先先回忆一下常成员函数 声明:<类型标志符>函数名(参数表)const: 说明: (1)const是函数类型的一部分,在实现部分也要带该关键字. (2)const关键字可以用于对重载函数的区分. (3)常成员函数不能更新类的成员变量,也不能调用该类中没有用const修饰的成员函数,只能调用常成员函数. (4)非常量对象也可以调用常成员函数,但是如果有重载的非常成员函数则会调用非常成员函数. 重载看例子: #include<iostream> u

VUE饿了么树形控件添加增删改功能的示例代码

本文介绍了VUE饿了么树形控件添加增删改功能的示例代码,分享给大家,具体如下: element-ui树形控件:地址 在原文档中有个案例是有新增和删除功能,但是后来发现其修改的数据并不能直接影响到树形数据,所以采用了 render-content 的API重新写了个组件. 写个开发的步骤,所以文章比较长emmm 大致效果如图: 1.省市API 在网上复制了个省市的list,有两个属性是新增的 isEdit :控制编辑状态 maxexpandId :为现下id的最大值 export default{

Android中js和原生交互的示例代码

本文介绍了Android中js和原生交互的示例代码,分享给大家,具体如下: 加载webview的类 public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); JavaScriptInterf

iOS中常见的视图和图片处理示例详解

前言 众所周知在开发中不可避免的会遇到一些图片和视图的处理,我这里总结的这些只是我遇到的一些,以供下次使用查看.下面话不多说了,来一起看看详细的介绍吧. 图片的旋转 是UIImage的扩展类,直接使用UIImage的对象调用即可 UIImage #import <QuartzCore/QuartzCore.h> #import <Accelerate/Accelerate.h> @implementation UIImage (ImageRotate) -(UIImage *)im

[Android] 通过GridView仿微信动态添加本地图片示例代码

前面文章讲述的都是"随手拍"中图像处理的操作,此篇文章主要讲述GridView控件实现添加本地图片并显示.主要是关于GridView控件的基本操作,通常可以通过自定义继承BaseAdapter的适配器加载图片,而下面讲述的不是自定义的适配器,而是调用SimpleAdapter实现的.至于上传发布与网络交互此处不讲述,后面文章会讲! 一. 实现效果 主要是通过点击+从本地相册中添加图片,同时显示图片至GridView.点击图片可以进行删除操作,同时界面中的发布EditView控件也很好看

iOS中实现动态区域裁剪图片功能实例

前言 相信大家应该都有所体会,裁剪图片功能在很多上传图片的场景里都需要用到,一方面应用服务器可能对图片的尺寸大小有限制,因而希望上传的图片都是符合规定的,另一方面,用户可能希望只上传图片中的部分内容,突出图片中关键的信息.而为了满足用户多种多样的裁剪需求,就需要裁剪图片时能支持由用户动态地改变裁剪范围.裁剪尺寸等. 动态裁剪图片的基本过程大致可以分为以下几步 显示图片与裁剪区域 支持移动和缩放图片 支持手势改变裁剪区域 进行图片裁剪并获得裁剪后的图片 显示图片与裁剪区域 显示图片 在裁剪图片之前