关于前端:来康康vue3环境下的markdown编辑器mdeditorv3吧支持tsx暗黑模式哦

开发背景

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

阐明

仅反对 vue3 我的项目下应用，应用 jsx 语法开发，反对在 tsx 我的项目应用。为了减小插入，没有应用 less.modifyVars 办法来切换主题，而采纳了替换 class 名称的形式。

代码仓库：md-editor-v3

性能一览

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

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

预览图

默认模式下：

暗黑模式下：

在线预览

主题追随返回 vue3-admin 尝试~~

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

apis

留神在 jsx 下需应用 modelValue 配合 onChange 办法实现数据绑定，在 vue 模板语法下，能够间接应用 v-modal 指令~

props

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

事件绑定

快捷键

次要以 CTRL 搭配对应性能英文单词首字母，抵触项增加SHIFT，再抵触替换为ALT。

演示

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 期待你能留言给我，有想要的性能期待理解哦。另外审美个别，轻喷。