ios富文本编辑器

方案 ：html+wkwebview，支持加粗、下划线、斜体、对齐方式、字体更改颜色、插入图片、插入视频、插入链接、清除格式、撤回上一个 *** 作

核心 ：利用html5新特性contenteditable，当div的contenteditable为true时，div进入编辑状态，可以通过执行html5的命令对文本进行 *** 作。命令文档地址：https://developer.mozilla.org/zh-TW/docs/Web/API/Document/execCommand。

具体实现 ：

一：文件目录

1.editor.html,该文件实现了编辑器的节点骨架，一个contenteditable为true的div。

2.ZJSTextEditor.js，该文件是编辑器的核心内容，主要实现编辑器的各种 *** 作，以插入视频为例,外部的wkwebview只需要执行js方法evaluateJavaScript:‘zss_editor.insertVideo(...)’，将url带入

3.EditorView这个文件主要是放wkwebview，以及wkwebview调用ZJSTextEditor.js中js方法的部分。如页面加载完，设置占位文字，或者默认对一些标签的处理

二：开发中产品提出的需求和我的设计方案

1.web端要求dom结构为<p>...</p> <p>...</p> <p>...</p> <p>...</p> <p>...</p>,也就是n个p里包含着你插入的视频图片等子节点？

我的方案：

1.1：在editor.html文件中插入的div中，插入一个默认的空p标签<p><br></p>,这样会保证你在文字中间插入图片、视频或者换行时，系统给你新增一个p标签包裹而不是div标签

1.2：在插入图片后加入一个空p，在文字中间插入视频后加入一个空的p和br再删除br，插入br是为了在文字中间插入视频时，让系统自动给你补全p标签，否则视频会被加在该文字的下一行。

2.每个图片要紧紧跟随一个图片输入框，且图片输入框支持粘贴，且图片和图片输入框可以通过某个按钮同时被删除？

我的方案：

图片有三个途径添加，第一个是粘贴来的新闻中带有图片，第二个是自己插入的图片，第三个是从html刚刚开始加载时自带图片（从web端发布的文章，在ios端编辑）。

2.1：每个图片要紧紧跟着一个图片输入框，我在三个途径处分别做了图片的处理，首先是自己插入的图片，我在插入图片时，紧接着插入一个textarea标签和一个p标签。插入一个p标签的目的是满足需求1，其次是粘贴来的新闻和html刚刚加载自带的图片，我选择遍历所有的图片标签，首先检查img标签的name属性是否有值，若没有值，新增textarea标签，并设置img标签和textarea标签的name属性为同一个UUID，若name属性有值，检查它的后一个兄弟节点是否跟随一个同name的dom，如果有且是i标签（提交数据时，要将所有的输入框变成i标签，此刻要从i标签变回输入框），将它转化成输入框，如果没有，添加默认输入框。

2.2：图片输入框支持粘贴，textarea自带粘贴

2.3：图片和图片输入框可以通过某个按钮同时被删除，设置img标签和textarea标签的name属性为同一个UUID，用name的原因是document.getElementsByName给的是该name的一组标签，删除时，只需要根据name删除即可

3.从微信或者头条粘贴过来的文章格式有误，文字偏大或者偏小？

我的解决方案：

由于拿不到原文章的js，所以只能在粘贴时去除标签内的所有内联样式。当然这个地方有个特殊情况要处理，比如用户在编辑时，设置了对齐方式，系统会自动给标签加上内联样式，这个样式我们不应该去掉。我的处理方案时自定义一个属性名zjs-style，在用户设置对齐方式时，将标签的style值赋值给zjs-style，我们在合适的时机，根据zjs-style复原其style

4.输入框在提交后变成不可输入的展示区域？

我的解决方案：

在提交时，遍历所有的textarea，若textarea没有值，去掉该textarea，若有值的话，将该textarea替换成i标签，且name值赋值给新的i。

5.从web端来的数据支持展示和再编辑？

我的解决方案：

在editor.html的div中加入默认占位文字<!-- defaultContent -->，在html资源加载前，将占位文字替换为后台给的html内容，并在网页加载完后，做相关处理

调试工具 ：

实现：1、首次图文混编，输出是html标签的字符串；

            2、将html标签的内容再次编辑；

创建编辑控制器

.h文件

@property (nonatomic,strong)NSString *inHtmlString

block是将编辑的内容返回上个页面 *** 作

@property (nonatomic, copy)void (^postBlock)(NSString *htmlString)

.m文件

JavaScriptCore/JavaScriptCore.h

WebKit/WebKit.h

实现WKWebView的代理及相册的代理（懒得弄。用的系统相册）

NSString*_htmlString//保存输出的富文本

    NSMutableArray*_imageArr//保存添加的图片

@property (nonatomic, strong) WKWebView *webView

加载写好的 .html文件 给个简易版本的即可

NSBundle *bundle = [NSBundle mainBundle]

    NSURL*indexFileURL = [bundleURLForResource:@"richTextEditor"withExtension:@"html"]

    [self.webView loadRequest:[NSURLRequest requestWithURL:indexFileURL]]

创建一个button 选择图片，给个点击事件

[btn1 addTarget:self action:@selector(addImage) forControlEvents:UIControlEventTouchUpInside]

创建一个button 保存html字符串，给个点击事件

[btn2 addTarget:self action:@selector(printHTML) forControlEvents:UIControlEventTouchUpInside]

- (void)printHTML{

    [self.webView evaluateJavaScript:@"document.getElementById('content').innerHTML" completionHandler:^(id _Nullable result, NSError * _Nullable error) {

        NSLog(@"html=%@",result)

        !self.postBlock?:self.postBlock(result)

        [self.navigationController popViewControllerAnimated:YES]

    }]

}

- (void)addImage{

    UIImagePickerController *imagePickerController = [[UIImagePickerController alloc] init]

    imagePickerController.sourceType = UIImagePickerControllerSourceTypePhotoLibrary

    imagePickerController.delegate=self

    [self presentViewController:imagePickerController animated:YES completion:nil]

}

实现相册代理方法

#pragma mark - ImagePickerController Delegate

- (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)info

{

    UIImage * image = [info objectForKey:UIImagePickerControllerOriginalImage]

    NSData *data = UIImagePNGRepresentation(image)

    if(2*1024*1024>[datalength]) {

        data =UIImageJPEGRepresentation(image,0.6)

    }else{

    }

    UIImage*resultImage = [UIImageimageWithData:data]

    NSString *imagePath = [NSString stringWithFormat:@"%@", [info objectForKey:UIImagePickerControllerImageURL]]//本地图片路径

    [datawriteToFile:imagePathatomically:YES]

此处是将已添加的图片上传至你们的服务器

上传成功后执行

            NSString*url =服务器图片地址

            NSString*script = [NSStringstringWithFormat:@"window.insertImage('%@', '%@')", imagePath, url]

            NSDictionary*dic =@{@"url":url,@"image":image,@"name":imagePath}

            [_imageArraddObject:dic]

            [self.webViewevaluateJavaScript:scriptcompletionHandler:^(id_Nullableresult,NSError*_Nullableerror) {

            }]

            [self dismissViewControllerAnimated:YES completion:nil]

}

编辑器软件。

untitled是文本编辑器、十六进制编辑器、html编辑器、PHP编辑器、Javascript编辑器、Perl编辑器和程序编辑器等。

它的用途非常广泛，可以用来编辑文本、编写代码等。

---