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

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

一、背景配置

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

1.首先安装依赖项：

Npm安装ueditor - save2。配置节点设置

//导入接口文件const api=require('。/API ')；//导入文件模块const fs=require(' fs ')；//引入处理路径模块const path=require(' path ')；//引入模块var body parser=required(' body-parser ')用于处理post数据；//引入express const express=required(' express ')；const app=express()；//引入ueditorconst ueeditor=require(' ueditor ')//parse application/x-www-form-URL encoded app . use(body parser . URL encoded({ extended : false }))//更改大小受限的app . use(body parser . JSON({ limit 33366 })app . use(body parser . URL encoded({ limit : ' 50m b '，extended : true })；//parse application/jsonapp . use(bodyparser . JSON())app . use(API)app . use('/ueditor/UE '，ueditor(path . join(_ dirname，' public ')，function(req，res，Next) {//客户端上传文件设置var img dir='/img/u editor/' var action type=req . query . action；if(action type==' uploadimage ' | | action type==' uploadfile ' | | action type==' uploadvideo '){ var file _ URL=imgDir；//默认图片上传地址/*其他上传格式的地址*/if(actiontype===' uploadfile '){ file _ URL='/file/ueditor/'；//附件} if(action type==' uploadvideo '){ file _ URL='/video/u editor/'；//video } RES . UE _ up(file _ URL)；//只需输入地址即可保存。将操作保存到ueditor for RES . set header(' content-type '，' text/html ')；}//客户端发起图片列表请求else if(req . query . action==' list image '){ vardir _ URL=img dir；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(_ dir name，' public/'))app . use('/u editor '，function (req，RES){ RES . render(' view)})；//在端口8888上收听app . listen(8888)；Console.log ('successlisten.)这里需要注意的是，由于ueditor已经被要求，插件已经安装在node_module中，所以不需要复制额外的文件，只需要在这个目录下新建一个公共文件夹来存储返回后台的数据，还需要引入配置文件config.json

二、前台配置

vue的前台配置需要下载ueditor的文件放入目录。我把它放在静态文件夹里，把ueditor的文件引入vue的入口文件；

“进口”./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文件中的目录需要配置为放置插件的目录：

窗户。用户界面='/静态/用户界面/'

然后在组件中配置它

我的用户设备组件：

模板脚本： id=id type=' text/plain '/script/template脚本导出默认值{ name: ' UE，data(){ return { editor : null } }，prop : { defaultmsg : { type : String }，config: { type: Object }，id: { type: String }，}，mounted(){ const _ this=this；这个。编辑器=UE。geteditor(这个。身份证这个。config)；//初始化UE这个。编辑。addlistener(' ready '，function(){ _ this。编辑。setcontent(_ this。default msg)；//确保用户体验(用户体验)加载完成后，放入内容。 });}，methods: { getUEContent() { //获取内容方法返回this.editor.getContent() }，销毁(){这个。编辑。销毁()；} }/脚本引入方式：

UE : defaultMsg=defaultMsg : config=config : id=ue1 ref=' UE '/UEdata(){ return { defaultMsg : ' '，image: ' '，config : {初始帧宽： null，initialFrameHeight: 350 }，UE 1: ' ue1 ' }；},就可以成功配置好编辑器的基本功能了

三、前后台请求代理

在vue dev环境下可以设置工具的可代理将后端请求代理转发，就可以轻松调试文件上传功能了，同理，vue构建之后的文件则需要用结节将静态文件代理到和后端同一个端口上才可以请求后台端口

篇幅有限，文章可能讲述的不太清晰，具体的可以看我这个项目的代码：https://github。com/chere 4 chai/my BLog

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。