写个小编辑器娱乐自己

Posted on 2017-09-03 in Essay by yucongchen

上周有两天感冒低烧了,躺在床上昏昏沉沉听罗胖的发布会,说到《黑天鹅》书中的一句话:现代社会给我们的双重惩罚是,既让我们衰老的更快,又让我们活得更长。深有同感,然后我就下单买了每天听本书的 VIP 会员。

作为一个程序员,写文章写文档已经习惯了用 Markdown,用别的各种不舒服,平常写公众号文章我一般用 Day One 写,写完保存,直接复制到微信公众号的编辑器里面,基本上也就成了。唯一有个缺点就是对代码的支持不友好,没高亮。

网上其实有挺多解决方案的,比如 Markdown Here,可以把你网页中的 md 文本给转化成漂亮的格式,这个在写邮件的时候格外好用。用在公众号问题也不大,但是要改改样式,生命在于折腾,还是自己另外搞一个好。

之前看小胡子大大和 Phodal 大大也写过在线的 md 编辑器,支持微信里面贴代码。不过,样式和我平常用的有些不一样,刚好最近要在业务里面尝试新框架 TypeScript + Vue,就找了这个机会写个 md 编辑器了解下新框架的流程,顺便娱乐下自己,慰籍一下我想写代码的心灵。

界面比较简单,布局是和 Phodal 大大基本一样的。主要使用的是 TypeScript + Vue,用到几个开源库:

  1. ShowDown,一个 Markdown 解析库,把 Markdown 文本变成 HTML;
  2. Google Code Prettify,这个是用来做代码高亮的;
  3. Clipboard,把生成的 HTML 复制到剪贴板。

核心代码很简单,只有 10 行。

    // lifecycle hook
    mounted () {
        new Clipboard("#copy-btn");
        this.loadInitMD()
    }
    updated(){
        prettify.prettyPrint();
    }

    // computed 
    get textHtml () {
        return this.converter.makeHtml(this.editorText)
    }

大致就是 textarea 的值和 this.editorText 绑定,生成的 HTML 用计算属性 textHtmlthis.editorText 联系起来,在 update 的钩子函数里面执行代码高亮的操作。核心逻辑就是这样,当然,还有蛮多细节在代码里。

涉及的技术点有:

  1. TypeScript
  2. Vue
  3. SASS
  4. CSS Module
  5. Async/Await

至于用 TypeScript + Vue 有啥好处可以参考 wonder 的文章(就是他说要在项目里用这套的):https://www.qcloud.com/community/article/935663

总的来说,TypeScript 的强类型对规范接口有好处;TypeScript 不仅满足 Babel 的编译功能,而且更加优雅;结合 Webpack,使用 Tree Shaking 特性,再也不怕乱引用库把打包文件弄大了。

除此之外,还尝试了一把 CSS Module,发现这是个很有意思的东西,有了这个,可以一定程度上告别全局 CSS了。用上了这个,JavaScript 里面可以知道有哪些能用的类名,直接用就可以了,比如下面的 Styles.editor

<textarea v-bind:class="Sytles.editor" id="editor" v-model="editorText" cols="100" rows="10" ></textarea>

关于 CSS Module 说起来比较长,下次介绍吧。


最后界面是这样的:

公众号:程序员的诗和远方

复制东西到左边,然后点右边的复制按钮,就可以愉快的粘贴到公众号编辑器里面了。

在线地址: http://md.imbeta.cn

GitHub 地址:https://github.com/bob-chen/md

碎碎念

记录一些所思所想,写写科技与人文,写写生活状态,写写读书心得,主要是扯淡和感悟。 欢迎关注,交流。

微信公众号:程序员的诗和远方

公众号ID : MonkeyCoder-Life

程序员的诗和远方