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编辑器的编写,可以到浏览器中预览一下结果了。

 

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有资源及文章均来源于网络及用户分享或为本站原创,仅限用于学习和研究,任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » P27:后台管理系统开发06-Markdown编辑器制作

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们