Come to kangkang vuE3 markdown editor MD-Editor-V3, support TSX, dark mode oh ~

Development background

It all started when the vue3-admin demo content was developed without the proper editor component.

The online preview

portal

instructions

Supported only under VUE3 projects, developed using JSX syntax, supported on TSX projects. To minimize inserts, instead of using the less. ModifyVars method to switch topics, the class name was replaced.

Code repository: MD-editor-v3

Function in

1. Quick insert content toolbar, full-screen editor browser, full-screen inside the page, etc.
2. Built-in white theme and dark theme, support binding toggle;
3. Support shortcut keys to insert content;
4. “Prettier” can be used to format content. (” CDN “is used for importing an prettier. Only MD content can be formatted and can be disabled in the code.)
5. Support for multiple languages, support to extend the language;
6. Support copy, paste and upload pictures;
7. .

More functions to be updated later, if you want the function is not developed, please leave a message ~

preview

In default mode:

In Dark Mode:

apis

Note that in JSX, it is necessary to use modelValue and onChange method to complete data binding. In VUE template syntax, v-modal instruction ~ can be used directly

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'
];
Copy the code

Custom language, need to replace the following content (if you do not actively provide some fields, may cause the page is not beautiful) :

[StaticTextDefaultValue]

export interfaceStaticTextDefaultValue { 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;
  };
}
Copy the code

event

shortcuts

CTRL is used to match the first letter of the corresponding English word, SHIFT is added to the conflict items, and then replace the conflict with ALT.

demo

yarn add md-editor-v3
Copy the code

JSX syntax project

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)} />); }});Copy the code

Vue template project

<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: 'Default'}; }});</script>

Copy the code

To upload pictures

By default, you can select more than one picture and upload the picture from the paste board.

Note: When uploading the paste board, if it is a GIF on the web page, it cannot be correctly uploaded to the GIF format!

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));
}
Copy the code

At the end

The project has only survived for 3 weeks now. I hope you can leave me a message if there are bugs in use. I am looking forward to knowing what functions you want.