前言
相信不少小伙伴看过笔者前面发的《iOS中UIWebView与WKWebView、JavaScript与OC交互、Cookie管理看我就够》系列了吧，文章中笔者介绍过很多关于Native与JS交互的使用。今天呢，笔者来用最快速度撸个最简单的Markdown编辑器。
其实iOS原生Markdown编辑器的实现方式有很多，Github上面也有一些比较厉害的库，本着不重复造轮子的原则，markdown纯文本转html字符串这部分就不自己实现了，其他部分笔者用JavaScriptCore结合JS和OC（Swift其实也一样），来实现一个简单的Markdown编辑器。
这篇文章不是为了教大家如何开发Markdown编辑器，而是为广大iOS开发者打开一个新的思路，我们能使用的不只是iOS开源库，有了JavaScriptCore，即便脱离开WebView，我们也是可以使用JavaScript开源库的~
下面为小伙伴介绍下具体的实现细节，源码已上传Github，希望小伙伴们喜欢的给个Star。
本文目录
- 前言
- 分析
- 方案
- 实现
- 搭建UI
- 逻辑处理
- 初始化
- 添加工具栏
- 预览
- 保存
- 美化样式
- 总结
分析
如何在iOS上实现一个markdown编辑器呢？让我们来分析下。
- 首先，既然是编辑器，那应该会用到
UITextView控件。 - 其次，用户是在
UITextView上输入的文本，那作为一个编辑器，应该会有预览功能，点击预览则可以看到html页面。 - 再次，点击预览实现的是
markdown纯文本转html字符串，怎么实现呢？ - 最后，考虑给
UITextView的inputAccessoryView添加一些用户常用的按钮，比如“#、link、img”等，便于用户操作。
方案
上面提到的是笔者在做一个markdown编辑器时的思路，其实这个很重要，小伙伴们在遇到问题和处理问题时，也应该先整体思考，分析一下，然后得出实现方案，最后再去落实，养成一个好的习惯。
笔者的方案如下：
- 页面结构：一个
UIViewController上面放一个UITextView，顶部NavigationBar上面放个预览按钮和保存按钮。点击预览，查看编辑好的预览页；点击保存，保存当前文章到沙盒目录（真的业务需求的话可能是发送）。 UITextView的markdown纯文本转html字符串，通过成熟的js来实现，至于交互，使用JavaScriptCore（不重复造轮子，就不自己写正则处理了）。- 预览页直接用
WebView加载html字符串即可。
实现
搭建UI
这个So easy，分分钟~如下图
上面的图足够明确了吧~
编辑页中持有一个JSContext对象，同时持有一个inputBar，一个TextView（正文），一个UITextField（标题）。
预览页中是一个UIWebView（也可以是WKWebView）。
逻辑处理
初始化
EditViewController中首先实现初始化方法。
- (void)initialize{ self.textView.textContainerInset = UIEdgeInsetsMake(10, 5, 10, 5); //错误回调 [self.jsContext setExceptionHandler:^(JSContext *context, JSValue *exception){ NSLog(@"%@", exception.toString); }]; //markdown -> html js参考 https://github.com/showdownjs/showdown static NSString *js; static dispatch_once_t onceToken; dispatch_once(&onceToken, ^{ js = [NSString stringWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"showdown" ofType:@"js"] encoding:NSUTF8StringEncoding error:nil]; }); //加载js [self.jsContext evaluateScript:js]; //注入function markdown -> html，使用时，可以通过 convert('xxx'); 调用 NSString *jsFunction = @"\ function convert(md) { \ return (new showdown.Converter()).makeHtml(md);\ }"; [self.jsContext evaluateScript:jsFunction];}上面的代码中，我们提前给jsContext注入showdown.js文件，然后可以使用(new showdown.Converter()).makeHtml(md);的方法来将markdown字符串转换为html字符串。那么我们也提前注入了一个方法convert function来供我们自己调用。
添加工具栏
有一些字符，比如"*、-"等都是很常用的，这里我们添加一个工具栏，便于用户快捷操作。我们在初始化方法initialize中添加如下的方法。
self.textView.inputAccessoryView = self.inputBar;当用户点击inputBar上的按钮时，触发事件：
/** 点击了toolBar上面的item @param item item */- (IBAction)inputBarItemClicked:(UIBarButtonItem *)item{ NSString *title = item.title; //插入的文本内容 NSString *insertText; //插入文本内容后，移动光标到指定位置 NSRange selectedRange = self.textView.selectedRange; if ([title isEqualToString:@"link"]) { insertText = @"[]()"; selectedRange.location += 1; //移动到 [ 后面 } else if ([title isEqualToString:@"img"]) { insertText = @"![]()"; selectedRange.location += 4; //移动到 ( 后面 } else { insertText = title; selectedRange.location += title.length; //移动到插入文本的最后 } //插入文本 [self.textView insertText:insertText]; //移动光标 self.textView.selectedRange = selectedRange;}效果如下
预览
此时用户可以愉悦地编辑内容，当用户编辑完成时，可以点击预览。预览的方法实现：
/** 预览 @param sender item */- (IBAction)preview:(id)sender{ //标题不能为空 if (!self.titleTextField.text.length) { [self showMessage:@"请先填写文章标题"]; return; } //跳转到预览页 [self performSegueWithIdentifier:kShowPreviewSegueId sender:self];}#pragma mark - Setters and Getters- (NSString *)htmlString{ //markdown -> html JSValue *jsFunctionValue = self.jsContext[@"convert"]; JSValue *htmlValue = [jsFunctionValue callWithArguments:@[self.textView.text]]; return [NSString stringWithFormat:@"\ <html>\ <head>\ <title>%@</title>\ </head>\ <body>\ %@\ </body>\ </html>\ ", self.titleTextField.text, htmlValue.toString];}#pragma mark - Navigation- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender{ //跳转到预览页 if ([segue.identifier isEqualToString:kShowPreviewSegueId]) { PreviewViewController *vc = segue.destinationViewController; vc.htmlString = [self htmlString]; vc.title = self.titleTextField.text; }}点击预览，跳转到PreviewViewController页面，同时传递htmlString。这里如何获取htmlString呢？之前我们在initialize方法里，提前注入了名为convert的方法，现在我们来调用它
JSValue *jsFunctionValue = self.jsContext[@"convert"];JSValue *htmlValue = [jsFunctionValue callWithArguments:@[self.textView.text]];那我们很容易获取到了markdown文本转换成html的字符串了，然后我们给这个字符串完善下，添加上html标签、head标签以及页面的title，然后传递给预览页，直接展示就OK了。
效果如下图
保存
其实保存，这里只是简单实现，保存到沙盒。实际业务需求，很可能是一个发送按钮，上传到服务器，或者是分享到其他的App。这里简单介绍下保存到沙盒。下面上代码
/** 保存到沙盒目录 @param sender item */- (IBAction)save:(id)sender{ //标题不能为空 if (!self.titleTextField.text.length) { [self showMessage:@"请先填写文章标题"]; return; } NSData *data = [self.textView.text dataUsingEncoding:NSUTF8StringEncoding]; NSString *documentPath = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES).firstObject; NSString *filePath = [documentPath stringByAppendingPathComponent:[NSString stringWithFormat:@"%@.md", self.titleTextField.text]]; //写入文件 [data writeToFile:filePath atomically:YES]; NSLog(@"md成功保存，地址%@", filePath); [self showMessage:@"保存成功"];}保存的时候，直接保存源码到本地，就好了，文件命名为标题.md。
当我点击保存时，保存到本地，同时输出
DAMarkdownEditor[9717:192504] md成功保存，地址/Users/DarkAngel/Library/Developer/CoreSimulator/Devices/CF831783-E4A6-4EC2-AB99-E04304331C3A/data/Containers/Data/Application/A7837233-9EC3-4E4C-94CB-252329746176/Documents/A test title.md我们用Safari，Cmd+Shift+G，打开上面的地址可以看到
打开这个文件，可以查看下，源码就是我们输入的内容。
其实到这里，我们已经完成一个简单的Markdown编辑器。但是小伙伴们可能会说，预览的html太丑了，中间的代码块都没有高亮。那如何解决呢？
美化样式
如果你拥有一点点前端知识，你会立刻想到，少了一个好看的css样式。我们可以通过给html添加css，来使页面看起来更好看。
下面我们在- (NSString *)htmlString方法中，给html添加css，这里我本地添加了一个css文件，直接读取并拼接到head标签中
- (NSString *)htmlString{ //markdown -> html JSValue *jsFunctionValue = self.jsContext[@"convert"]; JSValue *htmlValue = [jsFunctionValue callWithArguments:@[self.textView.text]]; //加载css样式 static NSString *css; static dispatch_once_t onceToken; dispatch_once(&onceToken, ^{ css = [NSString stringWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"markdown" ofType:@"css"] encoding:NSUTF8StringEncoding error:nil]; }); return [NSString stringWithFormat:@"\ <html>\ <head>\ <title>%@</title>\ <style>%@</style>\ </head>\ <body>\ %@\ </body>\ </html>\ ", self.titleTextField.text, css, htmlValue.toString];}好啦，让我们再点击预览一下
这下好看多了，如果小伙伴们想要自定义样式，只需要修改css文件就OK啦，当然Github上有很多好看的样式哦~可以找找看，也可以自己修改下css。
至此，我们的Markdown编辑器就完成了，EditViewController一共181行，PreviewViewController一共38行，加上一个简单的Storyboard，我们的编辑器非常清爽。后续，可以再优化下页面的UI、InputBar中多添加一些快捷按钮，优化下UE，我们就可以上传AppStore啦~
总结
上面我们用很少的代码，很少的时间完成了一个简单的Markdown编辑器，又一次证明了JavaScriptCore的强大，同时也证明了前端如此火热的今天，Native开发依然是王道。
Github前十的开源项目中，有六款是基于JavaScript语言的。可能有些小伙伴作为一个Native端开发，会很方，很多小伙伴开始学习前端，学习js。当然，学习新的东西本就无可厚非。但我相信，被动学习的不在少数。
那么，我们可不可以利用它，结合Native打造更好的App呢？答案是：一定可以。
原著是一个有趣的人,若有侵权,请通知删除
还没有人抢沙发呢~