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

作者: Dark_Angel | 来源:发表于2017-05-18 20:12 被阅读2031次

前言

相信不少小伙伴看过笔者前面发的《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呢？答案是：一定可以。

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

前言

本文目录

分析

方案

实现

搭建UI

逻辑处理

初始化

添加工具栏

预览

保存

美化样式

总结

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

常用技术收集

iOS开发技巧

iOS小项目

默认收藏夹

人猿星球

iOS Developer

程序员

其他一丢丢