Решение для редактирования и рендеринга React Markdown

React.js

предисловие

Поле редактирования форматированного текста, которое я использовал ранее, имеет очень беспорядочный формат: макет написанной статьи нелегко увидеть, а подсветка кода не была найдена подходящей. Поэтому я думал об изменении форматированного текста на уценку.

Выбор плагина

Нам нужно писать статьи и читать статьи, поэтому у нас должны быть плагины редактора уценки и плагины рендеринга уценки. На github есть много плагинов, в конце концов я остановился на одном:for-editorа такжеreact-markdown, первый для записи, а второй для загрузки.

После выбора плагина начнем использовать его в нашем проекте!

установка и использование для редактора

Установить

 npm install for-editor --save

использовать

код показывает, как показано ниже:

import React from 'react'
import Editor from 'for-editor'

class WriteBlog extends React.Component{
  constructor(props){
    super(props)
    this.state = {
      editorValue:'',
      imageUrl:''
    }
  }
  handleChange(value){
    this.setState({
      editorValue:value
    })
  }
  uploadHandler(params){
    fetch.get('getQiniuToken',{
      token:JSON.parse(Cookies.get('loginInfo')).token
    }).then(res=>{
      utils.uploadFile(params,res.data.qiniuToken).then(res=>{
        this.setState({
          imageUrl:'http://img.xuweijin.com/'+res
        })
        let str = this.state.editorValue + '![alt](http://img.xuweijin.com/'+res+')'
        this.setState({
          editorValue:str
        })
      })
    })
  }
  render(){
    return(
      <Editor className="my-editor"
                  subfield = {true}
                  preview = {true}
                  addImg = {(file) => this.uploadHandler(file)}
                  value={this.state.editorValue} onChange={(value) => this.handleChange(value)} />
    )
}

Для загрузки изображения не используется официальный метод. После успешной загрузки добавьте строку изображения в редактор вручную.

Вышеупомянутое просто вставка некоторых кодов, пожалуйста, перейдите непосредственно к конкретным параметрамдомашняя страница github для редакторовПроверить.

Как установить и использовать реакцию-уценку

Установить

npm install --save react-markdown

использовать

код показывает, как показано ниже:

import React from 'react'
import ReactMarkdown from 'react-markdown'
class BlogDetail extends React.Component{
  constructor(props){
    super(props)
    this.state = {
      articleDetail:'',
    }
  }
  render(){
    return(
      <ReactMarkdown source={this.state.articleDetail.article_content}
                                 escapeHtml={false}></ReactMarkdown>
    )
  }
}

Приведенный выше код представляет собой простую вставку кода. Чтобы узнать о конкретных параметрах конфигурации, перейдите на страницудомашняя страница github react-markdownПроверить.

Выше приведено решение уценки текста, но это не конец, мы должны добавить подсветку кода при разборе, иначе при наличии кода в нашей статье читабельность будет крайне плохой.

подсветка кода

Установите пакет плагина для подсветки кода

Мой выбор здесь — _react-syntax-highlighter_

npm install react-syntax-highlighter --save

использовать

  1. Сначала создайте новый файл CodeBlock.jsx, код выглядит следующим образом
import React, { PureComponent } from "react";
import PropTypes from "prop-types";
import { PrismLight as SyntaxHighlighter } from "react-syntax-highlighter";
// 设置高亮样式
import { xonokai } from "react-syntax-highlighter/dist/esm/styles/prism";
// 设置高亮的语言
import { jsx, javascript, sass, scss } from "react-syntax-highlighter/dist/esm/languages/prism";
class CodeBlock extends PureComponent {
  static propTypes = {
    value: PropTypes.string.isRequired,
    language: PropTypes.string
  };

  static defaultProps = {
    language: null
  };

  componentWillMount() {
    // 注册要高亮的语法，
    // 注意：如果不设置打包后供第三方使用是不起作用的
    SyntaxHighlighter.registerLanguage("jsx", jsx);
    SyntaxHighlighter.registerLanguage("javascript", javascript);
    SyntaxHighlighter.registerLanguage("js", javascript);
  }

  render() {
    const { language, value } = this.props;
    return (
      <figure className="highlight">
        <SyntaxHighlighter language={language} style={xonokai}>
          {value}
        </SyntaxHighlighter>
      </figure>
    );
  }
}
export default CodeBlock;
  1. используется при разборе

Согласно методу, предоставленному react-markdown, при разборе файла md мы обрабатываем тег кода, добавляем выделенное имя класса стиля и просто вставляем код:

import CodeBlock from '../components/CodeBlock'
class BlogDetail extends React.Component{
  constructor(props){
    super(props)
    this.state = {
      articleDetail:'',
    }
  }
  render(){
    return(
      <ReactMarkdown source={this.state.articleDetail.article_content}
                                 renderers={{
                                   code: CodeBlock
                                 }}
                                 escapeHtml={false}></ReactMarkdown>
    )
  }
}

Таким образом, мы видим, что при разборе статьи выделенный стиль появится в части кода.

Каталог статей

Когда наша статья слишком длинная, нам нужно добавить каталог статей, чтобы читатели имели обзор всего, а также читателям было удобно быстро переключаться на ту часть, которую они хотят знать, подобно самородкам.

alt

Через гитхаб наконец-то нашелmarkdown-navbarЭтот плагин хоть и не имеет большого количества звездочек, но все равно очень удобен в использовании.

установка markdown-navbar

  npm install markdown-navbar --save

использовать

Этот плагин очень удобен в использовании, вам нужно только ввести этот плагин в проект, а затем передать md файл, который необходимо разобрать, и дерево каталогов будет сгенерировано автоматически. Как правило, дерево каталогов должно быть исправлено, поэтому я использовал здесь компонент Anchor antd, чтобы исправить каталог с правой стороны.Код выглядит следующим образом:

import { Anchor } from 'antd';
import MarkNav from 'markdown-navbar';
import 'markdown-navbar/dist/navbar.css';
class BlogDetail extends React.Component{
  constructor(props){
    super(props)
    this.state = {
      articleDetail:'',
    }
  }
  render(){
    return(
      <Anchor>
                <div className="markNav-title">文章目录</div>
                <MarkNav
                  className="article-menu"
                  source={this.state.articleDetail.article_content}
                  headingTopOffset={80}
                />
       </Anchor>
    )
  }
}

Вот простая вставка кода, перейдите к конкретной конфигурациидомашняя страница уценки githubУбедитесь сами.

В заключение

Выше приведено общее решение для редактирования и рендеринга синтаксиса уценки реакции. Вставьте визуализированное изображение статьи:

alt

Вы можете видеть, что визуализированный стиль довольно аккуратный, и все готово!

Я впервые пишу такой небольшой роман, который в основном представляет собой текущий отчет. Большое спасибо за то, что смогли увидеть конец. Наконец, вы можете прийти ко мне.Домашняя страницавзаимодействие с сообщением~

Категории