MD操作文档

已于 2023-07-27 17:45:56 修改
阅读量1.4k 收藏 4
点赞数
文章标签： vue
于 2023-07-26 11:33:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_26821793/article/details/131935697
版权

在线尝试示例：传送门

🔖 MdPreview Props

这是预览组件MdPreview的Props，它们同样也是MdEditor的：

📃 modelValue

  • 类型：string

  • 默认值：''

    编辑的内容。

    <MdEditor v-model="xxx" />

🛍 theme

  • 类型：'light' | 'dark'

  • 默认值：'light'

    编辑器主题。

    <MdEditor theme="dark" />

🎀 class

  • 类型：string

  • 默认值：''

    …

🔤 language

  • 类型：string

  • 默认值：'zh-CN'

    内置中英文('zh-CN','en-US')，可自行扩展其他语言，同时可覆盖内置的中英文。

    你也可以使用现成的扩展语言：md-editor-extension。使用及贡献方式见扩展库文档~

🎲 editorId

  • 类型：string

  • 默认值：'md-editor-v3'

    编辑器唯一标识，非必须项，服务端渲染时，防止产生服务端与客户端渲染内容不一致错误提示，以及单页面多编辑器时做区别。

🔢 showCodeRowNumber

  • 类型：boolean

  • 默认值：false

    代码块是否显示行号。

🔦 previewTheme

  • 类型：'default' | 'github' | 'vuepress' | 'mk-cute' | 'smart-blue' | 'cyanosis'

  • 默认值：'default'

    预览内容主题，支持自定义。

    主题自定义方式：

    1. 编辑 css
    .xxx-theme {
  color: red;
}
    1. 设置previewTheme
    <MdEditor previewTheme="xxx" />

    参考markdown-theme项目。

🎅🏻 style

  • 类型：string | CSSProperties

  • 默认值：''

    编辑器内联样式。

☝️ noMermaid

  • 类型：boolean

  • 默认值：false

    如果你不希望使用图表展示内容，可以设置关闭。

    <MdEditor noMermaid />

❌ noKatex

  • 类型：boolean

  • 默认值：false

    如果你不希望使用数学公式展示内容，可以设置关闭。

    <MdEditor noKatex />

🦉 codeTheme

  • 类型：'atom'|'a11y'|'github'|'gradient'|'kimbie'|'paraiso'|'qtcreator'|'stackoverflow'

  • 默认值：'atom'

    代码块高亮样式名称。

    你可以添加自己的样式，把该属性设置为你想要的即可，方式如下：

    1. 配置样式链接
    import { config } from 'md-editor-v3';

config({
  editorExtensions: {
    highlight: {
      css: {
        atom: {
          light:
            'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/atom-one-light.min.css',
          dark: 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/atom-one-dark.min.css'
        },
        xxx: {
          light:
            'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/xxx-light.css',
          dark: 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/xxx-dark.css'
        }
      }
    }
  }
});
    1. 设置codeTheme
    <MdEditor codeTheme="xxx" />

🎱 mdHeadingId

  • 类型：(text: string, level: number, index: number) => string

  • 默认值：(text) => text

    构造标题ID的生成方式。

    <template>
  <MdEditor :mdHeadingId="mdHeadingId" />
</template>

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

const mdHeadingId = (_text, _level, index) => `heading-${index}`;
</script>

🐣 sanitize

  • 类型：(html: string) => string

  • 默认值：(html) => html

    在每次生成 html 后，通过该方法移除危险内容，比如 xss 相关，当你很确定你的内容不会出现类似情况时，不必设置它。

    使用sanitize-html演示

    <template>
  <MdEditor :sanitize="sanitize" />
</template>

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

const sanitize = (html) => sanitizeHtml(html);
</script>

    为什么不内置到编辑器：由于类似编辑器大多属于自行处理文本，自身即可确认内容是否安全，并不需要该功能。

🤞🏼 noIconfont

  • 类型：boolean

  • 默认值：true

    不插入 iconfont 链接，你可以下载到本地自行引入。

    <template>
  <MdEditor noIconfont />
</template>

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

import '/assets/iconfont.js';
</script>

💅 formatCopiedText

  • 类型：(text: string) => string

  • 默认值：(text) => text

    格式化复制代码

    <template>
  <MdEditor :formatCopiedText="formatCopiedText" />
</template>

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

const formatCopiedText = (text) => {
  return `${text}  - from md-editor-v3`;
};
</script>

🛁 codeStyleReverse

  • 类型：boolean

  • 默认值：true

    某些预览主题的代码模块背景是暗色系，将这个属性设置为 true，会自动在该主题下的 light 模式下使用暗色系的代码风格。

🧼 codeStyleReverseList

  • 类型：Array

  • 默认值：['default', 'mk-cute']

    需要自动调整的预览主题，已默认包含 default、mk-cute。

🕊 noHighlight

  • 类型：boolean

  • 默认值：false

    不高亮代码，也不会加载相应的扩展库

🔩 MdEditor Props

除去和MdPreivew相同的以外：

💻 pageFullscreen

  • 类型：boolean

  • 默认值：false

    页面内全屏。

📱 preview

  • 类型：boolean

  • 默认值：true

    是否显示预览。

📀 htmlPreview

  • 类型：boolean

  • 默认值：false

    是否显示 html 预览。当设置为true时，需要将preview设置为false

    <MdEditor htmlPreview preview={false} />

🧱 toolbars

  • 类型：Array

  • 默认值：[all]

    选择性展示工具栏，可选内容见下方。

    你可以随意排序工具栏，通过'-'分割两个工具，通过'='实现左右放置！

    从 v1.10.0 开始，你可以自定义工具栏，将defToolbars中自定义工具项的下标穿插在toolbars实现展示（这并不规范）

    [all]

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

🧱 toolbarsExclude

  • 类型：Array

  • 默认值：[]

    选择性不展示工具栏，内容同上。

🪒 noPrettier

  • 类型：boolean

  • 默认值：false

    是否启用 prettier 优化 md 内容。

🤏 tabWidth

  • 类型：number

  • 默认值：2

    编辑器一个 TAB 键等于空格数。

📅 tableShape

  • 类型：[number, number]

  • 默认值：[6, 4]

    标题栏添加表格时，预设待选表格大小，第一个代表最大列数，第二个代表最大行数。

    <MdEditor :tableShape="[8, 4]" />

    表格预设大小预览

🪧 placeholder

  • 类型：string

  • 默认值：''

    啊这-_-！

🦶 footers

  • 类型：Array<'markdownTotal' | '=' | 'scrollSwitch' | number>

  • 默认值：['markdownTotal', '=', 'scrollSwitch']

    页脚显示内容，'='左右分割，设置为[]不显示页脚。

⛵️ scrollAuto

  • 类型：boolean

  • 默认值：true

    默认左右同步滚动状态。

🥹 noUploadImg

  • 类型：boolean

  • 默认值：false

    工具栏不显示上传图片入口。

    <template>
  <MdEditor noUploadImg />
</template>

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

🔬 autoFocus

  • 类型：boolean

  • 默认值：false

    原生属性，文本区域自动获得焦点。

🔩 disabled

  • 类型：boolean

  • 默认值：false

    原生属性，禁用文本区域。

🔒 readOnly

  • 类型：boolean

  • 默认值：false

    原生属性，文本区域为只读。

📏 maxLength

  • 类型：number

  • 默认值：``

    原生属性，文本区域允许的最大字符数。

📥 autoDetectCode

  • 类型：boolean

  • 默认值：false

    是否启用自动识别粘贴代码类别，目前仅支持从vscode复制的内容。

📝 completions

  • 类型：Array<CompletionSource>

  • 默认值：[]

    添加额外的输入自动完成来源。

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

<script setup lang="ts">
import { ref } from 'vue';
import { CompletionSource } from '@codemirror/autocomplete';
import { MdEditor } from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';

const text = ref('');

const completions = ref<Array<CompletionSource>>([
  (context) => {
    const word = context.matchBefore(/@\w*/);

    if (word === null || (word.from == word.to && context.explicit)) {
      return null;
    }

    return {
      from: word.from,
      options: [
        {
          label: '@imzbf',
          type: 'text'
        }
      ]
    };
  }
]);
</script>

🎍 插槽

🪶 defToolbars

自定义工具栏插槽，通过使用内置的NormalToolbar普通点击触发事件组件，DropdownToolbar下拉点击触发事件组件和ModalToolbar弹窗触发事件组件进行扩展。将defToolbars插槽中的组件下标穿插在toolbars实现展示（这并不规范）。

  • Setup 模板

    <template>
  <MdEditor :toolbars="toolbars">
    <template #defToolbars>
      <NormalToolbar title="mark" @onClick="handler">
        <template #trigger>
          <svg class="md-editor-icon" aria-hidden="true">
            <use xlink:href="#icon-mark"></use>
          </svg>
        </template>
      </NormalToolbar>
    </template>
  </MdEditor>
</template>

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

const toolbars = ['bold', '-', 0, '=', 'github'];

const handler = () => {
  console.log('NormalToolbar clicked!');
};
</script>

  • Jsx 模板

    import { defineComponent } from 'vue';
import { MdEditor, NormalToolbar } from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';

export default defineComponent({
  setup() {
    return () => (
      <MdEditor
        toolbars={['bold', '-', 0, '=', 'github']}
        defToolbars={
          <>
            <NormalToolbar
              trigger={
                <svg class="md-editor-icon" aria-hidden="true">
                  <use xlinkHref="#icon-strike-through" />
                </svg>
              }
            ></NormalToolbar>
          </>
        }
      />
    );
  }
});

普通扩展工具栏

下拉扩展工具栏

扩展组件属性参考内置组件，使用示例参见文档分支，提供标记、表情和弹窗预览扩展组件。

🦿 defFooters

自定义扩展页脚

  • Setup 模板

    <template>
  <MdEditor :footers="footers">
    <template #defFooters>
      <span>￥_￥</span>
      <span>^_^</span>
    </template>
  </MdEditor>
</template>

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

// 将插槽中的组件下标放到对应的位置即可显示
const footers = ['markdownTotal', 0, '=', 1, 'scrollSwitch'];
</script>

  • Jsx 模板

    import { defineComponent } from 'vue';
import { MdEditor } from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';

export default defineComponent({
  setup() {
    return () => (
      <MdEditor
        footers={['markdownTotal', 0, '=', 1, 'scrollSwitch']}
        defFooters={
          <>
            <span>￥_￥</span>
            <span>^_^</span>
          </>
        }
      />
    );
  }
});

🧵 MdPreview 绑定事件

🚁 onHtmlChanged

  • 类型：(h: string) => void

    html 变化回调事件，用于获取预览 html 代码。

🗒 onGetCatalog

  • 类型：(list: HeadList[]) => void

    动态获取markdown目录。

🪢 MdEditor 绑定事件

除去和MdPreivew相同的以外：

📞 onChange

  • 类型：(v: string) => void

    内容变化事件（当前与textarea的oninput事件绑定，每输入一个单字即会触发）。

💾 onSave

  • 类型：(v: string, h: Promise<string>) => void

    保存事件，快捷键与保存按钮均会触发。

    <template>
  <MdEditor @onSave="onSave" />
</template>

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

const onSave = (v, h) => {
  console.log(v);

  h.then((html) => {
    console.log(html);
  });
};
</script>

📸 onUploadImg

  • 类型：(files: Array<File>, callback: (urls: Array<string>) => void) => void

    上传图片事件，弹窗会等待上传结果，务必将上传后的 urls 作为 callback 入参回传。

    <template>
  <MdEditor @onUploadImg="onUploadImg" />
</template>

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

const onUploadImg = async (files, callback) => {
  const res = await Promise.all(
    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) => item.data.url));
};
</script>

💀 onError

  • 类型：(err: { name: string; message: string;}) => void

    捕获执行错误事件，目前支持Cropper、fullscreen、prettier实例未加载完成操作错误。

    <template>
  <MdEditor @onError="onError" />
</template>

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

const onError = (err) => {
  alert(err.message);
};
</script>

🐾 onBlur

  • 类型：(event: FocusEvent) => void

    输入框失去焦点时触发事件。

    <template>
  <MdEditor @onBlur="onBlur" />
</template>

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

const onBlur = (e) => {
  console.log('onBlur', e);
};
</script>

🔖 onFocus

  • 类型：(event: FocusEvent) => void

    输入框获得焦点时触发事件。

🤱🏼 实例暴露

2.5.0 版本之后，编辑器暴露了若干方法在组件实例上，用来快捷监听编辑器内部状态或对调整内部状态。

<template>
  <MdEditor ref="editorRef" />
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { MdEditor } from 'md-editor-v3';
import type { ExposeParam } from 'md-editor-v3';

import 'md-editor-v3/lib/style.css';

const editorRef = ref<ExposeParam>();

onMounted(() => {
  editorRef.value?.on('catalog', console.log);
});
</script>

👂🏼 on

监听编辑器内部状态，包括：屏幕全屏、浏览器全屏、预览文本、预览 html、目录等。

  • pageFullscreen

    editorRef.value?.on('pageFullscreen', (status) => console.log(status));

  • fullscreen

    editorRef.value?.on('fullscreen', (status) => console.log(status));

  • preview

    editorRef.value?.on('preview', (status) => console.log(status));

  • htmlPreview

    editorRef.value?.on('htmlPreview', (status) => console.log(status));

  • catalog

    editorRef.value?.on('catalog', (status) => console.log(status));

💻 togglePageFullscreen

切换页面内全屏。

editorRef.value?.togglePageFullscreen(true);

不设置入参切换为相反状态

🖥 toggleFullscreen

切换屏幕全屏。

editorRef.value?.toggleFullscreen(true);

不设置入参切换为相反状态

📖 togglePreview

切换是否显示预览。

editorRef.value?.togglePreview(true);

不设置入参切换为相反状态

📼 toggleHtmlPreview

切换是否显示 html 预览。

editorRef.value?.toggleHtmlPreview(true);

不设置入参切换为相反状态

🧬 toggleCatalog

切换是否显示目录。

editorRef.value?.toggleCatalog(true);

不设置入参切换为相反状态

💾 triggerSave

触发保存。

editorRef.value?.triggerSave();

💉 insert

手动向文本框插入内容。

/**
 * @params selectedText 选中的内容
 */
editorRef.value?.insert((selectedText) => {
  /**
   * @return targetValue    待插入内容
   * @return select         插入后是否自动选中内容
   * @return deviationStart 插入后选中内容鼠标开始位置
   * @return deviationEnd   插入后选中内容鼠标结束位置
   */
  return {
    targetValue: `${selectedText}`,
    select: true,
    deviationStart: 0,
    deviationEnd: 0
  };
});

🎯 focus

手动聚焦输入框。

import type { FocusOption } from 'md-editor-v3';

const option: FocusOption | undefined = 'start';

// 聚焦时光标的位置，不提供默认上次失焦时的位置
editorRef.value?.focus(option);

type FocusOption =
  | 'start'
  | 'end'
  | {
      // 选中的开始位置，默认光标位置
      rangeAnchor?: number;
      // 选中的结束位置，默认光标位置
      rangeHead?: number;
      // 光标的位置
      cursorPos: number;
    };

💴 配置编辑器

使用config(option: ConfigOption)方法，可以对构建实例进行定制。

🦪 codeMirrorExtensions

根据主题和内部默认的 codeMirror 扩展自定义新的扩展。

使用示例：编辑器默认不显示输入框的行号，需要手动添加扩展

import { config } from 'md-editor-v3';
import { lineNumbers } from '@codemirror/view';

config({
  codeMirrorExtensions(_theme, extensions) {
    return [...extensions, lineNumbers()];
  }
});

🍤 markdownItConfig

自定义 markdown-it 核心库扩展、属性等。

使用示例：配置使用markdown-it-anchor并在标题右侧显示一个超链接符号

import { config } from 'md-editor-v3';
import ancher from 'markdown-it-anchor';

config({
  markdownItConfig(mdit) {
    mdit.use(ancher, {
      permalink: true
    });
  }
});

🍙 editorConfig

编辑器常规配置，语言、mermaid默认模板、渲染延迟：

🍚 languageUserDefined
import { config } from 'md-editor-v3';

config({
  editorConfig: {
    // 语言
    languageUserDefined: {
      'zh-CN': {
        toolbarTips: {
          bold: '加粗',
          underline: '下划线',
          italic: '斜体',
          strikeThrough: '删除线',
          title: '标题',
          sub: '下标',
          sup: '上标',
          quote: '引用',
          unorderedList: '无序列表',
          orderedList: '有序列表',
          task: '任务列表',
          codeRow: '行内代码',
          code: '块级代码',
          link: '链接',
          image: '图片',
          table: '表格',
          mermaid: 'mermaid图',
          katex: 'katex公式',
          revoke: '后退',
          next: '前进',
          save: '保存',
          prettier: '美化',
          pageFullscreen: '浏览器全屏',
          fullscreen: '屏幕全屏',
          preview: '预览',
          htmlPreview: 'html代码预览',
          catalog: '目录',
          github: '源码地址'
        },
        titleItem: {
          h1: '一级标题',
          h2: '二级标题',
          h3: '三级标题',
          h4: '四级标题',
          h5: '五级标题',
          h6: '六级标题'
        },
        imgTitleItem: {
          link: '添加链接',
          upload: '上传图片',
          clip2upload: '裁剪上传'
        },
        linkModalTips: {
          linkTitle: '添加链接',
          imageTitle: '添加图片',
          descLabel: '链接描述：',
          descLabelPlaceHolder: '请输入描述...',
          urlLabel: '链接地址：',
          urlLabelPlaceHolder: '请输入链接...',
          buttonOK: '确定'
        },
        clipModalTips: {
          title: '裁剪图片上传',
          buttonUpload: '上传'
        },
        copyCode: {
          text: '复制代码',
          successTips: '已复制！',
          failTips: '复制失败！'
        },
        mermaid: {
          flow: '流程图',
          sequence: '时序图',
          gantt: '甘特图',
          class: '类图',
          state: '状态图',
          pie: '饼图',
          relationship: '关系图',
          journey: '旅程图'
        },
        katex: {
          inline: '行内公式',
          block: '块级公式'
        },
        footer: {
          markdownTotal: '字数',
          scrollAuto: '同步滚动'
        }
      }
    }
  }
});
🍘 mermaidTemplate
import { config } from 'md-editor-v3';

config({
  editorConfig: {
    // mermaid模板
    mermaidTemplate: {
      // 流程图
      flow: `flow tempalte`,
      // 时序图
      sequence: `sequence template`,
      // 甘特图
      gantt: `gantt template`,
      // 类图
      class: `class template`,
      // 状态图
      state: `state template`,
      // 饼图
      pie: `pie template`,
      // 关系图
      relationship: `relationship template`,
      // 旅程图
      journey: `journey template`
    }
  }
});
🍥 renderDelay
import { config } from 'md-editor-v3';

config({
  editorConfig: {
    // 输入渲染延迟（ms）
    renderDelay: 0
  }
});

🥠 editorExtensions

类型如下，用于配置编辑器内部的扩展

import { config } from 'md-editor-v3';

config({
  editorExtensions: { iconfont: 'https://xxx.cc' }
});
EditorExtensions 
export interface EditorExtensions {
  highlight?: {
    instance?: any;
    js?: string;
    css?: {
      [key: string]: {
        light: string;
        dark: string;
      };
    };
  };
  prettier?: {
    // >= 2.2.0
    prettierInstance?: any;
    parserMarkdownInstance?: any;

    standaloneJs?: string;
    parserMarkdownJs?: string;
  };
  cropper?: {
    instance?: any;
    js?: string;
    css?: string;
  };
  iconfont?: string;
  screenfull?: {
    instance?: any;
    js?: string;
  };
  mermaid?: {
    instance?: any;
    js?: string;
  };
  katex?: {
    instance?: any;
    js?: string;
    css?: string;
  };
}

🪡 快捷键

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

!!! warning 注意事项

快捷键仅在输入框获取到焦点时可用！

!!!

键位功能说明
TAB空格通过tabWidth属性预设 TAB 键位新增空格长度，默认 2，支持多行
SHIFT + TAB取消空格同上，一次取消两个空格，支持多行
CTRL + C复制选中时复制选中内容，未选中时复制当前行内容
CTRL + X剪切选中时剪切选中内容，未选中时剪切当前行
CTRL + D删除选中时删除选中内容，未选中时删除当前行
CTRL + S保存触发编辑器的onSave回调
CTRL + B加粗**加粗**
CTRL + U下划线<u>下划线</u>
CTRL + I斜体*斜体*
CTRL + 1-61-6 级标题# 标题
CTRL + ↑上角标<sup>上角标</sup>
CTRL + ↓下角标<sub>下角标</sub>
CTRL + O有序列表1. 有序列表
CTRL + L链接[链接](https://imzbf.cc)
CTRL + Z撤回触发编辑器内内容撤回，与系统无关
CTRL + SHIFT + S删除线~删除线~
CTRL + SHIFT + U无序列表- 无序列表
CTRL + SHIFT + C块级代码多行代码块
CTRL + SHIFT + I图片链接![图片](https://imzbf.cc)
CTRL + SHIFT + Z前进一步触发编辑器内内容前进，与系统无关
CTRL + SHIFT + F美化内容
CTRL + ALT + C行内代码行内代码块
CTRL + SHIFT + ALT + T表格|表格|

🪤 内置组件

按需引用编辑器的扩展组件，例如：import { DropdownToolbar } from 'md-editor-v3'。

🐣 NormalToolbar

  • props

    • title: string，非必须，作为工具栏上的 hover 提示。

  • events

    • onClick: (e: MouseEvent) => void，必须，点击事件。

  • slots

    • trigger: string | JSX.Element，必须，通常是个图标，用来展示在工具栏上。
<template>
  <MdEditor ref="editorRef" v-model="text" :toolbars="['bold', 0, 'github']">
    <template #defToolbars>
      <NormalToolbar title="mark" @onClick="insert">
        <template #trigger>
          <svg class="md-editor-icon" aria-hidden="true">
            <use xlink:href="#icon-mark"></use>
          </svg>
        </template>
      </NormalToolbar>
    </template>
  </MdEditor>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { MdEditor, NormalToolbar } from 'md-editor-v3';
import type { ExposeParam } from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';

const text = ref('');
const editorRef = ref<ExposeParam>();

const insert = () => {
  editorRef.value?.insert((selectedText) => {
    /**
     * @return targetValue    待插入内容
     * @return select         插入后是否自动选中内容
     * @return deviationStart 插入后选中内容鼠标开始位置
     * @return deviationEnd   插入后选中内容鼠标结束位置
     */
    return {
      targetValue: `==${selectedText}==`,
      select: true,
      deviationStart: 0,
      deviationEnd: 0
    };
  });
};
</script>

获取使用源码

🐼 DropdownToolbar

  • props

    • title: string，非必须，作为工具栏上的 hover 提示。
    • visible: boolean，必须，下拉状态。

  • events

    • onChange: (visible: boolean) => void，必须，状态变化事件。

  • slots

    • trigger: string | JSX.Element，必须，通常是个图标，用来展示在工具栏上。
    • overlay: string | JSX.Element，必须，下拉框中的内容。
<template>
  <MdEditor ref="editorRef" v-model="state.text" :toolbars="['bold', 0, 'github']">
    <template #defToolbars>
      <DropdownToolbar
        title="emoji"
        :visible="state.emojiVisible"
        :onChange="emojiVisibleChanged"
      >
        <template #overlay>
          <div class="emoji-container">
            <ol class="emojis">
              <li
                v-for="(emoji, index) of emojis"
                :key="`emoji-${index}`"
                @click="insert(emoji)"
                v-text="emoji"
              ></li>
            </ol>
          </div>
        </template>
        <template #trigger>
          <svg class="md-editor-icon" aria-hidden="true">
            <use xlink:href="#icon-emoji"></use>
          </svg>
        </template>
      </DropdownToolbar>
    </template>
  </MdEditor>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { MdEditor, DropdownToolbar } from 'md-editor-v3';
import type { ExposeParam } from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';

const emojis = ['😀', '😃'];

const state = reactive({
  text: '',
  emojiVisible: false
});

const editorRef = ref<ExposeParam>();

const emojiVisibleChanged = () => {
  state.emojiVisible = !state.emojiVisible;
};

const insert = (emoji: any) => {
  editorRef.value?.insert(() => {
    /**
     * @return targetValue    待插入内容
     * @return select         插入后是否自动选中内容
     * @return deviationStart 插入后选中内容鼠标开始位置
     * @return deviationEnd   插入后选中内容鼠标结束位置
     */
    return {
      targetValue: emoji,
      select: true,
      deviationStart: 0,
      deviationEnd: 0
    };
  });
};
</script>

获取使用源码

🦉 ModalToolbar

  • props

    • title: string，非必须，作为工具栏上的 hover 提示。
    • modalTitle: string，非必须，弹窗的标题。
    • visible: boolean，必须，弹窗显示状态。
    • width: string，非必须，弹窗宽度，默认auto。
    • height：string，同width。
    • showAdjust: boolean，非必须，是否显示弹窗全屏按钮。
    • isFullscreen: boolean，显示全屏按钮时必须，弹窗全屏状态。

  • events

    • onClick: () => void，必须，工具栏点击事件。
    • onClose：() => void，必须，弹窗点击关闭事件。
    • onAdjust：(val: boolean) => void，弹窗全屏按钮点击事件。

  • slots

    • trigger: string | JSX.Element，必须，通常是个图标，用来展示在工具栏上。
    • overlay: string | JSX.Element，必须，下拉框中的内容。
<template>
  <MdEditor ref="editorRef" v-model="data.text" :toolbars="['bold', 0, 'github']">
    <template #defToolbars>
      <ModalToolbar
        :visible="data.modalVisible"
        :isFullscreen="data.modalFullscreen"
        showAdjust
        title="Preview"
        modalTitle="Page Preview"
        width="870px"
        height="600px"
        @onClick="data.modalVisible = true"
        @onClose="data.modalVisible = false"
        @onAdjust="data.modalFullscreen = !data.modalFullscreen"
      >
        <button @click="insert">Click me</button>
        <template #trigger>
          <svg class="md-editor-icon" aria-hidden="true">
            <use xlink:href="#icon-read"></use>
          </svg>
        </template>
      </ModalToolbar>
    </template>
  </MdEditor>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { MdEditor, ModalToolbar } from 'md-editor-v3';
import type { ExposeParam } from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';

const data = reactive({
  text: '',
  modalVisible: false,
  modalFullscreen: false
});

const editorRef = ref<ExposeParam>();

const insert = () => {
  editorRef.value?.insert((selectedText) => {
    /**
     * @return targetValue    待插入内容
     * @return select         插入后是否自动选中内容
     * @return deviationStart 插入后选中内容鼠标开始位置
     * @return deviationEnd   插入后选中内容鼠标结束位置
     */
    return {
      targetValue: `==${selectedText}==`,
      select: true,
      deviationStart: 0,
      deviationEnd: 0
    };
  });
};
</script>

获取使用源码

🐻 MdCatalog

  • props

    • editorId: string，必须，对应编辑器的editorId，在内部注册目录变化监听事件。
    • class: string，非必须，目录组件最外层类名。
    • mdHeadingId: mdHeadingId，非必须，特殊化编辑器标题的算法，与编辑器相同。
    • scrollElement: string | HTMLElement，非必须，为字符时应是一个元素选择器。仅预览模式中，整页滚动时，设置为document.documentElement。
    • theme: 'light' | 'dark'，非必须，当需要切换主题时提供，同编辑器的theme。
    • offsetTop: number，非必须，标题距离顶部该像素时高亮当前目录项，默认 20 像素。
    • scrollElementOffsetTop: number，非必须，滚动区域的固定顶部高度，默认 0。

  • events

    • onClick: (e: MouseEvent, t: TocItem) => void，非必须，导航点击事件。

scrollElement说明：仅预览下，该元素必须已定位的并且支持滚动。

<template>
  <!-- 保证editorId相同 -->
  <MdPreview :editorId="state.id" :modelValue="state.text" :theme="state.theme" />
  <MdCatalog :editorId="state.id" :scrollElement="scrollElement" :theme="state.theme" />
</template>

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

const state = reactive({
  theme: 'dark',
  text: '标题',
  id: 'my-editor'
});

const scrollElement = document.documentElement;
</script>

✍️ 编辑此页面

doc-zh-CN

~栋
关注
api接口文档.md
03-11
v-shop api接口文档.md Vue实战项目：电商管理系统（Element-UI） ----------------- 文章地址：https://lawsssscat.blog.csdn.net/article/details/104801783 github： https://github.com/LawssssCat/v-shop https://github.com/LawssssCat/v-shop-server
md文档的使用
zns2101的博客
03-28 1278
你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：撤销：Ctrl/Command + Z 重做：Ctrl/Command + Y 加粗：Ctrl/Command + B 斜体：Ctrl/Command + I 标题：Ctrl/Command + S
vue3项目中使用md-editor-v3
最新发布
weixin_39293433的博客
02-28 764
在项目使用Markdown编辑器,有很多的版本如md-editor-v3、v-md-editor等等。md-editor-v3基于Vue3版本的，使用jsx和typescript语法开发，支持切换主题、prettier美化文本等，界面也是非常简洁好看的。目前该项目一直在迭代中。
随便
qq_44103567的博客
09-17 328
这里写自义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Mar...
MD文档使用说明
adafdsfas的博客
09-21 1808
你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：撤销：Ctrl/Command + Z 重做：Ctrl/Command + Y 加粗：Ctrl/Command + B 斜体：Ctrl/Command + I 标题：Ctrl/Command + S
ＭＤ在线文档
weixin_30809333的博客
05-20 492
本来设计好一个MD的在线文档功能，让同事帮忙做，也给他一个锻炼的机会，但他似乎没有get到我这种追求美的人的要求，以至于他只为了完成任务，而不注重用户体验以及优雅的代码，匆忙地交差了事，然后。。。，我的设计成了烂尾，而我也放弃了寻找一个搭档的想法。 　　人生遇上一个适合自己心意的人，还真是件难事。至少，在对待技术追求上面，就是有着区别的。 　　不过，对于追求美的人来说，这些都是小事，即将将我的设计...
python对文件进行操作.md
03-16
学习python，对文件的操作方法的笔记
java实现对文件的各种操作的工具类.md
04-02
# java实现对文件的各种操作的工具类 ## 可以实现的操作有: 1. 删除单个文件 2. 删除文件夹及文件夹下的文件 3. 使用文件流对单个文件进行复制 4. 复制整个文件夹内容(包含子文件夹中的所有内容) 5. ...
linux基本操作MD文档大全.7z
10-26
这个“linux基本操作MD文档大全.7z”包含了丰富的资源，旨在帮助用户深入理解并熟练应用Linux系统的各项功能。下面将对其中可能涉及的主要知识点进行详细阐述。 1-**系统基本操作.md**：这份文档很可能是对Linux...
中标麒麟高级服务器操作系统软件MD5校验_MD5_md5 文件
09-23
标题中的“中标麒麟高级服务器操作系统软件MD5校验”指的是在安装或下载操作系统软件时，为了验证文件的完整性和未被篡改，通常会使用MD5校验码来进行检查。MD5（Message-Digest Algorithm 5）是一种广泛使用的哈希...
md5文件校验器-窗口操作
12-06
MD5文件校验器是一种在Windows操作系统环境下使用的实用工具，主要功能是验证文件的完整性和未被篡改。MD5（Message-Digest Algorithm 5）是一种广泛使用的哈希函数，可以将任意长度的数据转化为固定长度的摘要信息...
MD文档说明软件
11-19
MD文档说明自己认为最好用的软件，内容可以编程，可以试一试哈。
板块：基于Markdown（md）的API文档工具
02-04
盘子 Plate是基于Markdown（md）的API文档工具。 将基于Ruby-Middleman的转换为基于Python-Flask的图像。 并添加一些不同的功能以供使用。 示例站点是 。 标牌文件为 。 产品特点 配置文件（config.json） ：设置标题，使用基于JSON格式的config.json编程示例代码的语言。 还要设置API文档和目录的路径。 任何人都可以轻松设置。 支持多种API文档：支持多种API文档（多种降价格式文件），可高效管理文件。 使用时，可以通过API或其他条件使用一个markdown文件或单独的markdown文件。 您也可以使用TOC（index.
md文档使用.md.txt
03-31
最详细的md文档教程，源码提示，一看就会，保证看完使用md编辑器最牛！ 希望大家喜欢我的分享！
md使用手册.md md基本使用
07-07
md使用手册.md md基本使用
shape检查维数
qq_42735433的博客
08-31 381
检查维数shape[0]表示行新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 shape[0]表示行 shap...
.md文件格式详解，即markdown文件语法（图文对照），新生代农民工必备技能
热门推荐
【小石头的茅坑】
02-21 77万+
对于程序员，经常用github、码云等，对于md很常见了。 Markdown 是一种轻量级标记语言，。 它允许人们使用易读易写的纯文本格式编写文档，然后转换成有效的HTML文档。 由于 Markdown 的轻量化、易读易写特性，并且对于图片，图表、数学式都有支持，许多网站都广泛使用 Markdown 来撰写帮助文档或是用于论坛上发表消息。 如GitHub、Reddit、Diaspora、Stack Exchange、OpenStreetMap、SourceForge、简书等，甚至还能被使用来撰写电子..
.md文档编写（Markdown在线编辑器链接篇）
qq_64305962的博客
04-25 1907
Markdown 在线编辑器· 开发者工具箱 (devtool.tech)前言: 本篇仅此工作学习使用.md在线编辑器，推荐。
可以打开md_「硬核教程」只需1秒—你也可以有自己的API文档
weixin_42423852的博客
12-29 821
Nothing is true. Everything is permitted.写在前面先聊聊为什么想到了要用Vuepress来代替原来写在Confluence上的文档。大意是有个需要其他部门接入的项目，这个项目有个用md写的接入文档，其他部门的人需要看着这个文档才知道怎么接以及哪些东西需要接。但是有个问题是这个文档长的一匹，有多长呢？而且这个md文件是放在confluence上的。本身用con...
C#编程：文本文件操作与MD5实现详解
在C#中，我们可以使用`System.IO`命名空间中的类来读取、写入或操作文本文件。以下是一个简单的示例，演示如何读取一个文本文件的内容并将其显示在一个`RichTextBox`控件中： ```csharp using System.IO; // 创建...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值