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

The name of the type The default value instructions
modelValue String ‘ ‘ Vue template supports bidirectional binding (V-Model =”value”)
editorClass String ‘ ‘ Outermost style of editor
hljs Object null Highlight is used in the project, and the instance can be passed directly. The production environment does not request a CDN and needs to manually import the supported highlighting code style
highlightJs String highlight.js highlightJs CDN
highlightCss String atom-one-dark Preview highlighted code styles
historyLength Number 10 Maximum record operand (too large a memory footprint)
pageFullScreen Boolean false Full screen inside the browser
preview Boolean true Preview mode
htmlPreview Boolean false HTML preview
language String ‘zh-CN’ Built-in English and Chinese (‘ zh-cn ‘,’ en-us ‘), can be extended to other languages, and can override the built-in English and Chinese
languageUserDefined Array [{key: StaticTextDefaultValue}] You can extend the language here by changing the language value to extension key, and the type declaration can be imported manually
toolbars Array [all] Select the toolbar to display. The optional content is as follows[toolbars]
prettier Boolean true Whether to enable prettier to optimize MD content
prettierCDN String standalone
prettierMDCDN String parser-markdown
editorName String ‘editor’ When multiple editors are placed on the same page, it is a good idea to provide this property to distinguish something with an 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'
];
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

The name of the The ginseng instructions
onChange v:String Content change events (current withtextaretheoninputEvent binding, which is triggered every time a word is entered)
onSave v:String The save event, shortcut key and save button are triggered
onUploadImg files:FileList, callback:Function Upload the image event and the popover will wait for the result. Be sure to send the uploaded urls as a callback

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.

A specialized function instructions Developing tag
CTRL + S save That triggers the editoronSaveThe callback Square root
CTRL + B bold Bold * * * * Square root
CTRL + U The underline <u> Underline </u> Square root
CTRL + I italics * italics * Square root
CTRL + 1-6 Level 1-6 title # titles Square root
CTRL + write Angle on the </sup> Square root
CTRL + left Under the Angle of the <sub> </sub> Square root
CTRL + Q reference > reference Square root
CTRL + O An ordered list 1. Ordered lists Square root
CTRL + L link [link] (https://imbf.cc) Square root
CTRL + T form | | formAbandon development (impossible) x
CTRL + Z To withdraw Triggers an editor retraction, system independent Square root
CTRL + SHIFT + S Delete the line ~ Delete line ~ Square root
CTRL + SHIFT + U Unordered list - Unordered list Square root
CTRL + SHIFT + C Block-level code Multiline blocks of code Square root
CTRL + SHIFT + I Image links ! [images] (https://imbf.cc) Square root
CTRL + SHIFT + Z Before further Triggers content to advance in the editor, system independent Square root
CTRL + SHIFT + F Beautify the content Square root
CTRL + ALT + C The inline code Inline code block Square root

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.