• J3
  • Little clip # article

This is an article I wrote with the text editor of a small folder.

The main explanation here is that the small clip online an article content preparation function. After this function goes online the user can not copy the station outside link to be able to generate small clip net only resource article link oh!

For usually like to take notes, write a log, write a plan, can use small clip net article writing function, convenient and practical.

Article writing function of the specific implementation of it, mainly rely on the front end, after all, is to write things on the web page, and the experience of writing is the key, the back end is only store an article content field is OK (of course, the back end is not simple).

After referring to many Markdown syntax editors on the market, I chose ByteMD.

The ByteMD editor is an open source editor component from byteDance’s Nuggets team, and I was amazed by it when I posted to the Nuggets community. Seriously, the look is really good for me, so I integrated it into the little clip Vue project.

The result is 👇👇👇

Using Vue to develop front-end projects gives me the biggest feeling, plug and play, very convenient. The documentation provided by ByteMD provides a basic tutorial for using Vue projects, which I think is sufficient for simple use. But, for my project, the clip, not necessarily.

First, let me talk about integration steps.

The first step:

All dependent functions of Vue must be inatall before the corresponding environment can be created. Run the following command first:

NPM install @bytemd/vue-next since I am Vue2, use this commandCopy the code

The second step:

On the corresponding article page, import the ByteMD style file

import 'bytemd/dist/index.css'
Copy the code

Step 3:

Use the content editing space provided by ByteMD

<template>
  <Editor :value="value" :plugins="plugins" @change="handleChange" />
</template>

<script>
import { Editor } from '@bytemd/vue'
import gfm from '@bytemd/plugin-gfm'

const plugins = [
  gfm(),
  // Add more plugins here
]

export default {
  components: { Editor },
  data() {
    return { value: '', plugins }
  },
  methods: {
    handleChange(v) {
      this.value = v
    },
  },
}
</script>
Copy the code

Description:

  • EditorContent editing control, the effect is as shown above, but the initialization of the control is English, and the style is slightly different, with you to modify the style.
  • pluginsA list of plugins with special features supported by content controls, such as support for code highlighting, image optimization, etc.
  • valueThe value entered in the content control is bound back to the variable corresponding to the property.

After integration, it will be found that the effect is a little unsatisfactory. Let’s take a look at the effect of direct operation:

Intuitively, there are two points:

  • The page is in English, not In Chinese
  • The height of the edit area is not good, it does not fill the entire page

Although the probability that users can write content on the small clip is almost zero, but this directly run out of the style I also can’t look down, to change!

The first one is very simple, and there are relevant hints in the official documents. The steps are as follows:

1. Introduce Chinese packages

Import zhHans from 'bytemd/locales/ zh_hans.json 'Copy the code

2. Declare Chinese package variables

Data () {return {// declare the package variable zhHans}}Copy the code

3. Use in components

<Editor :locale="zhHans" :value="addContent.content" :plugins="plugins"/>
Copy the code

That’s it! Very simple!

Then there’s the styling of the edit area.

In the official documentation, it is mentioned that it can override the styles in the component, and I have done so, as if there is no soft use. My use steps are as follows, if it is because of my use method is wrong, I apologize, after all, I am a back-end development 😆.

<template> <Editor :locale="zhHans" :value="addContent.content" :plugins="plugins"/> </template> <script> // This is the official style I imported import 'bytemd/dist/index.css' import { Editor } from '@bytemd/vue' import gfm from '@bytemd/plugin-gfm' import zhHans from 'bytemd/locales/zh_Hans.json' const plugins = [ gfm(), // Add more plugins here ] export default { components: { Editor }, data() { return { value: '', plugins, zhHans } }, methods: HandleChange (v) {this.value = v}}} </script> <style scoped> # } </style>Copy the code

Writing a style in the style tag of the current page has no effect, which only means that the style is not overwritten.

What? According to the official documents, there are mistakes.

This is my first reaction at that time, but there is no way, the function or to achieve, so all kinds of search on Baidu. Overall search for several hours, very disappointed, none useful, are basically the same as the official documents, no reference value, then WHAT can I do now?

Is it really at the bottom of their own handwriting CSS style, otherwise the above editing effect is too ugly.

Suddenly, I seem to think of what ~

I know, this text editing component nuggets community is also reusable, because I often post in nuggets every time can be attracted by its beautiful interface, ha ha! Can I make a magic change to the ByteMD component style I introduced myself in F12 compared to the gold-digging text editing area style? I think so.

ByteMD global style = ByteMD global style = ByteMD global style = ByteMD

This way, I can directly affect the editing component I introduced by changing the local index. CSS style file, and this is the case. I changed the index. CSS style file and it will display normally on the page.

Also, MY ability to write CSS in this style is limited (dishes are original sin), but I will CV! So I go to the Nuggets, type in the same article in my text area and the Nuggets text area, compare them, and if they don’t match, I’ll CV the nuggets to my local index.css file. After a bit of tinkering with my text editing component style, the result was pretty good.

Finally, the problem of editing is solved, and how to show the saved content to the user!

That’s what the Viewer tag does. Just attach the plugins and values to the Editor and you’re done. It looks exactly the same as it looks in the preview.

Finally, take a look at the comparison between the clip and the nuggets (to prove it 😁) :

Above, the front end of the work to do is completed, I will not expand the back end here, there is no workload. But if you are interested in the back-end code of this website, you can also contact me to discuss.

Said so much, still want everybody talent oneself use just know effect how, so everybody talent still don’t grasp use up 😏😏😏.

That's it for today, follow me, and we'll see you next time

If you have any questions, please contact me at:

QQ: 1491989462

WeChat: 13207920596

  • Due to the lack of knowledge of the blogger, there will be mistakes, if you find mistakes or bias, please comment to me, I will correct it.
  • If you think the article is good, your retweets, shares, likes and comments are the biggest encouragement to me.
  • Thank you for reading. Welcome and thank you for your attention.