写个小编辑器娱乐自己

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏葡萄城控件技术团队

【官宣】WijmoJS 2018 v3 正式发布,全面支持Angular7

WijmoJS(前端开发工具包)2018年度第三个大版本已经正式发布,本次更新除了全面支持Angular7之外,还允许用户使用Web Workers在前端更高效...

13420
来自专栏ThoughtWorks

展望2016,REACT.JS 最佳实践 | TW洞见

今日洞见 译者:ThoughtWorks-吕靖,译自 Péter Márton:React.js Best Practices for 2016。 本文所有内容...

39590
来自专栏做全栈攻城狮

小白学编程实战项目-利用Winform开发美女音乐播放器

这是小白学习软件开发系列课程,旨在帮助对电脑编程感兴趣的朋友学习并熟悉C#技术。其中基础部分已经讲解完毕,可以查看:电脑编程入门(10)-C#面向对象编程浅聊,...

27130
来自专栏Python自动化测试

Frame在自动化中的处理

在自动化中,如果一个元素定位不到,那么最大可能是在iframe中,我们先了解frame。frame是html中的框架,在html中,所谓框架就是可以在同一个浏...

15030
来自专栏理论坞

UI(用户界面)设计规则和规范

界面是软件与用户交互的最直接的层,界面的好坏决定用户对软件的第一印象。而且设计良好的界面能够引导用户自己完成相应的操作,起到向导的作用。同时界面如同人的面孔,具...

24830
来自专栏iOS技术

iOS图片浏览器(功能强大/性能优越)

支持 cocopods,功能完善,性能不错,代码质量尚可,喜欢的朋友可以给个小星星?。

59770
来自专栏web前端教室

风继续吹&&先行者成员:王广铎(duo 二声)的作业分析,从他的作业理解“React单向数据流”

他的作业:“分页组件”React版,写的很好,主要是思路很清晰。本来是想上周日视频课程直播的时候讲一下了,现在只能是放在文章中大概的说说了。先看截图, ? 很...

20980
来自专栏我就是马云飞

View的事件拦截机制浅析

为什么要去分析view的事件 记得上周刚立的flag就是关于view的事件机制。那现在我来说说我对view的感受。关于view的事件,百度google一搜。一批...

18260
来自专栏AhDung

【C#】组件发布:MessageTip,轻快型消息提示窗

原文和网盘demo我就不更新了,项目已开源到如下几处,有兴趣的朋友请关注,欢迎fork/push/pull:

11020
来自专栏练小习的专栏

从前端界面开发谈微信小程序体验

这段时间有幸加入了一个关于微信小程序的项目开发组,从无到有的根据文档自行学习了小程序的开发过程。

17.1K150

扫码关注云+社区

领取腾讯云代金券