掘金风格的 markdown编辑器

  1. 分上下两个模块
    1. 上面的标题栏和右侧的发布栏
  2. 内容区域分为左右2个区块
    1. 左侧为 markdown文本，用 textarea展示
    2. 右侧为 解析 markdown为 html的预览区
  3. 核心技术点
    1. 键盘事件的监听
    2. makdown格式的解析

markdown编辑器.jpg

解析 markdow用到的 npm

  1. react-keyboard-event-handler
  2. react-markdown
  4. react-mathjax
  5. react-syntax-highlighter
  7. react-zmage
  8. remark-math

Header

头部分左右两栏

  • 左侧是大标题
  • 右侧是发布的相关操作 ```jsx import React, { useState } from ‘react’; import PropTypes from ‘prop-types’; import { Row, Col, Input, Button } from ‘antd’;

Header.propTypes = {

};

function Header(props) { const { title = ‘’, onChange } = props; const [loading, setLoading] = useState(false);

function onSubmit() { setLoading(true) }

return ( 

  1.   <Col span={6}>
  3.     <Publish />
  5.     <Button
  6.       loading={loading}
  7.       type="primary"
  8.       onClick={onSubmit}
  9.     >
  10.       保存草稿
  11.     </Button>
  12.     <DropDownList />
  13.   </Col>
  14. </Row>

); }

export default Header;

  3. <a name="OgY2v"></a>
  4. ### 发布文章
  5. ![image.png](https://cdn.nlark.com/yuque/0/2021/png/112859/1625034193249-023aa7d1-38a7-4619-9fa3-0e140366ee40.png#clientId=u7ad0db9d-ec1e-4&from=paste&height=212&id=axDd2&originHeight=636&originWidth=446&originalType=binary&ratio=3&size=185222&status=done&style=none&taskId=ud3505ce7-4104-4a1b-b2c7-789b740d8aa&width=148.66666666666666)
  6. ```jsx
  8. function Publish() {
  10.   function Content() {
  11.     return (
  12.       <div>
  13.         {
  14.           categories?.map(category => (
  15.             <CheckableTag
  16.               key={category.en_name}
  17.               checked={category.id === selectedCategory}
  18.               onChange={selected => checkCategorysHandle(category)}
  19.             >
  20.               {category.name}
  21.             </CheckableTag>
  22.           ))}
  24.         <h4>标签</h4>
  25.         {
  26.           tags?.map(tag => (
  27.             <CheckableTag
  28.               key={tag.en_name}
  29.               checked={tag.id === selectedTag}
  30.               onChange={() => checkTagHandle(tag)}
  31.             >
  32.               {tag.name}
  33.             </CheckableTag>
  34.           ))}
  36.         <h4>文章封面图</h4>
  37.         <AliOssUpload type="click" returnImageUrl={returnCoverImageUrl} />
  38.         <Button type="primary" onClick={onPublish}>
  39.           发布文章
  40.         </Button>
  41.       </div>
  42.     )
  43.   }
  45.   return (
  46.     <Popover
  47.       placement="bottom"
  48.       title={发布文章}
  49.       overlayStyle={{ width: 300 }}
  50.       trigger="click"
  51.       content={Content()}
  52.     >
  53.       <Button type="link">
  54.         <CaretDownOutlined /> 发布
  55.       </Button>
  56.     </Popover>
  57.   )
  58. }
  60. export default Publish;

markdown语法提示

image.png

  1. import { QuestionCircleOutlined } from '@ant-design/icons'
  3. <Popover
  4.   placement="bottom"
  5.   title="快捷键"
  6.   overlayStyle={{ width: 400 }}
  7.   content={<ShortCutKey />}
  8. >
  9.   <QuestionCircleOutlined />
  10. </Popover>
  13. function ShortCutKey() {
  14.   const columns = [
  15.     {
  16.       title: 'Markdown',
  17.       dataIndex: 'markdown',
  18.       key: 'markdown',
  19.     },
  20.     {
  21.       title: '说明',
  22.       dataIndex: 'explain',
  23.       key: 'explain',
  24.     },
  25.     {
  26.       title: '快捷键',
  27.       dataIndex: 'keybord',
  28.       key: 'keybord',
  29.     },
  30.   ]
  31.   const dataSource = [
  32.     {
  33.       markdown: '## 标题',
  34.       explain: 'H2',
  35.       keybord: 'Ctrl / ⌘ + H',
  36.     },
  37.     {
  38.       markdown: '**文本**',
  39.       explain: '加粗',
  40.       keybord: 'Ctrl / ⌘ + B',
  41.     },
  42.     {
  43.       markdown: '*文本*',
  44.       explain: '斜体',
  45.       keybord: 'Ctrl / ⌘ + Alt + I',
  46.     },
  47.     {
  48.       markdown: '[描述](链接)',
  49.       explain: '链接',
  50.       keybord: 'Ctrl / ⌘ + L',
  51.     },
  52.     {
  53.       markdown: '![描述](链接)',
  54.       explain: '插入图片',
  55.       keybord: 'Ctrl / ⌘ + I',
  56.     },
  57.     {
  58.       markdown: '> 引用',
  59.       explain: '引用',
  60.       keybord: 'Ctrl / ⌘ + Q',
  61.     },
  62.     {
  63.       markdown: '```code```',
  64.       explain: '代码块',
  65.       keybord: 'Ctrl / ⌘ + Alt + C',
  66.     },
  67.     {
  68.       markdown: '`code`',
  69.       explain: '行代码块',
  70.       keybord: 'Ctrl / ⌘ + Alt + K',
  71.     },
  72.     {
  73.       markdown: '省略',
  74.       explain: '表格',
  75.       keybord: 'Ctrl / ⌘ + Alt + T',
  76.     },
  77.   ]
  78.   return (
  79.     <Table
  80.       columns={columns}
  81.       dataSource={dataSource}
  82.       pagination={false}
  83.       size="small"
  84.     />
  85.   )
  86. }
  88. export default memo(ShortCutKey);

DropDownList

  1. import React from 'react';
  2. import { Avatar } from 'antd';
  3. import Draft from './Draft'
  5. function DropdownList({ avatar }) {
  7.   const dataSource = (
  8.     <Menu className="mt-20">
  9.       <Menu.Item key="0">
  10.         <a onClick={() => history.push('/write/create')}>写文章</a>
  11.       </Menu.Item>
  12.       <Menu.Item key="1">
  13.         <Draft />
  14.       </Menu.Item>
  15.       <Menu.Divider />
  16.       <Menu.Item key="3">
  17.         <Link to="/">回到首页</Link>
  18.       </Menu.Item>
  19.     </Menu>
  20.   )
  22.   const avatarAttr = {
  23.     size: 'default',
  24.     src: avatar,
  25.   }
  27.   return (
  28.     <Dropdown overlay={dataSource} trigger={['click']}>
  29.       <a onClick={e => e.preventDefault()}>
  30.         用户头像
  31.         <Avatar {...avatarAttr} icon={<UserOutlined />} />
  32.       </a>
  33.     </Dropdown>
  34.   )
  35. }
  37. export default DropdownList;

Draft

image.png

  1. import React, { useState } from 'react';
  2. function Draft() {
  3.   const [visible, setVisible] = useState(false);
  5.   function onClose() {
  6.     setVisible(false)
  7.   }
  9.   function onClick() {
  10.     history.push(`/draft/${item.id}`)
  11.     onClose()
  12.   }
  14.   return (
  15.     <>
  16.       <a onClick={() => setVisible(true)}>草稿箱</a>
  17.       <Drawer 
  18.       title="草稿箱" 
  19.       onClose={onClose} 
  20.       visible={visible}
  21.     >
  22.       <List
  23.         itemLayout="horizontal"
  24.         dataSource={[]}
  25.         renderItem={item => (
  26.           <List.Item>
  27.             <List.Item.Meta
  28.               title={
  29.                 <a onClick={onClick}>
  30.                   {item.title}
  31.                   {item.is_publish ? (
  32.                     <Tag color="success" className="ml-10">
  33.                       已发表
  34.                     </Tag>
  35.                   ) : null}
  36.                 </a>
  37.               }
  38.               description={`${moment(item.updated_at).format( 'YYYY-MM-DD HH:mm')}`}
  39.             />
  40.           </List.Item>
  41.         )}
  42.       />
  43.     </Drawer>
  44.     </>
  45.   )
  46. }
  48. export default Draft;

Content

  1. <Row>
  2.   <Col span={12}>
  3.     <MarkdownText />
  4.   </Col>
  5.   <Col span={12}>
  6.   <MarkdownHtml />
  7.   </Col>
  8. </Row>

MarkdownText

  1. import KeyboardEventHandler from 'react-keyboard-event-handler';
  2. import UploadImage from './UploadImage';
  3. import styled from './index.module.less';
  5. function setMarkdown(el, data, start, num) {
  6.   const { selectionStart, selectionEnd } = el
  7.   el.focus()
  8.   el.setSelectionRange(selectionStart + start, selectionStart + start + num)
  9. }
  11. function MarkdownText() {
  13.   const handleKey = [
  14.     'ctrl+b',
  15.     'ctrl+l',
  16.     'ctrl+h',
  17.     'ctrl+alt+t',
  18.     'ctrl+i',
  19.     'ctrl+alt+i',
  20.     'ctrl+alt+c',
  21.     'ctrl+alt+k',
  22.     'ctrl+q',
  23.   ]
  25.   function onKeyChange(key, e) {
  26.     const { target, preventDefault } = e;
  27.     preventDefault();
  29.     const addHeading = el => {
  30.       let title = '## 标题'
  31.       let start = 3
  32.       if (markdown) {
  33.         title = '\n## 标题'
  34.         start = 4
  35.       }
  36.       setMarkdown(el, title, start, 2)
  37.     }
  39.     const addBold = el => {
  40.       setMarkdown(el, '**加粗**', 2, 2)
  41.     }
  42.     const addItalic = el => {
  43.       setMarkdown(el, '*斜体*', 1, 2)
  44.     }
  45.     const addImage = el => {
  46.       setMarkdown(el, '![描述](链接)', 6, 2)
  47.     }
  48.     const addLink = el => {
  49.       setMarkdown(el, '[描述](链接)', 5, 2)
  50.     }
  51.     const addCode = el => {
  52.       setMarkdown(el, '\n```\n```', 4, 0)
  53.     }
  54.     const addLineCode = el => {
  55.       setMarkdown(el, '``', 1, 0)
  56.     }
  57.     const addQuote = el => {
  58.       setMarkdown(el, '\n> 引用', 3, 2)
  59.     }
  60.     const addTable = el => {
  61.       setMarkdown(
  62.         el,
  63.         '\n\n| Col1 | Col2 | Col3 |\n| :----: | :----: | :----: |\n| field1 | field2 | field3 |\n',
  64.         4,
  65.         4,
  66.       )
  67.     }
  69.     return {
  70.       'ctrl+b': addBold(target),
  71.       'ctrl+h': addHeading(target),
  72.       'ctrl+l': addLink(target),
  73.       'ctrl+alt+t': addTable(target),
  74.       'ctrl+i': addImage(target),
  75.       'ctrl+q': addQuote(target),
  76.       'ctrl+alt+i': addItalic(target),
  77.       'ctrl+alt+c': addCode(target),
  78.       'ctrl+alt+k': addLineCode(target),
  79.     }[key];
  80.   }
  82.   return (
  83.     <div className={styled.textareaWrap}>
  84.       <UploadImage />
  85.       <KeyboardEventHandler
  86.         onKeyEvent={onKeyChange}
  87.         handleKeys={handleKey}
  88.       >
  89.         <TextArea
  90.           className={styled.textarea}
  91.           // selectiontext=""
  92.           placeholder="请输入Markdown"
  93.           rows={3}
  94.           onChange={markdownChange}
  95.           value={markdown}
  96.           spellCheck="false"
  97.           autoComplete="off"
  98.           autoCapitalize="off"
  99.           autoCorrect="off"
  100.           autoSize
  101.         />
  102.       </KeyboardEventHandler>
  103.     </div>
  104.   )
  105. }
  107. export default MarkdownText;

设置 textarea样式, index.module.less

  1. .textareaWrap {
  2.   min-height: calc(100vh - 56px);
  3.   overflow-y: auto;
  4.   border-right: 1px solid #ddd;
  5. }
  7. .textarea {
  8.   padding: 16px;
  9.   outline: none;
  10.   resize: none;
  11.   border-color: transparent;           
  12.   min-heihgt: calc(100vh - 60px);
  13.   scrollbar-width: none;
  15.   &::-webkit-scrollbar {
  16.     width: 10px;
  17.     height: 4px;
  18.     display: none;
  19.   }
  20.   &::-webkit-scrollbar-thumb {
  21.     border-radius: 4px;
  22.     background: #cccccc;
  23.   }
  24.   &::-webkit-scrollbar-track {
  25.     border-radius: 0;
  26.     background: #ffffff;
  27.   }
  28. }

UploadImage

markdown右上角的插入图片
image.png

  1. import React, { useState } from 'react';
  2. import AliYunOss from '@components/AliyunOss';
  3. import { PictureOutlined } from from '@ant-design/icons';
  5. function UploadImage() {
  6.   const [visible, setVisible] = useState(false);
  7.   const [image, setImage] = useState('');
  9.   function onClose() {
  10.     setImage('')
  11.     setVisible(false)
  12.   }
  14.   const returnImage = imageUrl => {
  15.     setInsertImages([...insertImages, imageUrl])
  16.   }
  18.   const returnCoverImageUrl = imageUrl => {
  19.     setCoverImageUrl(imageUrl)
  20.   }
  22.   function inputChange(e) {
  23.     setImage(e.target.value)
  24.   }
  26.   function onOk() {
  28.     onClose();
  29.   }
  31.   return (
  32.     <>
  33.       <Button type="link" onClick={() => setVisible(true) }>
  34.         <PictureOutlined />
  35.       </Button>
  37.       <Modal
  38.         title="插入图片"
  39.         visible={visible}
  40.         width={560}
  41.         closable={false}
  42.         destroyOnClose={true}
  43.         onCancel={onClose}
  44.         onOk={onOk}
  45.       >
  46.         <AliYunOss type="drag" value={image} />
  47.         <p className="text-center mb8">或</p>
  48.         <Input
  49.           placeholder="输入网络图片地址"
  50.           size="large"
  51.           prefix={<PictureOutlined />}
  52.           value={image}
  53.           onChange={inputChange}
  54.         />
  55.       </Modal>
  56.     </>
  57.   )
  58. }
  60. export default UploadImage;

AliYunSso

  1. import React, { useState } from 'react'
  2. import { Upload, message } from 'antd'
  3. import OSS from 'ali-oss'
  4. import { PlusOutlined, LoadingOutlined, InboxOutlined } from '@ant-design/icons'
  5. import moment from 'moment'
  6. import { accessKeySecret, accessKeyId, bucket } from '@config'
  8. const { Dragger } = Upload
  10. const client = new OSS({
  11.   region: 'oss-cn-shanghai',
  12.   accessKeyId,
  13.   accessKeySecret,
  14.   bucket,
  15.   secure: true,
  16. })
  18. const UploadToOss = (path, file) => {
  19.   return new Promise((resolve, reject) => {
  20.     client
  21.       .put(path, file)
  22.       .then(data => {
  23.         resolve(data)
  24.       })
  25.       .catch(error => {
  26.         reject(error)
  27.       })
  28.   })
  29. }
  31. const filePath = file => {
  32.   // 上传文件路径和名称
  33.   return `${moment().format('YYYYMMDD')}/${file.uid}.${file.type.split('/')[1]}`
  34. }
  36. function AliYunSso({ type, returnImageUrl }) {
  37.   const [loading, setLoadding] = useState(false)
  38.   const [imageUrl, setImageUrl] = useState(null)
  40.   async function beforeUpload(file) {
  41.     const imageType = ['image/png', 'image/jpeg', 'image/gif'].includes(file.type);
  42.     if (!imageType) {
  43.       message.error('只能上传JPG/PNG格式的图片');
  44.       return;
  45.     }
  47.     const maxSize = file.size / 1024 / 1024 < 4;
  48.     if (!maxSize) {
  49.       message.error('图片必须小于4M')
  50.     }
  52.     const res = await UploadToOss(filePath(file), file);
  53.     if (res) {
  54.       setImageUrl(res.url)
  55.       returnImageUrl(res.url)
  56.     }
  57.     return imageType && maxSize;
  58.   }
  60.   const onChange = info => {
  61.     if (info.file.status === 'uploading') {
  62.       setLoadding(true)
  63.     }
  64.     if (info.file.status === 'done') {
  65.       console.log(info)
  66.     }
  67.   }
  69.   if (type === 'drag') {
  70.     return (
  71.       <Dragger
  72.         name="拖拽上传"
  73.         onChange={onChange}
  74.         // multiple= {true}
  75.         beforeUpload={beforeUpload}
  76.       >
  77.         <p className="ant-upload-drag-icon">
  78.           <InboxOutlined />
  79.         </p>
  80.         <p className="ant-upload-text">点击或者拖拽图片到这个区域</p>
  81.       </Dragger>
  82.     )
  83.   }
  85.   return (
  86.     <Upload
  87.       name="上传图片"
  88.       listType="picture-card"
  89.       className="avatar-uploader"
  90.       style={{ width: 128, height: 128 }}
  91.       showUploadList={false}
  92.       beforeUpload={beforeUpload}
  93.       onChange={onChange}
  94.     >
  95.       {
  96.         imageUrl
  97.           ? <img src={imageUrl} alt="" style={{ width: '100%' }} />
  98.           : <Button>{loading ? <LoadingOutlined /> : <PlusOutlined />} 上传</Button>
  99.       }
  100.     </Upload>
  101.   )
  102. }
  104. export default AliYunSso;

MarkdownHtml

  1. import MathJax from 'react-mathjax'
  2. import Markdown from '@components/Markdown'
  4. function MarkdownHtml() {
  6.   return (
  7.     <div style={{ padding: 16 }}>
  8.       <MathJax.Provider input="tex">
  9.         <Markdown children={markdown} />
  10.       </MathJax.Provider>
  11.     </div>
  12.   )
  13. }
  15. export default MarkdownHtml;