vue引入ueditor及node后台配置详解


Posted in Javascript onJanuary 03, 2018

最近公司的某个客户要用上我们公司的产品,他的后台管理里的富文本编辑器要求有点多,开始打算用Quill,但是发现Quill根本满足不了他的需求。在调研了市面上的富文本编辑器后,最后似乎只剩了百度的ueditor。虽然很丑~~~,不过没关系,政府网站和这种效果更搭:-D 我是不是说了什么(逃

vue引入ueditor

步骤

  1. 百度ueditor下载,随便哪个版本就好(本文章以php版为例),不需要特别全面功能的可以考虑下UM喽
  2. 将对应的文件夹放到static中
  3. 修改前端vue部分引用的ueditor.confg.js,设置路径window.UEDITOR_HOME_URL = "/static/utf8-php/"
window.UEDITOR_HOME_URL = "/static/utf8-php/"

 var URL = window.UEDITOR_HOME_URL || getUEBasePath();
 /**
  * 配置项主体。注意,此处所有涉及到路径的配置别遗漏URL变量。
  */
 window.UEDITOR_CONFIG = {

  //为编辑器实例添加一个路径,这个不能被注释
  UEDITOR_HOME_URL: URL
  // 服务器统一请求接口路径
  , serverUrl: "http://localhost:3000/ueditor/ue"
 // ............ 下面忽略................

编写vue文件,我已经把static配置到webpack的路径里了,自己可以相应更改,ueditor中的各项方法可以在自己下载的百度ueditor包的index.html中找。

<template>
 <div class="hello">
 <script id="editor" type="text/plain"></script>
 <button @click="show">你敢点一下吗?</button>
 </div>
</template>

<script>
export default {
 name: 'HelloWorld',
 data () {
 return {
  editor: null
 }
 },
 methods: {
 show () {
  console.log(this.editor.getContent())
 }
 },
 mounted () {
 require('static/utf8-php/ueditor.config.js')
 require('static/utf8-php/ueditor.all.min.js')
 require('static/utf8-php/lang/zh-cn/zh-cn.js')
 require('static/utf8-php/ueditor.parse.min.js')
 this.editor = window.UE.getEditor('editor')
 },
 destroyed () {
 this.editor.destroy()
 }
}
</script>

注意事项

  1. 在步骤3中的路径一定要有最后一个"/"
  2. 步骤3中的serverUrl写成对应的服务端地址

node后端处理

express 实现

网上有人已经实现了express版的,使用express的有福了。不过我直接用他的是不能直接用的,在浏览器中报": unexcepected ",我将他的代码改了一下,不让它在返回配置是重定向,而是直接返回一个jsonp,jsonp内容设置为百度的ueditor包中的php文件下的config.json,记得用正则表达式或者直接用手把注释去掉,json是没有注释的。
这时你可能发现不报错了,但是图片上传会错误,报404。其实图片已经上传成功了,只是没有正确的加载,因为返回的路径只是路径,不是完整的url,就会请求到前端服务域下。(例如"http://localhost:8080/**")。此时修改config.json中"imageUrlPrefix": "http://localhost:3000",就可以将图片路径补充完整。跨域问题自己解决哈-----

  1. res.jsonp(config.json)
  2. 给config.json的imageUrlPrefix加后端域

koa实现

这时个比较精巧的库,而且将在v3中去掉了generator写法,generator现在已经渐渐不被支持,所以使用async写法吧。我主要用了await-busboy这个库,实现文件处理。

实现判断

const ActionType = ctx.query.action
// 当ActionType为config时返回与express中一样的json
// 当为uploadimage或uploadfile时处理
处理上传
const parse = require('await-busboy')
const parts = parse(ctx)
 let part,
  stream,
  tmp_name,
  file_path,
  filename
 while ((part = await parts)) {
  if (part.length) {
   // 此处解析到form的fields
   console.log({ key: part[0], value: part[1] })
  } else {
  // 此处解析到文件并以可读流形式返回,通过nodejs官方API存储
  if(ActionType === 'uploadimage' && img_type.indexOf(path.extname(part.filename)) >= 0 ){
   filename = 'pic_'+ (new Date()).getTime() + '_' + part.filename
   file_path = path.join(img_path, filename)
  } else if (ActionType === 'uploadfile'){
   filename = 'file_'+(new Date()).getTime()+'_'+part.filename
   file_path = path.join(files_path, filename)
  }
  stream = fs.createWriteStream(path.join(static_path,file_path))
  part.pipe(stream)
  tmp_name = part.filename
 }
 // 返回json要引用koa-jsonp哦~~

到这大概可以了,自己去试一下吧~~希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 应用技巧集合[推荐]
Aug 30 Javascript
JQuery 获取和设置Select选项的代码
Feb 07 Javascript
jquery 设置style:display的方法
Jan 29 Javascript
JavaScript获取两个数组交集的方法
Jun 09 Javascript
js编写贪吃蛇的小游戏
Aug 24 Javascript
浏览器检测JS代码(兼容目前各大主流浏览器)
Feb 21 Javascript
一起学写js Calender日历控件
Apr 14 Javascript
JS判断字符串变量是否含有某个字串的实现方法
Jun 03 Javascript
VUE axios发送跨域请求需要注意的问题
Jul 06 Javascript
解决layui的input独占一行的问题
Sep 10 Javascript
JS实现电脑虚拟键盘的操作
Jun 24 Javascript
vue watch监控对象的简单方法示例
Jan 07 Vue.js
Node.js搭建小程序后台服务
Jan 03 #Javascript
基于js文件加载优化(详解)
Jan 03 #Javascript
jQuery 实现左右两侧菜单添加、移除功能
Jan 02 #jQuery
js 取消页面可以选中文字的功能方法
Jan 02 #Javascript
js阻止默认右键的下拉菜单方法
Jan 02 #Javascript
webpack实用小功能介绍
Jan 02 #Javascript
js最简单的双向绑定实例讲解
Jan 02 #Javascript
You might like
PHP生成图片验证码功能示例
2017/01/12 PHP
php高清晰度无损图片压缩功能的实现代码
2018/12/09 PHP
Yii框架应用组件用法实例分析
2020/05/15 PHP
JS是否可以跨文件同时控制多个iframe页面的应用技巧
2007/12/16 Javascript
My Desktop :) 桌面式代码
2008/12/29 Javascript
jQuery之ajax删除详解
2014/02/27 Javascript
jQuery实现的经典竖向伸缩菜单效果代码
2015/09/24 Javascript
asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载)
2016/05/05 Javascript
JavaScript实现移动端滑动选择日期功能
2016/06/21 Javascript
Three.js学习之正交投影照相机
2016/08/01 Javascript
Vue.js 表单校验插件
2016/08/14 Javascript
nodejs 搭建简易服务器的图文教程(推荐)
2017/07/18 NodeJs
vue.js语法及常用指令
2017/10/29 Javascript
vue组件中watch props根据v-if动态判断并挂载DOM的问题
2019/05/12 Javascript
sortable+element 实现表格行拖拽的方法示例
2019/06/07 Javascript
AngularJS动态生成select下拉框的方法实例
2019/11/17 Javascript
vue项目中极验验证的使用代码示例
2019/12/03 Javascript
[42:20]Secret vs Liquid 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python实现将Excel转换为json的方法示例
2017/08/05 Python
Python基于Floyd算法求解最短路径距离问题实例详解
2018/05/16 Python
python 返回列表中某个值的索引方法
2018/11/07 Python
Python中extend和append的区别讲解
2019/01/24 Python
ubuntu 16.04下python版本切换的方法
2019/06/14 Python
Python爬取爱奇艺电影信息代码实例
2019/11/26 Python
利用4行Python代码监测每一行程序的运行时间和空间消耗
2020/04/22 Python
Python爬取网页信息的示例
2020/09/24 Python
HTML5 Web Database 数据库的SQL语句的使用方法
2012/12/09 HTML / CSS
半年思想汇报
2013/12/30 职场文书
信用社员工先进事迹材料
2014/02/04 职场文书
《草原》教学反思
2014/02/15 职场文书
给老师的一封建议书
2014/03/13 职场文书
大四学生找工作的自荐信
2014/03/27 职场文书
个人学习群众路线心得体会
2014/11/05 职场文书
成本会计岗位职责
2015/02/03 职场文书
react中的DOM操作实现
2021/06/30 Javascript
Oracle锁表解决方法的详细记录
2022/06/05 Oracle