Comment configurer l'éditeur à l'aide de nodejs+mongodb+vue

Cet article présente principalement l'exemple de code pour configurer ueditor dans le front et le backend de nodejs+mongodb+vue. Maintenant, je le partage avec vous et le donne 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. Configurez les paramètres du nœud

//引入接口文件
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......')

Quels sont les besoins. il convient de noter ici qu'un éditeur est déjà requis, le plug-in a donc été installé dans node_module, il n'est donc pas nécessaire de copier des fichiers supplémentaires. Il vous suffit de créer un nouveau dossier public sous ce répertoire pour stocker les données. retourné en arrière-plan. De plus, vous devez également introduire le fichier de configuration config. json

2. Configuration frontale

La configuration frontale de vue. nécessite de télécharger le fichier ueditor et de le placer dans le répertoire. Je l'ai placé dans le dossier statique, en vue Le fichier introduisant ueditor dans le fichier d'entrée :

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 est à noter que le répertoire dans ueditor Le fichier .config.js doit être configuré comme répertoire dans lequel le plug-in est placé :

window.UEDITOR_HOME_URL = "/static/UE/"

Ensuite, configurez-le simplement 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 ueditor

3. proxy de demande backend

Dans l'environnement de développement vue, vous pouvez définir la proxyTable du webpack pour demander le backend. Par transfert proxy, 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 le faire. utilisez Node pour proxyer les fichiers statiques sur le même port que le backend avant de demander le port backend

Ce qui précède, c'est moi, je l'ai compilé pour tout le monde, j'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

Problèmes liés à l'optimisation du chargement des fichiers dans js

Comment créer un petit backend de programme dans le service Node.js

Comment introduire la configuration en arrière-plan de l'éditeur et du nœud à l'aide de vue

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!