react-markdown-editor 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
react-markdown-editor 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
react-markdown-editor 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」 !
react-markdown-editor 获得 2020 年度 OSC 中国开源项目评选「最佳人气项目」「最积极运营项目」 !
react-markdown-editor 获得 2020 年度 OSC 中国开源项目评选「最积极运营项目」 !
授权协议 MIT
操作系统 跨平台
软件类型 开源软件
开源组织
地区 国产
投 递 者 小弟调调
适用人群 未知
收录时间 2019-04-09

软件简介

react-markdown-editor 是 React.js 和 TypeScript 实现的 Markdown 编辑器。

Markdown 编辑器带预览功能

安装

npm i @uiw/react-markdown-editor

文档

文档实例预览:demo preview (🇨🇳中国镜像网站)

使用

import MarkdownEditor from '@uiw/react-markdown-editor';
import React from 'react';
import ReactDOM from 'react-dom';

const Dome = () => (
  <MarkdownEditor
    value={this.state.markdown}
    onChange={this.updateMarkdown}
  />
);

controlled usage

import MarkdownEditor from '@uiw/react-markdown-editor';
import React from 'react';
import ReactDOM from 'react-dom';


class App extends React.Component {
  constructor() {
    super();
    this.state = {
      markdown: '# This is a H1  \n## This is a H2  \n###### This is a H6',
    };
    this.updateMarkdown = this.updateMarkdown.bind(this);
  }

  updateMarkdown(editor, data, value) {
    this.setState({ markdown: value });
  }

  render() {
    return (
      <MarkdownEditor
        value={this.state.markdown}
        onChange={this.updateMarkdown}
      />
    );
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('app')
);

参数

  • value (string) - 将转换为 html 的原始 markdown 字符串 (必填参数)
  • visble (boolean) - 显示将转换为html的预览。
  • toolbars (array) - 工具栏显示设置。
  • onChange (function(editor: IInstance, data: CodeMirror.EditorChange, value: string)) - 在进行更改时调用 (必填参数)

更多参数设置查看下面网址

开发模式

npm run dev
npm run type-check:watch
npm run doc
展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论 (0)

加载中
更多评论
发表于服务端专区
2019/04/11 09:31

Markdown 编辑器 1.1.7 发布,新增全屏模式

react-markdown-editor 是一个基于 React 的 Markdown编辑器 组件。 新版更新内容: 添加全屏模式. 1ee6026 修改markdown预览样式. ba3fc54 修改编译脚本命令 b62c70e 修复工具栏按钮类型导致Form表单提交问题. c56868f 添加 toolbarsMode 参数设置模式功能展示. 7bfc8ce

7
15
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
发表了博客
2018/06/12 16:13

Editor markdown编辑器

代码示例网址:http://pandao.github.io/editor.md/examples/index.html 引入文件 <link rel="stylesheet" href="/editor.md-master/css/editormd.css" /> <script src="/editor.md-master/editormd.min.js"></script> html <div id="editormd"> <textarea style="display:none;" name="Content"></textarea> </div> js var editor; editor = editormd("editormd", { width : "99%",...

0
0
2017/12/29 22:43

Markdown 的 React components

Renders Markdown as pure React components. https://github.com/EasySpringBoot/react-markdown Installing npm install --save react-markdown Basic usage const React = require('react') const ReactDOM = require('react-dom') const ReactMarkdown = require('react-markdown') const input = '# This is a header\n\nAnd this is a paragraph' ReactDOM.render( <ReactMarkdown source={input} />, document.ge...

0
0
发表于大前端专区
2018/05/14 18:05

React 图片剪切(react-avatar-editor)

react中剪切图片主要用到react-avatar-editor。用之前要用npm安装一下npm install react-avatar-editor 这篇博客主要是为下一篇博客(React仿微信上传图片预览(可剪切))打下基础的。 主要代码如下: <AvatarEditor ref={this.setEditorRef} image={this.state.originImg} width={400} height={400} border={100} color={[248, 249, 250, 0.8]} borderRadius={200} scale={parseFloat(this.state.scale)} style={{ margin: '...

0
3
发表了博客
2020/08/29 14:07

react解析markdown文件

当当当又get到了一个新技能,使用react-markdown来直接解析markdown文件(咳咳,小菜鸟的自娱自乐) 项目中遇到了一个API的那种展示方式,类似于入门手册啥的那种,如果是一个个调用接口,改样式很复杂,所以用了直接解析后台给的markdown文件 首先我们需要安装一个react的网页语法高亮插件,(我最初并没有安装这个,结果导致解析文件是出来了,但是样式还挺丑的) npm install react-syntax-highlighter --save //相关介绍在...

0
0
发表于大前端专区
2019/01/14 16:05

react 引入Markdown编辑器

### 安装 for-editor ``` npm install for-editor --save ``` ### 引入 for-editor ``` import Editor from 'for-editor' ``` ### 设置state ``` class NewArticle extends Component { constructor(props) { super(props); this.state = { value: '' }; } } handleChange(value) { this.setState({ value }) } render() { } ``` ![](https://oscimg.oschina.net/oscnet/558e0d66d2e142105db6dcb344979f67250.jpg)...

0
0
发表了博客
2018/08/17 02:42

[React] Build a slide deck with mdx-deck using Markdown + React

In this lesson we'll use mdx-deck to create a slide deck using Markdown and React. We'll look at adding multiple slides, code snippets, and importing React components. We'll also leverage the mdx-deck CLI for our development environment and building for production. Additional Resources: https://egghead.io/lessons/react-create-and-import-react-components-with-markdown-using-mdxc https://github.c...

0
0
发表了博客
2018/06/26 20:14

React后台管理系统-rich-editor组件

1.Simditor组件的github地址:https://github.com/mycolorway/simditor 网址:http://simditor.tower.im/ 2.在util里边新建rich-editor文件夹,里边新建index.jsx import React from 'react'; import Simditor from 'simditor'; import 'simditor/styles/simditor.scss'; import './index.scss'; // 通用的富文本编辑器,依赖jquery class RichEditor extends React.Component{ constructor(props){ super(props); } componentD...

0
0
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
暂无内容
0 评论
16 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部