md-editor

简单的 Markdown 编辑器
授权协议 MIT
开发语言 JavaScript TypeScript
所属分类 程序开发、 Markdown开发包
软件类型 开源软件
地区 国产
投 递 者 南门星河
操作系统 跨平台
开源组织
适用人群 未知
 软件概览

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 }} />
      );
    }

     

    • v-md-editor 是基于 Vue 开发的 markdown 编辑器组件。即支持vue2.0的项目也支持vue3.0的项目,另一个 mavonEditor编辑器在Vue3使用过程中不兼容。 Vue3注册使用 import { createApp } from 'vue'; import VueMarkdownEditor from '@kangc/v-md-editor'; import '@

    • md-editor-v3 md-editor-v3官网 npm i md-editor-v3 --save npm i showdown --save 由于该编辑器输入为markdown格式,要转换成html则需要插件转换,因此使用showdown md-editor-v3也提供了onHtmlChanged来转换,不过出于贪图逻辑上的便利没有使用 vue3案例 toolbarsExclude为

    • 一、介绍 v-md-editor 是基于 Vue 开发的 markdown 编辑器组件 二、安装与注册 即支持vue2.0的项目也支持vue3.0的项目,不过两种版本的安装版本不同 - [Demo](https://code-farmer-i.github.io/vue-markdown-editor/examples/base-editor.html) - [Documentation](htt

    • 一、介绍 v-md-editor 是基于 Vue 开发的 markdown 编辑器组件 二、安装与注册 即支持vue2.0的项目也支持vue3.0的项目,不过两种版本的安装版本不同 Demo Documentation 中文文档 国内文档镜像 Changelog 这里有官网的链接地址,可以查看两种版本的注册方式,介绍一下对于quasar2.0的项目如何进行注册: import VueMarkdow

    • 一、入门 1.1 安装 yarn add md-editor-v3 npm install md-editor-v3 --save 二、vue3 + ts 使用 TODO 标记待完善部分 <template> <MdEditor class="c-markdown" v-model="modelValue" :previewOnly="previewOnly"

    • vue3安装md-editor-v3 前言  官方文档 安装 # yarn add md-editor-v3 npm i md-editor-v3 MdEditor.vue <script lang="ts" setup> import { ref } from 'vue'; import MdEditor from 'md-editor-v3'; import 'md-editor-v3/

    • 对v-md-editor的简易二次封装,新增导入、下载功能 # use npm npm i @kangc/v-md-editor -S # use yarn yarn add @kangc/v-md-editor <template> <v-md-editor class="markdown" v-model="content" :mode="mode" :t

    • npm i md-editor-v3 在终端安装后,点击README.md,里面有详细内容,该文件在node_modules下的md-editor-v3包内。 然后引入可在main.js文件内写如下: import MdEditorV3 from 'md-editor-v3'; import 'md-editor-v3/lib/style.css'; .use(MdEditorV3) 这

     相关资料
    • DNS(域名系统)是Internet系统中非常重要的一部分。 它只是映射FQDN(完全限定域名),这是人类可读的形式。 例如,www.wenjiangs.com到IP地址,由计算机使用,例如117.18.237.191。 对于此过程,DNS使用存储在服务器中的区域文件,其中包含将域名映射到IP地址的资源记录。 在这个简单区域编辑器中,我们可以添加两种类型的记录 - 添加A记录 A类资源记录是主机名

    • 出自何乐源码,简单的易语言写的markdown编辑器,Markdown NOTEPAD pro使用了著名的开源项目Editor.md,感谢Editor.md的作者,本程序使用了一些来自互联网的免费,开源作品及其资源,其版权归其作者所有。本软件是一个免费软件,感谢大家的支持和使用。软件UI设计主要配色是白黑,突出简约的风格,给使用者更美观的感觉,欢迎fork/star。 版本:Editor.md v

    • 理想中的即时编辑应该是这样的: 点击某一行,显示那一行的完整源码 比如 ## 标题 我找到的即时编辑都是直接编辑标题,前面的##通常被隐藏 但没发现合适的,求推荐。谢谢

    • 本来使用 simplemde-markdown-editor 作为 markdown 编辑器,但这个库很久不更新和维护了,而且还有 xss 风险。所以在 版本之后使用 tui.editor作为新的编辑器,接下来所有的文档都是基于 tui.editor 它的。更多内容。 Props Name Type Default Description value String " " This prop ca

    • A simple markdown editor with preview, implemented with React.js and TypeScript. This React Component aims to provide a simple Markdown editor with syntax highlighting support. This is based on textar

    • 本文向大家介绍vue-quill-editor富文本编辑器简单使用方法,包括了vue-quill-editor富文本编辑器简单使用方法的使用技巧和注意事项,需要的朋友参考一下 文章刚开始先来介绍一下vue-quill-editor富文本编辑器的简单使用,具体操作步骤如下: 安装: main.js: 在需要使用的地方: 看到了一个网友分享的如何禁用vue-quill-editor 富文本编辑器,分享