“This article has participated in the call for good writing activities, click to view: the back end, the big front end double track submission, 20,000 yuan prize pool waiting for you to challenge!”

rendering

Rely on: v – md – editor

英 文 名 称 : V-MD-Editor

This article uses the advanced version

1. Install v-MD-Editor

# use npm
npm i @kangc/v-md-editor -S

# use yarn
yarn add @kangc/v-md-editor
Copy the code

2. Quick Start

import Vue from 'vue';
import VueMarkdownEditor from '@kangc/v-md-editor';
import '@kangc/v-md-editor/lib/style/base-editor.css';
import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js';

VueMarkdownEditor.use(vuepressTheme);

Vue.use(VueMarkdownEditor);
Copy the code

Use 3.

<template> <v-md-editor v-model="text" height="400px"></v-md-editor> </template> <script> export default { data() { return { text: '', }; }}; </script>Copy the code

4. Introduce the VuePress theme

Extend the markdown – it

import Prism from 'prismjs'; Vuemarkdowneditor. use(vuepressTheme, {Prism, extend(md) {// md for markdown-it instance, // md.set(option). Use (plugin); // md.set(option). }});Copy the code

Extension code highlighting language packs

The babel-plugin-Prismjs (new Window) plug-in can be used to import the corresponding language package.

Install the babel-plugin-prismjs plug-in

# yarn
yarn add babel-plugin-prismjs --dev

# npm
npm install babel-plugin-prismjs
Copy the code

Introduce language packs on demand (recommended)

// babel.config.js
module.exports = {
  plugins: [
    [
      'prismjs',
      {
        languages: ['json'],
      },
    ],
  ],
};
Copy the code

5. Add the function of uploading pictures (uploading local pictures)

Principle: Upload an image to the file server, and insert the returned image information into the editing area after the upload is successful.

Pay attention to

The upload picture menu is disabled by default. Disabling – Menus with an empty array can be enabled. `

The sample code
<template> <v-md-editor v-model="text" left-toolbar="undo redo | image" :disabled-menus="[]" @upload-image="handleUploadImage" height="500px" /> </template> <script> export default { data() { return { text: "'}; }, methods: {handleUploadImage(event, insertImage, files) { InsertImage ({url: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1269952892, & FM = 26 & gp = 0. 3525182336 JPG', desc: // width: 'auto', // height: 'auto',}) ,}}}; </script>Copy the code

Conclusion:

Code summary and explanation

<template> <vue-markdown-editor v-model="editor" height="100%" :disabled-menus="[]" @upload-image="onUploadImage" ></vue-markdown-editor> </template> <script> import VueMarkdownEditor from '@kangc/v-md-editor' import '@kangc/v-md-editor/lib/style/base-editor.css' import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js' import '@kangc/v-md-editor/lib/theme/style/vuepress.css' import Prism from 'prismjs' import axios from 'axios' import auth from '@/utils/auth' VueMarkdownEditor.use(vuepressTheme, { Prism, extend(md) {} }) export default { data() { return { editor: '', } }, components: { VueMarkdownEditor }, mounted() { document.querySelector('.v-md-editor').style.height = document.body.offsetHeight - 50 + 'px' }, methods: OnUploadImage (event, insertImage, files) {const file = files[0], path = process.env.vue_app_base_api, index = path.lastIndexOf("\/") let param = new FormData() param.append('image', file) const config = { headers: { 'Content-Type': 'multipart/form-data', 'Authorization': auth.getToken() } } axios.post(`${path}doc/uploadfile/`, param, config).then(r => { if(r.data.code == 200) { const last = path.slice(0, index) insertImage({ url: Last + r.data.data.url, desc: files[0].name})}}). Catch (e => {this.toast (2, 'there is something wrong with this, please try again later ')})}}; </script> <style> .vuepress-markdown-body h1{ font-size: 28px; } .vuepress-markdown-body h2{ font-size: 26px; } .vuepress-markdown-body h3{ font-size: 24px; } .vuepress-markdown-body h4{ font-size: 22px; } .vuepress-markdown-body h5{ font-size: 20px; } .vuepress-markdown-body:not(.custom){padding: 5px 10px! important; } </style>Copy the code

  1. document.querySelector(‘.v-md-editor’).style.height = document.body.offsetHeight – 50 + ‘px’ This step is to ensure that the Markdown editor is highly consistent with the body element, ensuring that it fills the screen

  2. The font setting of style, because I have the base style library, the size of h tag, etc., has been dealt with, so I need to deal with it again

  3. OnUploadImage this is how you upload an image

At the end

Lazy people, do not want to map, hope to help you

Public number: small he growth, the Buddha department more text, are their own once stepped on the pit or is learned things

Interested little partners welcome to pay attention to me oh, I was: he Small Life. Everybody progress duck together