专栏首页程序员的诗和远方写个小编辑器娱乐自己

写个小编辑器娱乐自己

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

相关文章

  • React Native 解决 Navigator.pop 无法传参数

    紧接着上一篇文章 React Native 中实现二维码扫描 当时扫是扫了,东西是出来了,但是并没有做界面返回,而自带的 navigator.pop 方法又没...

    Bob.Chen
  • Canvas基础-粒子动画Part2

    紧接上一篇文章 Canvas基础-粒子动画Part1 其实这篇早在一个星期之前就应该发了,无奈事情太多,而且我又跑去写微信公众号了。 粒子动起来 有了上一...

    Bob.Chen
  • 人人都可以学的人工智能:TensorFlow 入门例子

    这是用 TensorFlow 来识别手写数字的官方经典入门例子,数据都是已经处理过准备好了的,但是只到计算准确度概率那就停了,缺少拿实际图片运用的例子,初学者...

    Bob.Chen
  • 前端开发:给组件title属性的赋值设置成变量的方法

    在前端开发过程中,有很多时候会公用组件或者模块,在复用的时候需要根据不同的使用场景进行不同的操作处理,尤其是一些提示类的界面模块,就需要根据type类型来进行区...

    三掌柜
  • React Native 解决 Navigator.pop 无法传参数

    紧接着上一篇文章 React Native 中实现二维码扫描 当时扫是扫了,东西是出来了,但是并没有做界面返回,而自带的 navigator.pop 方法又没...

    Bob.Chen
  • java中Lambda表达式的使用

    Lambda 表达式是一种匿名函数,简单地说,它是没有声明的方法,也即没有访问修饰符、返回值声明和名字。

    大道七哥
  • Vue + SpringCloud前后端分离项目3个月项目实战经验分享

    去年项目组的项目是SpringMVC+Dwz实现的,由于业务增加,这样的一个SpringMVC项目已经很臃肿,一处出现问题,就导致服务崩溃,太不灵活。今年年初,...

    不安分的猿人
  • 非规则浮点数和规则浮点数

    为了更好理解本文内容,可先行阅读《量化、数据类型、上溢和下溢》中内容。这里依旧将浮点数看作是一种量化方式,将连续的不可数的集合映射到有限的集合上去。本文...

    sea-wind
  • .NET Core采用的全新配置系统[10]: 配置的同步机制是如何实现的?

    配置的同步涉及到两个方面:第一,对原始的配置文件实施监控并在其发生变化之后从新加载配置;第二,配置重新加载之后及时通知应用程序进而使后者能够使用最新的配置。要了...

    蒋金楠
  • 结合游戏开发与人工智能研究,游戏大厂 Ubisoft 成立AI研发部门

    近年来,人工智能(AI)在许多方面都取得了重大进展,但在“游戏”方面似乎还是略逊一筹,过去除了剧情,观看角色 AI 的奇怪举动也成为人们游玩的乐趣之一,但是在游...

    企鹅号小编

扫码关注云+社区

领取腾讯云代金券