Medit 可能是最方便好用的浏览器Markdown编辑器

IT浪子の博客 > Medit

Medit

Medit 是一款 MIT 开源可嵌入浏览器的 Markdown 编辑器, 基于 codemirrorReactmarkdown-it 。开箱即用,方便快捷。

主要特性

  • 支持通用 Markdown / CommonMarkGFM (GitHub Flavored Markdown) 风格的语法
  • 支持同步滚动、实时预览、全屏模式、预格式文本/代码插入、待办、表格插入、上标、下标、标记、EmojiKatex 公式、代码折叠、跳转到行、搜索替换、只读模式、多语言语法高亮等功能
  • 支持图片上传、文件上传、拖拽文件上传、拖拽文件直接查看(Markdownhtmljscss等);所有的上传均需要自定义上传到服务器的逻辑。
  • 支持设置链接的 target 属性, 默认所有的非相对路径/非当前网页(location.href)host 的链接都会设置为target="_blank"
  • 支持本地缓存,可自定义本地缓存的存储逻辑(比如存储到后台),默认 Ctrl+S 临时保存
  • 支持 html 标签
  • 开箱即用,只需要引入单独的 jscss
  • 无缝支持 React

下载安装

直接下载 Medit

NPM

npm i --save @itlangzi/medit

yarn

yarn add @itlangzi/medit

使用

浏览器端直接使用

<link href="https://cdn.jsdelivr.net/npm/@itlangzi/medit/lib/skins/default/medit.css">
<script src="https://cdn.jsdelivr.net/npm/@itlangzi/medit/lib/index.min.js"/>
<script>
    window.onload = function () {
            const medit = new Medit({
                image: {
                    upload(file) {
                        return { type: file.type, name: 'it浪子技术博客', url: 'https://www.itlangzi.com/default/assets/images/avatars/avatar.jpg' }
                    }
                },

                file: {
                    upload(files) {
                        if (!Array.isArray(files)) {
                            files = [files]
                        }
                        return files.map(file => ({ type: file.type, name: 'it浪子技术博客', url: 'https://www.itlangzi.com/default/assets/images/avatars/avatar.jpg' }))
                    }
                },
                editorOptions: {
                    placeholder: '写点什么...',
                }
            })
            medit.render('#app')
        }
</script>

非浏览器

import/export es6 语法

import '@itlangzi/medit/lib/skins/default/medit.css'
import Medit from '@itlangzi/medit'
const medit = new Medit(options)
medit.render('#app')

require 语法

require('@itlangzi/medit/lib/skins/default/medit.css')
const Medit = require('@itlangzi/medit')
const medit = new Medit(options)
medit.render('#app')

React 项目使用

import '@itlangzi/medit/lib/skins/default/medit.css'
import MeditComponent from '@itlangzi/medit/lib/react'
const options = {}
ReactDOM.render(<MeditComponent options={options}/>, document.getElementById('app'))

设置内容

const options = {
    value: '# medit markdown editor'
}
// 或者 
medit.setValue('# medit markdown editor')

图片上传

options 中指定配置如下参数

const options = {
    image: {
        upload(file) {
            // sync uplaod
            // support promise
            // const formData = new FormData()
            // formData.append('file', file)
            // return new Promise(resolve => {
            //     return fetch('/upload', formData)
            // })
            return { type: file.type, name: 'it浪子技术博客', url: 'https://www.itlangzi.com/default/assets/images/avatars/avatar.jpg' }
        }
    }
}

文件上传

  • 支持拖拽文件、复制图片上传
  • 部分文件拖拽可直接查看

options 中指定配置如下参数

const options = {
    image:{
        upload(files) {
            // 支持异步,Promise
            if (!Array.isArray(files)) {
                files = [files]
            }
            return files.map(file => ({ type: file.type, name: 'it浪子技术博客', url: 'https://www.itlangzi.com/default/assets/images/avatars/avatar.jpg' }))
        }
    },
}

获取 Markdownhtml 内容

通过 onChange 监听

const options = {
    onChange(markdown, html){

    }
}

或者

  • 这里将会覆盖 options 中的 onChange
  • 必须在 render 方法之前
medit.onChange(function(markdown, html){

})

直接获取数据

medit.getValue() // Markdown
medit.getHtml() // html

设置语言

目前只支持 zh-CNen

const options = {
    language:'en'
}
// 或者
medit.language('en')

设置为只读

const options = {
    readOnly: true
}
// 或者
medit.readOnly(true) // true 开启 false 关闭, 若为 true 可以省略

保存为 Markdown 文件

filename 为可选参数, 不需要指定后缀名

medit.saveAsMarkdown([filename])

保存为 Html 文件

medit.saveAsHtml([filename])

浏览器兼容性

浏览器 IE Chrome Edge Firefox Opera Safari
支持 不支持 >= 49 >=12 >=18 >=36 >=10

License

MIT License.
Copyright © 2020 Lang zi


作者: 小浪
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 小浪 !
 上一篇
Linux下 Spring Boot 上传找不到临时目录, 出现500错误 Linux下 Spring Boot 上传找不到临时目录, 出现500错误
错误原因 在 Linux 系统中, Spring Boot 应用以 java -jar 命令启动时,会在操作系统的 /tmp 目录下生成一个 tomcat (或 undertow )临时目录,上传的文件先要转换成临时文件保存在这个文件夹下面。由于临时 /tmp 目录下的文件,在长时间( 10天 )没有使用的情况下,系统执行了 tmp 目录清理服务( systemd-tmpfiles-clean.
2020年4月26日
下一篇 
jenkins 获取插件,下载插件提速,配置国内镜像 jenkins 获取插件,下载插件提速,配置国内镜像
jenkins 是目前比较流行的自动化运维工具,由于 jenkins 的镜像源是国外的所以再下载插件的时候会非常慢,甚至会超时,所以本文就重点介绍如何解决这个问题。 正确的做法自然是修改为国内的镜像源,本文使用的是清华大学的镜像源站 清华大学开源软件镜像站 主要分以下两种情况 1. 尚未安装的的情况 本文使用 war 其他类似 1.1 下载包 下载地址 jenkins.war下载地址 1.2 启
2020年4月26日