阿八博客
  • 100000+

    文章

  • 23

    评论

  • 20

    友链

  • 最近新加了很多技术文章,大家多来逛逛吧~~~~
  • 喜欢这个网站的朋友可以加一下QQ群,我们一起交流技术。

用React实现一个掘金Style的文章编辑器

欢迎来到阿八个人博客网站。本 阿八个人博客 网站提供最新的站长新闻,各种互联网资讯。 喜欢本站的朋友可以收藏本站,或者加QQ:我们大家一起来交流技术! URL链接:https://www.abboke.com/jsh/2019/0924/115093.html

前言

我是一个掘金重度用户,不仅经常在掘金上挖掘含金量高的文章,偶尔还在掘金上创作技术文章
相信读者们也对掘金非常满意,尤其是它的文章编辑器,不仅支持Markdown编辑,而且还支持代码高亮、分屏预览、自动保存等等
本文将用React+CodeMirror+Showdown实现一个类似于掘金编辑器的单页应用

动图效果

先不说那么多,先上动图效果吧

布局

下面是掘金文章编辑器的布局

这里的React.FCFunctionComponent的简写,表示一个函数型组件
在组件中返回的是jsx中的模版内容
style.xxx是React独有的引用样式的一种方式,即样式封装在className中,在React组件中直接通过className来引用,就可以将其涵盖的样式(包括伪类)“继承”过来

然后,我们在样式文件Demo.scss中输入以下样式内容

顶部标题输入框

我们需要在顶部加入标题输入框
classNametopBar的div标签替换为下面内容
其中Inputantd中的组件

Demo.scss中加入以下内容

左侧Markdown编辑器

我们用很受欢迎的CodeMirror来做Markdown编辑器支持
在React中我们引用react-codemirror2封装好的第三方封库

我们更改一下Demo.tsx为以下内容

在这里,我们引用了CodeMirror中Markdown的样式,然后在代码中引用了UnControlled为CodeMirror组件,并加入相应的配置
另外,由于第三方组件是将.CodeMirro写死为height: 300px,我们需要手动将该高度调整为我们需要的高度,用了document.querySelector以及$el.setAttribute这两个方法(见以上代码)

Demo.scss引入CodeMirror的CSS样式,内容如下

右侧预览

这次我们将用showdown来做预览模块

这次我们还是首先改造一下Demo.tsx
加入一部分引入逻辑和监听函数

其中,我们在CodeMirror中加入了onContentChange回调,每一次Markdown中内容更新时,会利用showdown来生成HTML代码,并加入到#contentinnerHTML
这样,就可以实时预览编辑的内容了

另外,我们还需要自定义一下预览模块的CSS内容,我们在Demo.scss中加入以下内容

这样,我们就可以在左边编辑Markdown的时候右边预览跟着一起实时渲染了

底部

底部相对来说比较简单,就是往里填充内容就可以了

Demo.tsx的footer部分分别填入如下内容

Markdown和预览滑动联动

编辑功能做好了,但是我们想让Markdown编辑器和右边的预览同步

Demo.tsx中加入一个函数,挂在CodeMirror组件上

总结

这样,我们就实现了一个简易的掘金风格的文章编辑器
当然,掘金编辑器还有很多功能(例如自动保存、展开收缩、字数统计等等),这里只实现了一部分主要功能

本文里实现的文章编辑器是我的新开源项目ArtiPub(意为Article Publisher)其中一部分
该项目旨在解决文章发布管理困难的问题,希望实现多平台文章发布,现正在不断开发中
感兴趣的可以关注一下,加我微信tikazyq1或扫下方二维码注明ArtiPub加入交流群

本文编辑器源码: https://github.com/crawlab-te...ArtiPub Github: https://github.com/crawlab-te...

<p align="center">

<img src="/uploads/allimg/190924/1012111425-0.jpg" height="360">

</p>

本篇文章由一文多发平台ArtiPub自动发布

相关文章

暂住......别动,不想说点什么吗?
  • 全部评论(0
    还没有评论,快来抢沙发吧!