À propos du code de configuration de ueditor dans nodejs+mongodb+vue front et backend

Cet article présente principalement l'exemple de code pour configurer ueditor dans le front et le backend de nodejs+mongodb+vue. Le contenu est assez bon, je vais le partager avec vous maintenant et le donner comme référence.

Lorsque je travaillais sur un projet de blog personnel, j'avais besoin d'un composant de saisie de zone de texte enrichi pour interagir avec l'arrière-plan, mais il n'y avait pas de configuration officielle sur nodejs, j'ai donc vérifié les informations et les ai recherchées moi-même, et finalement appliqué au système.

1. Configuration du backend

Tout d'abord, j'ai trouvé ce projet : https://github.com/netpi/ueditor, vous pouvez utiliser ueditor via son open code source Sur le nœud, la méthode approximative est la suivante :

1. Installez d'abord les dépendances :

npm install ueditor --save

2. paramètres

//引入接口文件
const api = require('./api');
//引入文件模块
const fs = require('fs');
//引入处理路径模块
const path = require('path');
//引入处理post数据模块
var bodyParser = require('body-parser');

//引入express
const express = require('express');
const app = express();
//引入ueditor
const ueditor = require("ueditor")

// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }))

//更改限定大小
app.use(bodyParser.json({ limit: '50mb' }));
app.use(bodyParser.urlencoded({ limit: '50mb', extended: true }));
// parse application/json
app.use(bodyParser.json())
app.use(api)

app.use("/ueditor/ue", ueditor(path.join(__dirname, 'public'), function(req, res, next) {
  //客户端上传文件设置
  var imgDir = '/img/ueditor/'
  var ActionType = req.query.action;
  if (ActionType === 'uploadimage' || ActionType === 'uploadfile' || ActionType === 'uploadvideo') {
    var file_url = imgDir; //默认图片上传地址
    /*其他上传格式的地址*/
    if (ActionType === 'uploadfile') {
      file_url = '/file/ueditor/'; //附件
    }
    if (ActionType === 'uploadvideo') {
      file_url = '/video/ueditor/'; //视频
    }
    res.ue_up(file_url); //你只要输入要保存的地址 。保存操作交给ueditor来做
    res.setHeader('Content-Type', 'text/html');
  }
  // 客户端发起图片列表请求
  else if (req.query.action === 'listimage') {
    var dir_url = imgDir;
    res.ue_list(dir_url); // 客户端会列出 dir_url 目录下的所有图片
  }
  // 客户端发起其它请求
  else {
    // console.log('config.json')
    res.setHeader('Content-Type', 'application/json');
    res.redirect('../nodejs/config.json');
  }
}));

//处理静态文件 todo
// 访问静态资源文件 这里是访问所有dist目录下的静态资源文件
app.use(express.static(path.resolve(__dirname, 'public/')))
app.use('/ueditor', function(req, res) {
  res.render('views/');
});

//监听8888端口
app.listen(8888);
console.log('sucess listen......')

Ce qu'il convient de noter ici, c'est que parce que ueditor a été requis, le plug-in a été installé dans node_module, il n'est donc pas nécessaire pour copier des fichiers supplémentaires, il suffit de créer un nouveau dossier public sous ce répertoire pour stocker les données renvoyées au backend. De plus, vous devez également introduire le fichier de configuration config.json

2. Avant. -end configuration

front-end de vue La configuration nécessite de télécharger le fichier ueditor dans le répertoire Je l'ai placé dans le dossier statique et introduit le fichier ueditor dans le fichier d'entrée vue :

import '../static/UE/ueditor.config.js'
import '../static/UE/ueditor.all.min.js'
import '../static/UE/lang/zh-cn/zh-cn.js'
import '../static/UE/ueditor.parse.min.js'

Il convient de mentionner que le répertoire dans le fichier ueditor.config.js doit être configuré comme répertoire dans lequel le plug-in est placé :

window.UEDITOR_HOME_URL = "/static/UE/"

Il suffit ensuite de le configurer dans le composant

Mon composant UE.vue :

<template>
 <script :id=id type="text/plain"></script>
</template>

<script>
 export default {
  name: &#39;UE&#39;,
  data () {
   return {
    editor: null
   }
  },
  props: {
   defaultMsg: {
    type: String
   },
   config: {
    type: Object
   },
   id: {
    type: String
   },
  },
  mounted() {
   const _this = this;
   this.editor = UE.getEditor(this.id, this.config); // 初始化UE
   this.editor.addListener("ready", function () {
    _this.editor.setContent(_this.defaultMsg); // 确保UE加载完成后，放入内容。
   });
  },
  methods: {
   getUEContent() { // 获取内容方法
    return this.editor.getContent()
   }
  },
  destroyed() {
   this.editor.destroy();
  }
 }
</script>

Méthode d'introduction :

<UE :defaultMsg=defaultMsg :config=config :id=ue1 ref="ue"></UE>

data() {
  return {
   defaultMsg: "",
   image: "",
   config: {
    initialFrameWidth: null,
    initialFrameHeight: 350
   },
   ue1: "ue1"
  };
 },

Vous pouvez configurer avec succès les fonctions de base de l'éditeur

3. Proxy de requête front et backend

Dans l'environnement de développement vue, vous pouvez définir la proxyTable du webpack pour transférer le proxy de requête back-end, et vous pouvez facilement déboguer la fonction de téléchargement de fichiers. De même, les fichiers après la construction de vue doivent utiliser Node pour proxy les fichiers statiques. Vous pouvez demander le port backend uniquement sur le même port que le backend

L'espace est limité et l'article peut ne pas l'être. assez clair. Pour plus de détails, vous pouvez voir le code de mon projet : https://github.com/cheer4chai/ myBlog

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à tout le monde. étude. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

node.js utilise des flux pour réaliser la synchronisation de lecture et d'écriture, ainsi que la fonction de lecture et d'écriture en même temps

À propos de la façon dont ajax gère les domaines inter-domaines dans jquery

angular2 et nodejs implémentent la fonction de téléchargement d'images

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!