Detailed explanation of the introduction of ueditor and node background configuration in vue

Recently, a customer in the company wanted to use our company's products. The rich text editor in his background management has a lot of requirements. He started to use Quill, but found that Quill could not meet his needs at all. After investigating the rich text editors on the market, it seems that only Baidu's ueditor is left. Although it's ugly~~~, it doesn't matter, the government website is more suitable for this effect:-D Did I say anything (escape)

Vue introduces ueditor

step

1. Download Baidu ueditor, any version is better (this article takes the php version as an example). If you don’t need special comprehensive functions, you can consider UM.
2. Put the corresponding folder into static
3. Modify the reference of the front-end vue part, set the path window.UEDITOR_HOME_URL = "/static/utf8-php/"

window.UEDITOR_HOME_URL = "/static/utf8-php/"

 var URL = window.UEDITOR_HOME_URL || getUEBasePath();
 /**
   * Configuration item body.  Note that all configurations involving paths are not missed here.
   */
 window.UEDITOR_CONFIG = {

  //Add a path to the editor instance, this cannot be commented  UEDITOR_HOME_URL: URL
  // The server requests the interface path  , serverUrl: "http://localhost:3000/ueditor/ue"
 // ......... Ignore below.........

When writing a vue file, I have configured static into the webpack path and can change it accordingly. The methods in ueditor can be found in the Baidu ueditor package I downloaded.

<template>
 <div class="hello">
 <script  type="text/plain"></script>
 <button @click="show">Do you dare to click？</button>
 </div>
</template>

<script>
export default {
 name: 'HelloWorld',
 data () {
 return {
  editor: null
 }
 },
 methods: {
 show () {
  (())
 }
 },
 mounted () {
 require('static/utf8-php/')
 require('static/utf8-php/')
 require('static/utf8-php/lang/zh-cn/')
 require('static/utf8-php/')
  = ('editor')
 },
 destroyed () {
 ()
 }
}
</script>

Things to note

1. The path in step 3 must have the last "/"
2. Write serverUrl in step 3 as the corresponding server address

Node backend processing

Express implementation

Someone online has implemented the express version, and those who use express will be blessed. However, I cannot use it directly. I reported ": unexpectedly" in the browser. I changed his code and did not allow it to redirect when returning the configuration, but directly returned a jsonp. The jsonp content is set to the php file in Baidu's ueditor package. Remember to use regular expressions or directly remove the comments. Json has no comments.
At this time, you may find that there is no error, but the image upload will be incorrect, and the image will be reported to be 404. In fact, the image has been uploaded successfully, but it is not loaded correctly, because the returned path is just a path, not a complete url, and it will be requested to the front-end service domain. (For example "http://localhost:8080/**"). At this time, modify "imageUrlPrefix": "http://localhost:3000" to complete the image path. Solve cross-domain problems yourself ----

1. ()
2. Add backend domain to imageUrlPrefix

koa implementation

At this time, a relatively exquisite library, and the generator writing method will be removed in v3. Generator is now gradually not supported, so use async writing method. I mainly use the await-busboy library to implement file processing.

Realize judgment

const ActionType = 
// When ActionType is config, return the same json as in express// Processed when uploadimage or uploadfileProcess upload
const parse = require('await-busboy')
const parts = parse(ctx)
 let part,
  stream,
  tmp_name,
  file_path,
  filename
 while ((part = await parts)) {
  if () {
   // Here parses the fields of form   ({ key: part[0], value: part[1] })
  } else {
  // parse to the file here and return it in a readable stream, stored through the official nodejs API  if(ActionType === 'uploadimage' && img_type.indexOf(()) >= 0 ){
   filename = 'pic_'+ (new Date()).getTime() + '_' + 
   file_path = (img_path, filename)
  } else if (ActionType === 'uploadfile'){
   filename = 'file_'+(new Date()).getTime()+'_'+
   file_path = (files_path, filename)
  }
  stream = ((static_path,file_path))
  (stream)
  tmp_name = 
 }
 // Return to json and refer to koa-jsonp ~~

It’s probably OK to come here, let’s try it yourself~~ I hope it will be helpful to everyone’s study, and I hope everyone will support me more.