nodejs+mongodb+vue前后台配置ueditor的示例代码


Posted in NodeJs onJanuary 02, 2018

笔者在做一个个人博客项目的时候需要一个富文本框输入组件与后台进行交互,但是官方配置里面没有关于nodejs的,于是自己查阅资料研究了一下,最后终于应用到了系统中。

一、后台配置

首先是找到了这个项目:https://github.com/netpi/ueditor,可以通过他开源的代码将ueditor应用的node上面,大概方法如下:

1.先安装依赖:

npm install ueditor --save

2. 配置Node设置

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

这里需要注意的是因为已经require了ueditor,所以该插件已经安装到了node_module内,所以不需要再拷贝额外的文件了,只需要需要在这个目录下面新建public文件夹存放返回给后台的数据,另外,还需要引入配置文件config.json

二、前台配置

vue的前台配置需要下载ueditor的文件放在目录中,我将其放在了static文件夹中,在vue入口文件中引入ueditor的文件:

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'

值得一提的是需要将ueditor.config.js文件中的目录配置为放置该插件的目录:

window.UEDITOR_HOME_URL = "/static/UE/"

nodejs+mongodb+vue前后台配置ueditor的示例代码

然后在组件中配置好就可以了

我的UE.vue组件:

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

<script>
 export default {
  name: 'UE',
  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>

引入方式:

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

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

就可以成功配置好ueditor的基本功能了

三、前后台请求代理

在vue dev环境下可以设置webpack的proxyTable将后端请求代理转发,就可以轻松调试文件上传功能了,同理,vue build之后的文件则需要用Node将静态文件代理到和后端同一个端口上才可以请求后台端口

篇幅有限,文章可能讲述的不太清晰,具体的可以看我这个项目的代码:https://github.com/cheer4chai/myBlog

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

NodeJs 相关文章推荐
用nodejs实现PHP的print_r函数代码
Mar 14 NodeJs
nodejs中简单实现Javascript Promise机制的实例
Dec 06 NodeJs
nodeJS代码实现计算交社保是否合适
Mar 09 NodeJs
nodejs中实现阻塞实例
Mar 24 NodeJs
nodejs实现遍历文件夹并统计文件大小
May 28 NodeJs
详解nodejs 文本操作模块-fs模块(三)
Dec 22 NodeJs
详解nodeJS中读写文件方法的区别
Mar 06 NodeJs
详解nodejs微信公众号开发——1.接入微信公众号
Apr 10 NodeJs
详解nodejs异步I/O和事件循环
Jun 07 NodeJs
nodejs 生成和导出 word的实例代码
Jul 31 NodeJs
用Electron写个带界面的nodejs爬虫的实现方法
Jan 29 NodeJs
nodejs和react实现即时通讯简易聊天室功能
Aug 21 NodeJs
nodejs操作mongodb的填删改查模块的制作及引入实例
Jan 02 #NodeJs
nodejs实现OAuth2.0授权服务认证
Dec 27 #NodeJs
使用nodejs+express实现简单的文件上传功能
Dec 27 #NodeJs
nodejs超出最大的调用栈错误问题
Dec 27 #NodeJs
nodejs实现简单的gulp打包
Dec 21 #NodeJs
nodejs调取微信收货地址的方法
Dec 20 #NodeJs
基于nodejs实现微信支付功能
Dec 20 #NodeJs
You might like
星际原理概述
2020/03/04 星际争霸
Php做的端口嗅探器--可以指定网站和端口
2006/10/09 PHP
php access 数据连接与读取保存编辑数据的实现代码
2010/05/12 PHP
Smarty foreach控制循环次数的实现详解
2013/07/03 PHP
php断点续传之如何分割合并文件
2014/03/22 PHP
php获取当月最后一天函数分享
2015/02/02 PHP
Yii获取当前url和域名的方法
2015/06/08 PHP
PHP Static延迟静态绑定用法分析
2016/03/16 PHP
Zend Framework实现多文件上传功能实例
2016/03/21 PHP
Laravel5权限管理方法详解
2016/07/26 PHP
浅谈PHP中静态方法和非静态方法的相互调用
2016/10/04 PHP
javascript中巧用“闭包”实现程序的暂停执行功能
2007/04/04 Javascript
Mozilla 表达式 __noSuchMethod__
2009/04/05 Javascript
js进行表单验证实例分析
2015/02/10 Javascript
jQuery实现3D文字特效的方法
2015/03/10 Javascript
谷歌showModalDialog()方法不兼容出现对话窗口的解决办法
2016/02/15 Javascript
js 获取图像缩放后的实际宽高,位置等信息
2017/03/07 Javascript
vue拦截器Vue.http.interceptors.push使用详解
2017/04/22 Javascript
微信小程序自动客服功能
2017/11/02 Javascript
结合mint-ui移动端下拉加载实践方法总结
2017/11/08 Javascript
NProgress显示顶部进度条效果及使用详解
2019/09/21 Javascript
python 控制语句
2011/11/03 Python
深入理解Javascript中的this关键字
2015/03/27 Python
Python 创建子进程模块subprocess详解
2015/04/08 Python
在python3环境下的Django中使用MySQL数据库的实例
2017/08/29 Python
python中字符串内置函数的用法总结
2018/09/13 Python
解决python3 安装完Pycurl在import pycurl时报错的问题
2018/10/15 Python
python 统计文件中的字符串数目示例
2019/12/24 Python
Python如何使用bokeh包和geojson数据绘制地图
2020/03/21 Python
python如何支持并发方法详解
2020/07/25 Python
CSS3田字格列表的样式编写方法
2018/11/22 HTML / CSS
90后毕业生的求职信范文
2013/09/21 职场文书
2014年四风问题自我剖析材料
2014/09/15 职场文书
戒毒悔改检讨书
2014/09/21 职场文书
导游词范文
2015/02/13 职场文书
纯html+css实现Element loading效果
2021/08/02 HTML / CSS