用React实现一个掘金Style的文章编辑器
欢迎来到阿八个人博客网站。本 阿八个人博客 网站提供最新的站长新闻,各种互联网资讯。 喜欢本站的朋友可以收藏本站,或者加QQ:我们大家一起来交流技术! URL链接:https://www.abboke.com/jsh/2019/0924/115093.html
前言
我是一个掘金重度用户,不仅经常在掘金上挖掘含金量高的文章,偶尔还在掘金上创作技术文章
相信读者们也对掘金非常满意,尤其是它的文章编辑器,不仅支持Markdown编辑,而且还支持代码高亮、分屏预览、自动保存等等
本文将用React+CodeMirror+Showdown实现一个类似于掘金编辑器的单页应用
动图效果
先不说那么多,先上动图效果吧
布局
下面是掘金文章编辑器的布局
这里的 然后,我们在样式文件React.FC
是FunctionComponent
的简写,表示一个函数型组件
在组件中返回的是jsx
中的模版内容style.xxx
是React独有的引用样式的一种方式,即样式封装在className
中,在React组件中直接通过className
来引用,就可以将其涵盖的样式(包括伪类)“继承”过来Demo.scss
中输入以下样式内容
顶部标题输入框
我们需要在顶部加入标题输入框
将className
为topBar
的div标签替换为下面内容
其中Input
是antd
中的组件
在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代码,并加入到#content
的innerHTML
中
这样,就可以实时预览编辑的内容了
另外,我们还需要自定义一下预览模块的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自动发布