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

软件简介

md-editor 带有预览功能的简单 Markdown 编辑器,使用 React.js 和 TypeScript 实现。 提供具有语法突出显示,自动按需懒加载 prismjs 的 187 种语言高亮的简单 Markdown 编辑器。 这基于 textarea 封装,因此它不依赖于任何现代代码编辑器,如 Acs,CodeMirror,Monaco 等,同时支持工具栏高度定制。

特征

  • 📑 通过按Tab键缩进行或选定的文本,并使用可自定义的缩进。
  • ♻️ 基于 textarea 封装,不依赖于任何现代代码编辑器。
  • 🚧 不依赖 uiw 中的任何组件。
  • 🚘 新行上的自动有序无需列表。
  • 💥支持自动按需懒加载 prismjs 的 187 种语言高亮。
  • 🖥支持编辑和预览滚动条联动效果。
  • 🌎Gitee 实例预览:https://uiw.gitee.io/react-md-editor/
  • 🌎Github 实例预览:https://uiwjs.github.io/react-md-editor/ 
  • 🌎CodeSandbox 实例预览

快速开始

npm i @uiw/react-md-editor

使用

import React from "react";
import ReactDOM from "react-dom";
import MDEditor from '@uiw/react-md-editor';

export default function App() {
  const [value, setValue] = React.useState("**Hello world!!!**");
  return (
    <div className="container">
      <MDEditor
        value={value}
        onChange={setValue}
      />
      <MDEditor.Markdown source={value} />
    </div>
  );
}

 

自定义工具栏

import React from "react";
import ReactDOM from "react-dom";
import MDEditor, { commands } from '@uiw/react-md-editor';

const title3: commands.ICommand = {
  name: 'title3',
  keyCommand: 'title3',
  buttonProps: { 'aria-label': 'Insert title3' },
  icon: (
    <svg width="12" height="12" viewBox="0 0 520 520">
      <path fill="currentColor" d="M15.7083333,468 C7.03242448,468 0,462.030833 0,454.666667 L0,421.333333 C0,413.969167 7.03242448,408 15.7083333,408 L361.291667,408 C369.967576,408 377,413.969167 377,421.333333 L377,454.666667 C377,462.030833 369.967576,468 361.291667,468 L15.7083333,468 Z M21.6666667,366 C9.69989583,366 0,359.831861 0,352.222222 L0,317.777778 C0,310.168139 9.69989583,304 21.6666667,304 L498.333333,304 C510.300104,304 520,310.168139 520,317.777778 L520,352.222222 C520,359.831861 510.300104,366 498.333333,366 L21.6666667,366 Z M136.835938,64 L136.835937,126 L107.25,126 L107.25,251 L40.75,251 L40.75,126 L-5.68434189e-14,126 L-5.68434189e-14,64 L136.835938,64 Z M212,64 L212,251 L161.648438,251 L161.648438,64 L212,64 Z M378,64 L378,126 L343.25,126 L343.25,251 L281.75,251 L281.75,126 L238,126 L238,64 L378,64 Z M449.047619,189.550781 L520,189.550781 L520,251 L405,251 L405,64 L449.047619,64 L449.047619,189.550781 Z" />
    </svg>
  ),
  execute: (state: commands.TextState, api: commands.TextApi) => {
    let modifyText = `### ${state.selectedText}\n`;
    if (!state.selectedText) {
      modifyText = `### `;
    }
    api.replaceSelection(modifyText);
  },
};

export default function App() {
  const [value, setValue] = React.useState("**Hello world!!!**");
  return (
    <div className="container">
      <MDEditor
        value="Hello Markdown!"
        commands={[
          commands.bold, commands.hr, commands.italic, commands.divider, commands.codeEdit, commands.codeLive, commands.codePreview, commands.divider,
          commands.fullscreen, 
          // Custom Toolbars
          title3,
        ]}
      />
    </div>
  );
}

单独预览 Markdown

import React from "react";
import ReactDOM from "react-dom";
import MDEditor from '@uiw/react-md-editor';

export default function App() {
  return (
    <div className="container">
      <MDEditor.Markdown source="Hello Markdown!" />
    </div>
  );
}

支持自定义 KaTeX 预览

KaTeX 是一个快速,易于使用的 JavaScript 库,用于在 Web 上进行 TeX 数学渲染,我们通过 KaTeX执行数学渲染。

以下实例是在 CodeSandbox 中的预览效果

npm install katex
import React from "react";
import ReactDOM from "react-dom";
import MDEditor from '@uiw/react-md-editor';
import katex from 'katex';
import 'katex/dist/katex.css';


const mdKaTeX = `This is to display the 
\`\$\$\c = \\pm\\sqrt{a^2 + b^2}\$\$\`
 in one line

\`\`\`KaTeX
c = \\pm\\sqrt{a^2 + b^2}
\`\`\`
`;

const renderers = {
  inlineCode: ({ children }) => {
    if (/^\$\$(.*)\$\$/.test(children)) {
      const html = katex.renderToString(children.replace(/^\$\$(.*)\$\$/, '$1'), {
        throwOnError: false,
      });
      return <code dangerouslySetInnerHTML={{ __html: html }} />
    }
    return children;
  },
  code: ({ children, language, value }) => {
    if (language.toLocaleLowerCase() === 'katex') {
      const html = katex.renderToString(value, {
        throwOnError: false
      });
      return (
        <pre>
          <code dangerouslySetInnerHTML={{ __html: html }} />
        </pre>
      );
    }
    return children;
  }
}

export default function App() {
  return (
    <MDEditor value={mdKaTeX} previewOptions={{ renderers: renderers }} />
  );
}

 

展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论 (0)

加载中
更多评论
2019/09/05 09:16

MDEditor 1.12.0 发布,Markdown 编辑器

MDEditor 是带有预览功能的简单 Markdown 编辑器,使用 React.js 和 TypeScript 实现。 提供具有语法突出显示,自动按需懒加载 prismjs 的 187 种语言高亮的简单 Markdown 编辑器。 这基于 textarea 封装,因此它不依赖于任何现代代码编辑器,如 Acs,CodeMirror,Monaco 等,同时支持工具栏高度定制。 新版更新内容: 更新 react-markdown 依赖。 修改编辑器背景颜色。 修改 toolbar 样式冲突问题。 特征: 📑 通...

6
30
发表于服务端专区
2019/09/01 00:30

MDEditor 1.11.3 发布,基于 textarea 封装的 Markdown 编辑器

MDEditor 带有预览功能的简单 Markdown 编辑器,使用 React.js 和 TypeScript 实现。 提供具有语法突出显示,自动按需懒加载 prismjs 的 187 种语言高亮的简单 Markdown 编辑器。 这基于 textarea 封装,因此它不依赖于任何现代代码编辑器,如 Acs,CodeMirror,Monaco 等,同时支持工具栏高度定制。 新版更新内容: 增强 buttonProps 自定义。 优化编辑器过滤大小写 HTML 标签。 添加编辑和预览同步滚动。 特征: :bookmark_ta...

3
20
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
2016/10/09 23:02

Makedown编辑器——Editor.md

主要特性 - 支持通用 Markdown / CommonMark 和 GFM (GitHub Flavored Markdown) 风格的语法,也可变身为代码编辑器; - 支持实时预览、图片(跨域)上传、预格式文本/代码/表格插入、代码折叠、跳转到行、搜索替换、只读模式、自定义样式主题和多语言语法高亮等功能; - 支持 ToC(Table of Contents)、Emoji表情、Task lists、@链接等 Markdown 扩展语法; - 支持 TeX 科学公式(基于 KaTeX)、流程图 Flowchart 和 时序图 ...

0
0
发表了博客
2019/04/28 11:57

MD之 TextInputLayout

Show me the link https://developer.android.com/reference/android/support/design/widget/TextInputLayout Show me the code <android.support.design.widget.TextInputLayout android:id="@+id/input_4_dev_name" android:layout_width="420dp" android:layout_height="wrap_content" android:layout_marginStart="30dp" android:layout_marginTop="20dp" android:...

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