“This is the second day of my participation in the First Challenge 2022.

The new version of rich text uses ByteDance’s rich text plug-in ByteMD

The rich text editor in the project of the company has been using vue- quill-Editor, which has ok general function, but the style is too ugly. In the continuous demand, it gradually cannot meet the overall situation of the current project. In the page of writing articles in nuggets, I learned about this rich text plug-in ByteMD

code

html

In the VUE component

<Editor class="byte-editor"

        :locale="zhHans"

        :value="value"

        :plugins="plugins"

        @change="handleChange"

        :uploadImages="(files) => uploadImages(files)" />

Copy the code
attribute describe
zhHans  Chinese dependency package
value Component bidirectional binding requires a value declared in data
plugins The collection of plug-ins that a component needs to extend
handleChange The method callback where value changes, we can do some textual processing here
uploadImages Image upload, when there are images and other resources, we can upload to the server, convert to URL preview, or transfer out of Base64 (not recommended)

Module is introduced into

Bytemd, the MD editor, has been introduced in a modular way, and we need to introduce the corresponding dependencies separately

The plug-ins to be introduced include GFM, Breaks, FrontMatter, mediumZoom, Highlight, Math, Avi, FootNotes, zhHans, gfmLocale, mathLocale, and mermaidLocale.

import 'bytemd/dist/index.min.css';

import { Editor } from '@bytemd/vue';
Copy the code

The main method

uploadImages

Image resources can either be transferred out of Base64 or uploaded to a server, which we recommend.

After the image is converted to Base64, the corresponding text information becomes larger than the original image and is stored in the database, which affects the data acquisition speed and leads to poor experience.

Async upload(files) {const formData = new formData (); formData.append('file', files); // const res = await axios.post('/ API /upload', formData, {headers: {' content-type ': 'multipart/form-data', }, }); return res.data; }, // async uploadImages(files) {const imgs = []; for (const file of files) { const key = await this.upload(file); imgs.push({ title: key.name, url: key.url, }); } return imgs; },Copy the code

We upload the image asynchronously, get the corresponding server url, return the entire IMG array set, so in rich text, can be normal image preview;

We pass the value to the back end and save it in the database.

sublimation

HTML to md

When I copy text, it’s always plain text in rich text, but when I copy rich text to nuggets it’s formatted markdown, and then WHEN I copy text to Typora it’s formatted, just slightly wrong; It should be markdown syntax

After wondering, I assumed that the nuggets had done a Markdown conversion while copying the text;

Open the console

As you can see in Network, the interface is called when the text is copied

It turns out that the HTML goes to Markdown in the background

But how shall I turn it; So another meal baidu,

Asked back-end colleagues, most of them do not understand, only from the front start

I found an HTML Markdown Turndown on Github

import TurndownService from ‘turndown’;

Require in the documentation, import in this case;

We call the TurndownService method by listening for the paste event;

So here we can do markdown for text/ HTML;

/** * paste */ async pasteTxt(ev) {ev.preventdefault (); const data = ev.clipboardData.items; for (let i = 0; i < data.length; i += 1) { if ((data[i].kind === 'string') && (data[i].type.match('^text/html'))) { // Drag data item is HTML const h = await new Promise(t => data[i].getAsString(e => t(e))); const param = { text: h, } console.log('markdown', h) const turndownService = new TurndownService() this.value = turndownService.turndown(h) } } },Copy the code

That’s how I used the byteMd editor in Vue

Think about:

For the uploaded image, we are directly put in the server, when the text editing, how to delete the image, delete the corresponding server image?