P27：后台管理系统开发06-Markdown编辑器制作

界面制作好以后，就可以自己制作一个 Markdown 编辑器，这里我设计的也没那么麻烦，只要支持Markdown语法的编写，并且能实时预览就可以。

声明对应的 useState

在function的头部直接声明对应的useState,代码如下(为了以后方便，我们在这里把所有的 useState 都声明出来)：

const [articleId,setArticleId] = useState(0)  // 文章的 ID，如果是 0 说明是新增加，如果不是 0，说明是修改
const [articleTitle,setArticleTitle] = useState('')   //文章标题
const [articleContent , setArticleContent] = useState('')  //markdown 的编辑内容
const [markdownContent, setMarkdownContent] = useState('预览内容') //html 内容
const [introducemd,setIntroducemd] = useState()            //简介的 markdown 内容
const [introducehtml,setIntroducehtml] = useState('等待编辑') //简介的 html 内容
const [showDate,setShowDate] = useState()   //发布日期
const [updateDate,setUpdateDate] = useState() //修改日志的日期
const [typeInfo ,setTypeInfo] = useState([]) // 文章类别信息
const [selectedType,setSelectType] = useState(1) //选择的文章类别

设置 marked

声明完成后需要对 marked 进行基本的设置，这些设置我在之前的教程笔记中已经都讲过，这里就直接给出代码了。

marked.setOptions({
    renderer: marked.Renderer(),
    gfm: true,
    pedantic: false,
    sanitize: false,
    tables: true,
    breaks: false,
    smartLists: true,
    smartypants: false,
});

编写实时预览对应的方法

实现实时预览非常简单，写两个对应的方法，在onChange事件触发时执行就可以。方法体也只是用marked进行简单的转换，当然对应的 CSS 是我们对应好的。

const changeContent = (e)=>{
    setArticleContent(e.target.value)
    let html=marked(e.target.value)
    setMarkdownContent(html)
}

const changeIntroduce = (e)=>{
    setIntroducemd(e.target.value)
    let html=marked(e.target.value)
    setIntroducehtml(html)
}

编写 onChange 相应事件

<TextArea
    value={articleContent} 
  className="markdown-content" 
  rows={35}  
  onChange={changeContent} 
  onPressEnter={changeContent}
  placeholder="文章内容"
  />
  <div 
      className="show-html"
      dangerouslySetInnerHTML = {{__html:markdownContent}} >

  </div>

<TextArea 
      rows={4} 
      value={introducemd}  
      onChange={changeIntroduce} 
      onPressEnter={changeIntroduce}
      placeholder="文章简介"
  />
<div 
    className="introduce-html"
    dangerouslySetInnerHTML = {{__html:'文章简介：'+introducehtml}} >
</div>

这样就完成了Markdown编辑器的编写，可以到浏览器中预览一下结果了。

以上关于P27：后台管理系统开发06-Markdown编辑器制作的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。