How to introduce ueditor and node background configuration using vue

This article mainly introduces the detailed explanation of the introduction of ueditor and node background configuration in vue. Now I will share it with you and give you a reference.

Recently, a customer of the company wanted to use our company's products. He had a lot of requirements for a rich text editor in his backend management. He initially planned to use Quill, but found that Quill could not meet his needs at all. After researching 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 and this effect are more

vue introduces ueditor

Steps

1. Baidu ueditor download, any version is fine (this article takes the PHP version as an example), if you don’t need particularly comprehensive functions, you can consider UM

2. Place the corresponding folder in In static

3. Modify ueditor.confg.js referenced by the front-end vue part and set the path window.UEDITOR_HOME_URL = "/static/utf8-php/"

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

 var URL = window.UEDITOR_HOME_URL || getUEBasePath();
 /**
  * 配置项主体。注意，此处所有涉及到路径的配置别遗漏URL变量。
  */
 window.UEDITOR_CONFIG = {

  //为编辑器实例添加一个路径，这个不能被注释
  UEDITOR_HOME_URL: URL
  // 服务器统一请求接口路径
  , serverUrl: "http://localhost:3000/ueditor/ue"
 // ............ 下面忽略................

When writing vue files, I have configured static into the path of webpack. I can change it accordingly. The various methods in ueditor can be found in the index.html of the Baidu ueditor package I downloaded.

<template>
 <p class="hello">
 <script id="editor" type="text/plain"></script>
 <button @click="show">你敢点一下吗？</button>
 </p>
</template>

<script>
export default {
 name: &#39;HelloWorld&#39;,
 data () {
 return {
  editor: null
 }
 },
 methods: {
 show () {
  console.log(this.editor.getContent())
 }
 },
 mounted () {
 require(&#39;static/utf8-php/ueditor.config.js&#39;)
 require(&#39;static/utf8-php/ueditor.all.min.js&#39;)
 require(&#39;static/utf8-php/lang/zh-cn/zh-cn.js&#39;)
 require(&#39;static/utf8-php/ueditor.parse.min.js&#39;)
 this.editor = window.UE.getEditor(&#39;editor&#39;)
 },
 destroyed () {
 this.editor.destroy()
 }
}
</script>

Note

1. The path in step 3 must have the last "/"

2. The serverUrl in step 3 is written as the corresponding server address

node back-end processing

express implementation

Someone on the Internet has already implemented the express version. Those who use express are lucky. However, it cannot be used directly when I use it directly. ": unexcepected" is reported in the browser. I changed his code so that it does not redirect when returning the configuration, but directly returns a jsonp and jsonp content. Set it to config.json under the php file in Baidu's ueditor package. Remember to use regular expressions or directly remove the comments by hand. There are no comments in json.
At this time, you may find that no error is reported, but the image upload error occurs and a 404 is reported. In fact, the image has been uploaded successfully, but it is not loaded correctly, because the returned path is only the path, not the complete URL, and the request will be made to the front-end service domain. (e.g. "http://localhost:8080/**"). At this time, modify "imageUrlPrefix" in config.json: "http://localhost:3000" to complete the image path. Solve the cross-domain problem yourself -----

1. res.jsonp(config.json)

2. Add imageUrlPrefix to config.json Backend domain

koa implementation

This is a relatively sophisticated library, and the generator writing method will be removed in v3. The generator is now It is gradually not supported, so use async writing method. I mainly use the await-busboy library to implement file processing.

Implementing Judgment

const ActionType = ctx.query.action
// 当ActionType为config时返回与express中一样的json
// 当为uploadimage或uploadfile时处理
处理上传
const parse = require('await-busboy')
const parts = parse(ctx)
 let part,
  stream,
  tmp_name,
  file_path,
  filename
 while ((part = await parts)) {
  if (part.length) {
   // 此处解析到form的fields
   console.log({ key: part[0], value: part[1] })
  } else {
  // 此处解析到文件并以可读流形式返回，通过nodejs官方API存储
  if(ActionType === 'uploadimage' && img_type.indexOf(path.extname(part.filename)) >= 0 ){
   filename = 'pic_'+ (new Date()).getTime() + '_' + part.filename
   file_path = path.join(img_path, filename)
  } else if (ActionType === 'uploadfile'){
   filename = 'file_'+(new Date()).getTime()+'_'+part.filename
   file_path = path.join(files_path, filename)
  }
  stream = fs.createWriteStream(path.join(static_path,file_path))
  part.pipe(stream)
  tmp_name = part.filename
 }
 // 返回json要引用koa-jsonp哦~~

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Use webpack to handle the problem of excessively large bundle.js files

How to fill in the default avatar in javascript

6 types of regular expressions in JavaScript (detailed tutorial)

The above is the detailed content of How to introduce ueditor and node background configuration using vue. For more information, please follow other related articles on the PHP Chinese website!