如何用最快速度撸个最简单的markdown编辑器-iOS开发
前言
今天呢，笔者来用最快速度撸个最简单的Markdown编辑器杜小娟。
其实iOS原生Markdown编辑器的实现方式有很多，Github上面也有一些比较厉害的库，本着不重复造轮子的原则，markdown纯文本转html字符串这部分就不自己实现了，其他部分笔者用JavaScriptCore结合JS和OC（Swift其实也一样），来实现一个简单的Markdown编辑器。
这篇文章不是为了教大家如何开发Markdown编辑器，而是为广大iOS开发者打开一个新的思路，我们能使用的不只是iOS开源库，有了JavaScriptCore，即便脱离开WebView，我们也是可以使用JavaScript开源库的~
下面为小伙伴介绍下具体的实现细节，源码已上传Github，希望小伙伴们喜欢的给个Star黑卡6小时 。本文目录
前言
分析
方案
实现
初始化
添加工具栏
预览
保存
搭建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单盈盈 ，分分钟~如下图
UI搭建
上面的图足够明确了吧~
编辑页中持有一个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字符串。那么我们也提前注入了一个方法convertfunction来供我们自己调用。添加工具栏
有一些字符，比如"*、-"等都是很常用的，这里我们添加一个工具栏王香如，便于用户快捷操作。我们在初始化方法initialize中添加如下的方法。
self.textView.inputAccessoryView = self.inputBar;
当用户点击inputBar上的按钮时，触发事件：
- (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;}
效果如下
工具栏输入预览
此时用户可以愉悦地编辑内容，当用户编辑完成时，可以点击预览。预览的方法实现：
- (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。这里简单介绍下保存到沙盒。下面上代码
- (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，打开上面的地址可以看到
md文件已保存
打开这个文件，可以查看下，源码就是我们输入的内容。
其实到这里，我们已经完成一个简单的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后，点击预览
这下好看多了，如果小伙伴们想要自定义样式，只需要修改css文件就OK啦，当然Github上有很多好看的样式哦~可以找找看马澜菲 ，也可以自己修改下css。
至此，我们的Markdown编辑器就完成了，EditViewController一共181行，PreviewViewController一共38行，加上一个简单的Storyboard谢韵仪，我们的编辑器非常清爽。后续，可以再优化下页面的UI、InputBar中多添加一些快捷按钮，优化下UE，我们就可以上传AppStore啦~总结
上面我们用很少的代码，婴儿智力发育很少的时间完成了一个简单的Markdown编辑器，又一次证明了JavaScriptCore的强大，同时也证明了前端如此火热的今天，Native开发依然是王道。
Github前十的开源项目中，有六款是基于JavaScript语言的。可能有些小伙伴作为一个Native端开发，会很方，很多小伙伴开始学习前端，学习js。当然，学习新的东西本就无可厚非。但我相信，被动学习的不在少数。
那么，我们可不可以利用它，结合Native打造更好的App呢？答案是：一定可以。
【版权归作者所有，iOS开发整理发布】
作者：Dark_Angel
链接：http://www.jianshu.com/p/b6ae8c2d5f05
转载请联系作者授权
↙点击“阅读原文”，加入
『程序员大咖』
