笔者在做一个个人博客项目的时候需要一个富文本框输入组件与后台进行交互,但是官方配置里面没有关于nodejs的,于是自己查阅资料研究了一下,最后终于应用到了系统中。
<强>一、后台配置
首先是找到了这个项目:https://github.com/netpi/ueditor,可以通过他开源的代码将ueditor应用的节点上面,大概方法如下:
1。先安装依赖:
npm安装ueditor——保存
2。配置节点设置
//引入接口文件
const api=要求('/api。');//引入文件模块
const fs=要求(fs);//引入处理路径模块
const path=要求(“路径”);//引入处理后数据模块
var bodyParser=要求(“体”);//引入表达
const表达=要求(“表达”);
const应用=表达();//引入ueditor
const ueditor=要求(“ueditor”)//解析应用程序/x-www-form-urlencoded
app.use (bodyParser。urlencoded({扩展:假}))//更改限定大小
app.use (bodyParser。json({限制:50 mb的}));
app.use (bodyParser。urlencoded({限制:50 mb,扩展:真}));//解析应用程序/json
app.use (bodyParser.json ())
app.use (api)
app.use (“/ueditor/问题”,ueditor(路径。加入(__dirname,“公共”)、功能(下)要求,res, {//客户端上传文件设置
var imgDir='/img/ueditor/'
var ActionType=req.query.action;
如果(ActionType===' uploadimage ' | | ActionType==='还是' | | ActionType===uploadvideo) {
var file_url=imgDir;//默认图片上传地址/*其他上传格式的地址*/如果(ActionType==='还是'){
file_url='/文件/ueditor/';//附件
}
如果(ActionType===uploadvideo) {
file_url='/视频/ueditor/';//视频
}
res.ue_up (file_url);//你只要输入要保存的地址。保存操作交给ueditor来做
res.setHeader(“内容类型”、“text/html”);
}//客户端发起图片列表请求
else if (req.query。action===listimage) {
var dir_url=imgDir;
res.ue_list (dir_url);//客户端会列出dir_url目录下的所有图片
}//客户端发起其它请求
其他{//console.log (json)
res.setHeader(“内容类型”、“application/json”);
res.redirect (. ./nodejs/json);
}
})）;//处理静态文件待办事项//访问静态资源文件这里是访问所有dist目录下的静态资源文件
app.use (express.static(路径。解决(__dirname公共/)))
app.use (/ueditor,函数(点播,res) {
res.render(“视图/?;
});//监听8888端口
app.listen (8888);
控制台。日志(成功听……)
之前
这里需要注意的是因为已经要求了ueditor,所以该插件已经安装到了node_module内,所以不需要再拷贝额外的文件了,只需要需要在这个目录下面新建公共文件夹存放返回给后台的数据,另外,还需要引入配置文件json
<强>二,前台配置
vue的前台配置需要下载ueditor的文件放在目录中,我将其放在了静态文件夹中,在vue入口文件中引入ueditor的文件:
导入“. ./静态/问题/ueditor.config.js”
导入“. ./静态/问题/ueditor.all.min.js”
导入“. ./静态/问题/lang/应用/zh-cn.js '
导入“. ./静态/问题/ueditor.parse.min.js”
值得一提的是需要将ueditor.config.js文件中的目录配置为放置该插件的目录:
窗口。UEDITOR_HOME_URL="/静态/问题/"
然后在组件中配置好就可以了
我的UE.vue组件:
& lt; template>
& lt;脚本:id=id type=" text/plain”祝辞& lt;/script>
& lt;/template>
& lt; script>
出口默认{
名称:“问题”,
数据(){
返回{
编辑:零
}
},
道具:{
defaultMsg: {
类型:字符串
},
配置:{
对象类型:
},
id: {
类型:字符串
},
},
安装(){
const _this=;
这一点。编辑=UE.getEditor(这一点。id, this.config);//初始化问题
this.editor。addListener(“准备好”,函数(){
_this.editor.setContent (_this.defaultMsg);//确保问题加载完成后,放入内容。
});
},
方法:{
getUEContent(){//获取内容方法
返回this.editor.getContent ()
}
},
摧毁了(){
this.editor.destroy ();
}
}
& lt;/script>
