来康康vue3环境下的markdown编辑器md-editor-v3吧，支持tsx，暗黑模式哦~

这一切都源于在开发vue3-admin的demo内容时，没有合适的编辑器组件。

仅支持 vue3 项目下使用，使用 jsx 语法开发，支持在 tsx 项目使用。为了减小插入，没有使用less.modifyVars方法来切换主题，而采用了替换 class 名称的方式。

代码仓库：md-editor-v3

1. 快捷插入内容工具栏、编辑器浏览器全屏、页面内全屏等；
2. 内置的白色主题和暗黑主题，支持绑定切换；
3. 支持快捷键插入内容；
4. 支持使用 prettier 格式化内容（使用 CDN 方式引入，只支持格式化 md 内容，可在代码内设置关闭）；
5. 支持多语言，支持自行扩展语言；
6. 支持复制粘贴上传图片；

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

默认模式下：

暗黑模式下：

主题跟随前往vue3-admin尝试~~

编辑器主页演示没开发完~~~

注意在 jsx 下需使用 modelValue 配合 onChange 方法完成数据绑定，在 vue 模板语法下，可以直接使用 v-modal 指令~

props

名称类型默认值说明modelValueString''md 编辑内容，vue 模板支持双向绑定（v-model="value"）editorClassString''编辑器最外层样式hljsObjectnull项目中使用到了 highlight，可将实例直接传递，生产环境则不会请求 CDN，需要手动导入支持的高亮代码样式highlightJsStringhighlight.jshighlightJs CDNhighlightCssStringatom-one-dark预览高亮代码样式historyLengthNumber10最大记录操作数（太大会占用内存）pageFullScreenBooleanfalse浏览器内全屏previewBooleantrue预览模式htmlPreviewBooleanfalsehtml 预览languageString'zh-CN'内置中英文('zh-CN','en-US')，可自行扩展其他语言，同时可覆盖内置的中英文languageUserDefinedArray[{key: StaticTextDefaultValue}]通过这里扩展语言，修改 language 值为扩展 key 即可，类型申明可手动导入toolbarsArray[all]选择性展示工具栏，可选内容如下[toolbars]prettierBooleantrue是否启用 prettier 优化 md 内容prettierCDNStringstandalone prettierMDCDNStringparser-markdowneditorNameString'editor'当在同一页面放置了多个编辑器，最好提供该属性以区别某些带有 ID 的内容

[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 {
  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;
  };
}

名称入参说明onChangev:String内容变化事件（当前与textare的oninput事件绑定，每输入一个单字即会触发）onSavev:String保存事件，快捷键与保存按钮均会触发onUploadImgfiles:FileList, callback:Function上传图片事件，弹窗会等待上传结果，务必将上传后的 urls 作为 callback 入参回传

主要以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表格`\表格\` 放弃开发（无法实现）xCTRL + 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行内代码行内代码块√

yarn add md-editor-v3

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

该项目目前只生存了3周，使用中有bug期待你能留言给我，有想要的功能期待了解哦。另外审美一般，轻喷。