Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

md-editor-v3

Package Overview
Dependencies
Maintainers
1
Versions
282
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

md-editor-v3

Markdown编辑器,基于vue3,使用jsx和typescript语法开发,支持切换主题,支持prettier美化文本,图片粘贴上传,图片裁剪上传,支持仅预览模式,支持在tsx项目使用。

  • 1.3.2
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
9.2K
decreased by-3.65%
Maintainers
1
Weekly downloads
 
Created
Source

md-editor-v3

vue3 项目下的 Markdown 编辑器,,使用 jsx 语法开发,支持在 tsx 项目使用。采用了替换 class 名称的方式实现暗黑主题切换。

文档与在线预览:传送门

功能一览

  1. 快捷插入内容工具栏、编辑器浏览器全屏、页面内全屏等;
  2. 内置的白色主题和暗黑主题,支持绑定切换;
  3. 支持快捷键插入内容;
  4. 支持使用 prettier 格式化内容(使用 CDN 方式引入,只支持格式化 md 内容,可在代码内设置关闭);
  5. 支持多语言,支持自行扩展语言;
  6. 支持复制粘贴上传图片,图片裁剪上传;
  7. 支持渲染模式(不显示编辑器,只显示 md 预览内容,无额外监听)
  8. ...

更多功能待后续更新,若有想要的功能未开发,请留言~

预览图

默认模式下:

暗黑模式下:

apis

props

名称类型默认值响应式说明
modelValueString''md 编辑内容,vue 模板支持双向绑定(v-model="value")
theme'light' | 'dark''light'主题切换
editorClassString''编辑器最外层样式
hljsObjectnullx项目中使用到了 highlight,可将实例直接传递,生产环境则不会请求 CDN,需要手动导入支持的高亮代码样式
highlightJsStringhighlight.jsxhighlightJs CDN
highlightCssStringatom-one-darkx预览高亮代码样式
historyLengthNumber10x最大记录操作数(太大会占用内存)
pageFullScreenBooleanfalsex浏览器内全屏
previewBooleantruex预览模式
htmlPreviewBooleanfalsexhtml 预览
previewOnlyv1.3.0Booleanfalsex仅预览模式,不显示 bar 和编辑框,不支持响应式,仅能初始设置一次
languageString'zh-CN'内置中英文('zh-CN','en-US'),可自行扩展其他语言,同时可覆盖内置的中英文
languageUserDefinedArray[{key: StaticTextDefaultValue}]通过这里扩展语言,修改 language 值为扩展 key 即可,类型申明可手动导入
toolbarsArray[all]选择性展示工具栏,可选内容如下[toolbars]
toolbarsExcludev1.1.4Array[]选择性不展示工具栏,内容同toolbars
prettierBooleantruex是否启用 prettier 优化 md 内容
prettierCDNStringstandalonex
prettierMDCDNStringparser-markdownx
editorNamev1.3.2deleteString'editor'x当在同一页面放置了多个编辑器,最好提供该属性以区别某些带有 ID 的内容,v1.3.2 后版本编辑器自动生成唯一 ID,不再需要手动设置
cropperCssv1.2.0Stringcropper.min.cssxcropper css url
cropperJsv1.2.0Stringcropper.min.jsxcropper js url
iconfontJsv1.3.2Stringiconfontx矢量图标链接,无外网时,下载 js 到内网,提供链接

响应式=x,该属性只支持设置,不支持响应式更新~

[toolbars]

[
  'bold',
  'underline',
  'italic',
  'strikeThrough',
  'title',
  'sub',
  'sup',
  'quote',
  'unorderedList',
  'orderedList',
  'codeRow',
  'code',
  'link',
  'image',
  'table',
  'revoke',
  'next',
  'save',
  'pageFullscreen',
  'fullscreen',
  'preview',
  'htmlPreview',
  'github'
];

自定义语言,需要替换的内容如下(某些字段若不主动提供,可能会造成页面不美观):

[StaticTextDefaultValue]

export interface StaticTextDefaultValue {
  // 工具栏hover title提示
  toolbarTips?: ToolbarTips;
  // 标题下拉框内容
  titleItem?: {
    h1?: string;
    h2?: string;
    h3?: string;
    h4?: string;
    h5?: string;
    h6?: string;
  };
  // 添加链接或图片时弹窗提示
  linkModalTips?: {
    title?: string;
    descLable?: string;
    descLablePlaceHolder?: string;
    urlLable?: string;
    UrlLablePlaceHolder?: string;
    buttonOK?: string;
    buttonUpload?: string;
  };
  // 裁剪图片弹窗提示,v1.2.0
  clipModalTips?: {
    title?: string;
    buttonUpload?: string;
  };
  // 预览代码中复制代码提示,v1.1.4
  copyCode?: {
    text?: string;
    tips?: string;
  };
}

事件绑定

名称入参说明
onChangev:String内容变化事件(当前与textareoninput事件绑定,每输入一个单字即会触发)
onSavev:String保存事件,快捷键与保存按钮均会触发
onUploadImgfiles:FileList, callback:Function上传图片事件,弹窗会等待上传结果,务必将上传后的 urls 作为 callback 入参回传
onHtmlChangedh:Stringhtml 变化回调事件,用于获取预览 html 代码

快捷键

主要以CTRL搭配对应功能英文单词首字母,冲突项添加SHIFT,再冲突替换为ALT

键位功能说明开发标记
CTRL + S保存触发编辑器的onSave回调
CTRL + B加粗**加粗**
CTRL + U下划线<u>下划线</u>
CTRL + I斜体*斜体*
CTRL + 1-61-6 级标题# 标题
CTRL + ↑上角标<sup>上角标</sup>
CTRL + ↓下角标<sub>下角标</sub>
CTRL + Q引用> 引用
CTRL + O有序列表1. 有序列表
CTRL + L链接[链接](https://imbf.cc)
CTRL + T表格|表格| 放弃开发(无法实现)x
CTRL + Z撤回触发编辑器内内容撤回,与系统无关
CTRL + SHIFT + S删除线~删除线~
CTRL + SHIFT + U无序列表- 无序列表
CTRL + SHIFT + C块级代码多行代码块
CTRL + SHIFT + I图片链接![图片](https://imbf.cc)
CTRL + SHIFT + Z前进一步触发编辑器内内容前进,与系统无关
CTRL + SHIFT + F美化内容
CTRL + ALT + C行内代码行内代码块

演示

jsx 语法项目

import { defineComponent, reactive } from 'vue';
import Editor from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';
import hljs from 'highlight.js';
import 'highlight.js/styles/atom-one-dark.css';

export default defineComponent({
  setup() {
    const md = reactive({
      text: 'default markdown content'
    });
    return () => (
      <Editor hljs={hljs} modelValue={md.text} onChange={(value) => (md.text = value)} />
    );
  }
});

vue 模板项目

<template>
  <editor v-model="text" pageFullScreen></editor>
</template>

<script>
import { defineComponent } from 'vue';
import Editor from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';

export default defineComponent({
  name: 'VueTemplateDemo',
  components: { Editor },
  data() {
    return {
      text: '默认值'
    };
  }
});
</script>

上传图片

默认可以选择多张图片,支持粘贴板上传图片。

注意:粘贴板上传时,如果是网页上的 gif 图,无法正确上传为 gif 格式!

async onUploadImg(files: FileList, callback: (urls: string[]) => void) {
  const res = await Promise.all(
    Array.from(files).map((file) => {
      return new Promise((rev, rej) => {
        const form = new FormData();
        form.append('file', file);

        axios
          .post('/api/img/upload', form, {
            headers: {
              'Content-Type': 'multipart/form-data'
            }
          })
          .then((res) => rev(res))
          .catch((error) => rej(error));
      });
    })
  );

  callback(res.map((item: any) => item.data.url));
}

Keywords

FAQs

Package last updated on 04 Aug 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc