我又换回了Markdown了

为什么换回了Markdown#

我在开发的过程中有了这么一个想法，可以一键推送至微信，qq空间，知乎还有twitter，但是一个微信公众平台的富文本编辑器的兼容就让我绝望了，我用的react-quill，跟我之前用过的wangeditor编辑器差不太多，要不是为了配合各个平台，我才懒得换呢，跟我之前用过的wangeditor差不太多，简单配置一下就可以使用。我还是决定换回Markdown，因为我发现了一个可以在线编辑online-markdown的网站可以完美兼容微信公众平台，现在我使用react-markdown。

使用react-markdown#

react-markdown是一个编译器，它可以将字符串翻译成Markdown语法。使用起来很简单：

import ReactMarkdown from 'react-markdown'

const Markdown = source => (<ReactMarkdown source={source}  />)

现在就可以在组件中使用这个markdown的组件啦。当然这个就是最简单的使用，react-markdown还有很多的配置没有加上去，比如日常写文档需要的语法高亮。

使用react-syntax-highlighter 配置语法高亮#

在没有配置之前，react-markdow的背景是灰色，当然可以自己写一个样式表去配置所有的markdown中的所有标签，那就不需要这个插件啦。

1. 安装插件

yarn add react-syntax-highligher

2. 新建codeBlock.js文件

里面提供了两种模式，Prism和hljs两种，有一点点不同的差异，大概就是样式上和markdown支持的语言上有差别，其他的就没啥了。我用的prism，下面就是我的配置内容，当然才开始比较简单的配置，所有的功能都可以自己加上去。如下:

3. 使用codeBlock文件

template这个只是react-markdown的展示型组件，使用提供的一个属性:renderers, 如下:

这个就是基本的为react-markdown的配置theme主题，我比较喜欢atom的主题，我的vscode也用的atom，所以我选了atomDrak作为我的主题啦。

4. 封装一个MarkdownEditor组件

下面介绍一下怎么在Antd的Fom组件中使用已经封装好的ReactMarkdownEditor，有很多种方法去在Antd.Form中实现双向绑定, 我个人理解就是全局始终一个form对象，v4版本中引入了Form的hooks，可以这么使用:

import Form from 'antd'

const CustomForm = () => {
  const [form] = Form.useForm()
  const { setFieldValues } = form //就是这个方法去绑定value
}

区别一下受控组件与非受控组件，textarea的value--htmlString值就是依赖于外部传入的value字段， 所以在初始化时将它映射一下，通过的组件内部的onChange事件上传value值。回到Form的双向绑定。 可以看到我实现双向绑定的做法就是form对象中的setFieldValues与getFieldValue。 作为Form.Item的children，它会有一个id字段作为props传递给后代元素。这个id值就是Form.Item中的name字段的值

这里我思考了一下，Form.Item是不是一个高阶组件呢？如果是一个高阶组件，为什么只给子组件下发了一个id字段?

如果有更好的实现双向绑定的方法可以联系我，我想了解一下更多的更秀的写法

样式覆盖问题#

同样的代码到了前台展示的时候，会遇到一个比较的扯淡的问题，那就是全局引入的样式 ，暂且叫global.css吧，这个文件就是项目全部模块样式的入口。样式覆盖了咋办呢？可以看到的是react-syctax-highlighter的样式没有做模块化，标签全部被global.css 覆盖了。

小可爱们，那就只有再写一个markdown.css 去自定义美化你的样式啦