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中自定义事件实例
Jun 20 NodeJs
14款NodeJS Web框架推荐
Jul 11 NodeJs
基于NodeJS的前后端分离的思考与实践(五)多终端适配
Sep 26 NodeJs
nodejs批量修改文件编码格式
Jan 22 NodeJs
nodejs简单实现操作arduino
Sep 25 NodeJs
详解nodejs中的process进程
Mar 19 NodeJs
nodejs使用express创建一个简单web应用
Mar 31 NodeJs
nodejs Assert中equal(),strictEqual(),deepEqual(),strictDeepEqual()比较
Sep 18 NodeJs
nodejs实现一个word文档解析器思路详解
Aug 14 NodeJs
nodejs require js文件入口,在package.json中指定默认入口main方法
Oct 10 NodeJs
纯异步nodejs文件夹(目录)复制功能
Sep 03 NodeJs
nodejs处理tcp连接的核心流程
Feb 26 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
php 特殊字符处理函数
2008/09/05 PHP
用PHP实现小写金额转换大写金额的代码(精确到分)
2012/01/10 PHP
ThinkPHP整合datatables实现服务端分页的示例代码
2018/02/10 PHP
11款基于Javascript的文件管理器
2009/10/25 Javascript
使用隐藏的new来创建对象
2011/03/29 Javascript
node.js+Ajax实现获取HTTP服务器返回数据
2014/11/26 Javascript
Jquery动态添加输入框的方法
2015/05/29 Javascript
JavaScript代码轻松实现网页内容禁止复制(代码简单)
2015/10/23 Javascript
jQuery实现元素拖拽并cookie保存顺序的方法
2016/02/20 Javascript
JS实现数字格式千分位相互转换方法
2016/08/01 Javascript
Bootstrap表格制作代码
2017/03/17 Javascript
js 提取某()特殊字符串长度的实例
2017/12/06 Javascript
bootstrapTable+ajax加载数据 refresh更新数据
2018/08/31 Javascript
webpack4 入门最简单的例子介绍
2018/09/05 Javascript
js实现星星打分效果
2020/07/05 Javascript
分享8个JavaScript库可更好地处理本地存储
2020/10/12 Javascript
如何搭建一个完整的Vue3.0+ts的项目步骤
2020/10/18 Javascript
[40:31]Secret vs Alliacne 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
[39:21]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.24
2019/09/10 DOTA
python网络编程之UDP通信实例(含服务器端、客户端、UDP广播例子)
2014/04/25 Python
python通过smpt发送邮件的方法
2015/04/30 Python
解析Python中的生成器及其与迭代器的差异
2016/06/20 Python
Django JWT Token RestfulAPI用户认证详解
2019/01/23 Python
python中property和setter装饰器用法
2019/12/19 Python
如何用PyPy让你的Python代码运行得更快
2020/12/02 Python
分享一个python的aes加密代码
2020/12/22 Python
美国一家运动专业鞋类零售商:Warehouse Shoe Sale(WSS)
2018/03/28 全球购物
美国购买肉、鸭、家禽、鹅肝和熟食网站:D’Artagnan
2018/11/13 全球购物
.NET笔试题(20个问题)
2016/02/02 面试题
西安当代医院管理研究院笔试题
2015/12/11 面试题
实用求职信范文分享
2013/12/25 职场文书
幼儿运动会邀请函
2014/01/17 职场文书
2014年“向国旗敬礼”网上签名寄语活动方案
2014/09/27 职场文书
党员自我评议对照检查材料
2014/09/27 职场文书
党员评议个人总结
2014/10/20 职场文书
申论不会写怎么办?教您掌握这6点思维和原则
2019/07/17 职场文书