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 相关文章推荐
PHP和NodeJs开发的应用如何共用Session
Apr 16 NodeJs
nodejs multer实现文件上传与下载
May 10 NodeJs
浅谈nodejs中的类定义和继承的套路
Jul 26 NodeJs
nodejs创建简易web服务器与文件读写的实例
Sep 07 NodeJs
NodeJs通过async/await处理异步的方法
Oct 09 NodeJs
nodejs实现套接字服务功能详解
Jun 21 NodeJs
nodejs中函数的调用实例详解
Oct 31 NodeJs
通过Nodejs搭建网站简单实现注册登录流程
Jun 14 NodeJs
nodejs实现聊天机器人功能
Sep 19 NodeJs
nodejs实现的http、https 请求封装操作示例
Feb 06 NodeJs
如何利用nodejs自动定时发送邮件提醒(超实用)
Dec 01 NodeJs
Nodejs 微信小程序消息推送的实现
Jan 20 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中var_export与var_dump的区别分析
2010/08/21 PHP
FirePHP 推荐一款PHP调试工具
2011/04/23 PHP
PHP生成自定义长度随机字符串的函数分享
2014/05/04 PHP
php获取当前页面完整URL地址
2015/12/30 PHP
基于JQuery的6个Tab选项卡插件
2010/09/03 Javascript
Javascript中各种trim的实现详细解析
2013/12/10 Javascript
js事件绑定快捷键以ctrl+k为例
2014/09/30 Javascript
jQuery中$.each使用详解
2015/01/29 Javascript
JavaScript中setFullYear()方法的使用详解
2015/06/11 Javascript
JavaScript数组对象实现增加一个返回随机元素的方法
2015/07/27 Javascript
jquery实现鼠标悬浮停止轮播特效
2020/08/20 Javascript
详解angular笔记路由之angular-router
2017/09/12 Javascript
微信小程序使用video组件播放视频功能示例【附源码下载】
2017/12/08 Javascript
微信小程序实现image组件图片自适应宽度比例显示的方法
2018/01/16 Javascript
Angular2整合其他插件的方法
2018/01/20 Javascript
karma+webpack搭建vue单元测试环境的方法示例
2018/05/24 Javascript
详解js静态检查工具eslint配置文件
2018/11/23 Javascript
uni-app 自定义底部导航栏的实现
2020/12/11 Javascript
[52:10]LGD vs Optic Supermajor小组赛D组胜者组决赛 BO3 第二场 6.3
2018/06/04 DOTA
零基础写python爬虫之urllib2中的两个重要概念:Openers和Handlers
2014/11/05 Python
Python制作CSDN免积分下载器
2015/03/10 Python
Python中分数的相关使用教程
2015/03/30 Python
python递归打印某个目录的内容(实例讲解)
2017/08/30 Python
Python3 伪装浏览器的方法示例
2017/11/23 Python
Python3.6安装及引入Requests库的实现方法
2018/01/24 Python
python的一些加密方法及python 加密模块
2019/07/11 Python
Python+OpenCV实现实时眼动追踪的示例代码
2019/11/11 Python
国际领先的在线时尚服装和配饰店:DressLily
2019/03/03 全球购物
CAT鞋加拿大官网:CAT Footwear加拿大
2020/08/05 全球购物
请介绍一下Ant
2016/07/22 面试题
建筑设计专业求职自我评价
2014/03/02 职场文书
留守儿童工作方案
2014/06/02 职场文书
党的群众路线教育实践活动对照检查材料思想汇报(党员篇)
2014/09/25 职场文书
2016年第32个教师节致辞
2015/11/26 职场文书
Java基础之详解HashSet的使用方法
2021/06/30 Java/Android
使用Redis实现实时排行榜功能
2021/07/02 Redis