preface

Vue configures bytemd nuggets with the same markdown editor

Markdown editor for programmers to write is relatively convenient, especially after learning to master the grammar, it is a powerful tool for writing, so today to learn to see the official documentation of the same bytemd nuggets to configure configuration

Why use

Because I need a Markdown editor in the background to edit my blog content. Looking at the editor of Nuggets, I felt very good, so I began to search and found that bytemd was used, so I started to check the information and configure it in my own project! Here is the project’s official address and demo

Github address: Github

Official demo: Demo demo

On the pit process

Overall summary comes down, be oneself of technology too dish! React helps a lot, so I started to stomp on vue. I hope I can help those in need.

Do ‘w download and install vue for use

NPM install @bytemd/ vue-s (or use yarn) yarn add @bytemd/ vue-s

Vue file used inside

<template> <div> <Editor class="editos" :value="value" /> <Viewer class="viewer" :tabindex="2" :value="value" ></Viewer>  </div> </template> <script> import { Editor, Viewer } from '@bytemd/vue' export default { data () { return { value: }}, components: {Editor, Viewer}, // Component registration} </script>Copy the code

Installing a plug-in

The github documentation website has plug-ins that you can install on demand or all of them

My suggestion is that if it’s a personal project, you don’t need care to directly take it all

You can install NPM, then continue to install two, one is the theme style and one is the configuration of Chinese, you go to Github directly copy json file or CSS can also be.

NPM I bytemd -s // Etc

NPM I juejin-markdown- themes-s // etc

Configuration in Chinese

NPM I bytemd -s You can also copy the json file directly below this package

<Editor :locale="zhHans" /> js code import zhHans from 'bytemd/lib/locales/ zh_hans.json 'data () {return {zhHans}}Copy the code

Configuring image Uploading

Originally is the need to configure the plug-in, but in the latest version has been directly integrated, the way to open is also very simple!

<Editor :uploadImages="uploadImage"/> Console. log('files', files) return [{title: files.map((I) => i.name), url: 'HTTP'}]}Copy the code

Configure style themes

Here I stuck for a long time, behind know is simply to introduce CSS files, I am numb ~ speechless

Markdown theme: Github address of the Markdown theme

Import ‘juejin – markdown – themes/dist/juejin. Min. CSS’ direct introduction can use different theme, using the nuggets here, friends like other can also use different style!

Complete configuration code

Here’s a quick explanation of the two components exported from @bytemd/vue

The Editor Editor

The Viewer for the reader

The Editor can modify, add, and the Viewer can only view, i.e. render the markdow document you have stored. In the same way that the editor is configured with plug-ins, the reader also needs to be configured to render the style code you store

<template> <div class="details"> <Editor class="editos" :value="value" :plugins="plugins" :locale="zhHans" @change="handleChange" :uploadImages="uploadImage" /> <Viewer class=" Viewer ": tabIndex ="2" // Value ="value" :plugins="plugins" :locale="zhHans" ></Viewer> <div class="fl al BTN "> <el-button @click="send" type="primary"> </el-button> </el-button @click="send" type="primary"> </el-button> </div> </template> <script> import 'bytemd/dist/index.css' Viewer } from '@bytemd/vue' import gfm from '@bytemd/plugin-gfm' import highlightssr from '@bytemd/plugin-highlight-ssr'  import highlight from '@bytemd/plugin-highlight' import breaks from '@bytemd/plugin-breaks' import footnotes from '@bytemd/plugin-footnotes' import frontmatter from '@bytemd/plugin-frontmatter' import gemoji from '@bytemd/plugin-gemoji' import mediumZoom from '@bytemd/plugin-medium-zoom' import zhHans from 'bytemd/lib/locales/zh_Hans.json' import 'highlight.js/styles/vs.css' import 'juejin - markdown - themes/dist/juejin. Min. CSS' / / is actually need the CSS file const plugins = [/ / all the extension function in a plugin in the array, GFM (), highlight(), highlightSSR (), breaks(), frontMatter (), footNotes (), gemoji(), MediumZoom ()] export default {components: {Editor, Viewer}, // Data () {return {value: }}, // plugins, // simplified Chinese}, methods: HandleChange (v) {console.warn(v) this.value = v}, Async uploadImage (files) {console.log('files', files) return [{title: async uploadImage (files) {console.log('files', files) files.map((i) => i.name), url: 'http' } ] } } } </script> <style lang="scss"> .details { position: fixed; top: 60px; left: 0; width: 100vw; height: 100vh; .editos { .bytemd { height: calc(100vh - 150px) ! important; }}. Viewer {margin-top: 20px; background: #fff; padding: 20px; .bytemd { height: calc(100vh - 200px) ! important; } } .btn { flex-direction: row-reverse; margin: 20px; .el-button { margin-right: 20px; } } } </style>Copy the code

At the end

These are the problems I encountered when using Vue to configure the editor bytemd. Record them for future reference