Skip to content

README.md

Latest commit

 

History

History
129 lines (91 loc) · 4.39 KB

README.md

File metadata and controls

129 lines (91 loc) · 4.39 KB

🎄 md-editor-v3

English | 中文

Markdown editor for vue3, developed in jsx and typescript.

  • Documentation and example: Go

  • The same series editor for react: md-editor-rt

⭐️ Features

  • Toolbar, screenfull or screenfull in web pages and so on.
  • Themes, Built-in default and dark themes.
  • Shortcut key for editor.
  • Beautify your content by prettier(only for markdown content, not the code and other text).
  • Multi-language, build-in Chinese and English(default: Chinese).
  • Upload picture, paste or clip the picture and upload it.
  • Render article directly(no editor, no event listener, only preview of content).
  • Theme of preview, default, vuepress, github, cyanosis, mk-cute, smart-blue styles(not identical). It can be customized also(Refer to example page).
  • mermaid(>=1.8.0), katex mathematical formula(>=1.9.0).
  • Customize the toolbar as you like.
  • On-demand Import(>=4.0.0).

🗺 Preview

Default theme Dark theme Preview only

Inputing prompt and mark, emoji extensions

📦 Install

npm i md-editor-v3

Use existing extension of language and theme, such as Japanese

npm i @vavt/cm-extension

Use existing components of toolbar, such as exporting content as PDF

npm i @vavt/v3-extension

For more ways to use or contribute, please refer to: md-editor-extension

💡 Usage

When using server-side rendering, make sure to set id to a constant value.

Starting from 4.0.0, internal components can be imported on-demand.

✍🏻 Display Editor

<template>
  <MdEditor v-model="text" />
</template>

<script setup>
import { ref } from 'vue';
import { MdEditor } from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';

const text = ref('# Hello Editor');
</script>

📖 Preview Only

<template>
  <MdPreview :id="id" :modelValue="text" />
  <MdCatalog :editorId="id" :scrollElement="scrollElement" />
</template>

<script setup>
import { ref } from 'vue';
import { MdPreview, MdCatalog } from 'md-editor-v3';
import 'md-editor-v3/lib/preview.css';

const id = 'preview-only';
const text = ref('# Hello Editor');
const scrollElement = document.documentElement;
</script>

When using server-side rendering, scrollElement should be of string type, eg: html, body, #id, .class.

For more usage, please visit the document.

🏁 Contribute

🤝 Commit Convention (Release Aligned)

The release workflow in .github/workflows/latest.yml reads commit messages to build CHANGELOG.md.

  • Format: <type>(<scope>)!: <summary>
  • Recommended types:
    • feat: goes to Features
    • refactor: goes to Refactors
    • fix: goes to Fixed Bugs
    • other types: goes to Others
  • Subject should describe the user-visible change/problem being solved, not only the mechanical action (e.g. avoid only writing bump xxx).
  • Prefer adding commit body (git cz long description) to explain motivation and impact, especially for dependency upgrades.
  • Do not use pure version subjects like 6.3.2 or v6.3.2-beta.1 (ignored by release parser).
  • docs(changelog): ... is reserved for the bot-generated changelog commit.
  • If you add #123 in subject/body, release automation will notify and close that issue after publishing. Only reference issue numbers that are truly resolved.

Examples:

git commit -m "feat(editor): support drag-sort toolbar items"
git commit -m "fix(preview): sync anchor when heading id contains emoji #1234"
git commit -m "fix(deps): bump @vavt/markdown-theme to fix mermaid overflow"
git commit -m "refactor(build): simplify dts rollup pipeline"