美文网首页常用技术收集iOS开发技巧iOS小项目
如何用最快速度撸个最简单的markdown编辑器

如何用最快速度撸个最简单的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字符串,怎么实现呢?
    • 最后,考虑给UITextViewinputAccessoryView添加一些用户常用的按钮,比如“#、link、img”等,便于用户操作。

    方案

    上面提到的是笔者在做一个markdown编辑器时的思路,其实这个很重要,小伙伴们在遇到问题和处理问题时,也应该先整体思考,分析一下,然后得出实现方案,最后再去落实,养成一个好的习惯。

    笔者的方案如下:

    • 页面结构:一个UIViewController上面放一个UITextView,顶部NavigationBar上面放个预览按钮和保存按钮。点击预览,查看编辑好的预览页;点击保存,保存当前文章到沙盒目录(真的业务需求的话可能是发送)。
    • UITextViewmarkdown纯文本转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编辑器

      本文链接:https://www.haomeiwen.com/subject/rhqexxtx.html