前言

相信不少小伙伴看过笔者前面发的《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，分分钟~如下图

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字符串。那么我们也提前注入了一个方法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，打开上面的地址可以看到

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呢？答案是：一定可以。

文章转载于:https://www.jianshu.com/p/b6ae8c2d5f05

原著是一个有趣的人,若有侵权,请通知删除

如何用最快速度撸个最简单的markdown编辑器

前言

本文目录

分析

方案

实现

搭建UI

逻辑处理

初始化

添加工具栏

预览

保存

美化样式

总结

iOS 开发随笔

相关推荐

评论抢沙发

评论前必须登录！

前言

本文目录

分析

方案

实现

搭建UI

逻辑处理

初始化

添加工具栏

预览

保存

美化样式

总结

iOS 开发随笔

相关推荐

评论 抢沙发

评论前必须登录！

评论抢沙发