Nodejs+mongodb+vue front and rear configuration ueditor

I do a personal blog project when I need a rich text box input components to interact with the background, but there is no official configuration about the Nodejs, so their own access to data research, finally applied to the system.

First, the background configuration

The first is to find this project: Https://github.com/netpi/ueditor, can be used through his open source code will ueditor application node above, the approximate method is as follows:

1. Install Dependencies First:

npm install ueditor --save

2. Configure the node settings

Introduce the interface file Const API = Require ('./api ');//Introduce the file module const FS = require (' FS ');//Introduce the processing path module const PATH = require (' path ');// The introduction of processing post data module var Bodyparser = require (' Body-parser ');//introduced Expressconst Express = require (' Express '); const APP = Express () ;//introduced ueditorconst Ueditor = require ("Ueditor")//Parse Application/x-www-form-urlencodedapp.use ( Bodyparser.urlencoded ({extended:false}))//Change the Qualified size App.use (Bodyparser.json ({limit: ' 50MB '}); App.use ( Bodyparser.urlencoded ({limit: ' 50MB ', extended:true});//Parse Application/jsonapp.use (Bodyparser.json ()) App.use (  API) App.use ("/ueditor/ue", Ueditor (Path.join (__dirname, ' public '), function (req, res, next) {//client upload file set var imgdir    = '/img/ueditor/' var actiontype = req.query.action; if (ActionType = = = ' Uploadimage ' | | ActionType = = = ' UploadFile ' | | ActionType = = = ' Uploadvideo ') {var file_url = Imgdir;//default image upload address/* Other upload format address */if (ActionType = = = ' U Ploadfile ') {file_url = '/file/ueditor/';//Accessories} if (ActiOntype = = = ' Uploadvideo ') {file_url = '/video/ueditor/';//video} res.ue_up (File_url); You just enter the address you want to save.    Save operation to Ueditor to do Res.setheader (' Content-type ', ' text/html ');        }//client initiated Picture List request else if (req.query.action = = = ' ListImage ') {var dir_url = Imgdir; Res.ue_list (Dir_url); The client lists all the pictures in the Dir_url directory}//client initiating other request else {//Console.log (' Config.json ') res.setheader (' Conte        Nt-type ', ' Application/json '); Res.redirect ('..    /nodejs/config.json '); }));//handle static files todo//Access static resource files Here is a static resource file that accesses all dist directories app.use (express.static (path.resolve, ' __dirname ')) App.use ('/ueditor ', function (req, res) {res.render (' views/');}); /monitor 8888 Port App.listen (8888), Console.log (' sucess listen ... ')

Note here is because the ueditor has been require, so the plug-in has been installed in the node_module, so there is no need to copy additional files, only need to create a new public folder below this directory to store the data returned to the background, in addition, You also need to introduce a configuration file Config.json

Second, the front desk configuration

Vue's front-desk configuration needs to download Ueditor files in the directory, I put them in the static folder, in the Vue Portal file to introduce Ueditor files:

Import '.. /static/ue/ueditor.config.js ". /static/ue/ueditor.all.min.js ". /static/ue/lang/zh-cn/zh-cn.js ". /static/ue/ueditor.parse.min.js '

It is worth mentioning that the directory in the Ueditor.config.js file needs to be configured as the directory where the plug-in is placed:

Window. Ueditor_home_url = "/static/ue/"

Then you can configure it in the component.

My Ue.vue components:

<template> <script:id=id type= "Text/plain" ></script></template><script>Exportdefault{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);//Initialize UE       This. Editor.addlistener ("Ready",function() {_this.editor.setcontent (_this.defaultmsg);//make sure the UE load is complete and put in the content.       }); }, Methods: {getuecontent () {//Get Content Method        return  This. Editor.getcontent ()}}, destroyed () { This. Editor.destroy (); }  }</script>

Introduction Method:

<ue:d efaultmsg=defaultmsg:config=config:id=ue1 ref= "UE" ></UE>data () {    return {      "",      "",      config: {        null,               },      "ue1"    };  },

You can successfully configure the basic functions of ueditor.

Third, front and back desk request agent

In the Vue dev environment can be set Webpack proxytable the back-end request proxy forwarding, you can easily debug the file upload function, in the same way, the file after the Vue build will need to use node to proxy the static file to the same port on the backend to request the backend port

Space is limited, the article may tell the less clear, specific can see my code for this project: Https://github.com/cheer4chai/myBlog

Nodejs+mongodb+vue front and rear configuration ueditor