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 prototype 原型链
Mar 12 Javascript
上传的js验证(图片/文件的扩展名)
Apr 25 Javascript
简单的js图片轮换代码(js图片轮播)
May 06 Javascript
简介JavaScript中用于处理正切的Math.tan()方法
Jun 15 Javascript
javascript先序遍历DOM树的方法
Feb 27 Javascript
详解JavaScript异步编程中jQuery的promise对象的作用
May 03 Javascript
三种带箭头提示框总结实例
Jun 14 Javascript
JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题
Dec 23 Javascript
js监听input输入框值的实时变化实例
Jan 26 Javascript
Vue.js数据绑定之data属性
Jul 07 Javascript
layui中的switch开关实现方法
Sep 03 Javascript
js实现淘宝浏览商品放大镜功能
Oct 28 Javascript
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
Ha0k 0.3 PHP 网页木马修改版
2009/10/11 PHP
php四种基础算法代码实例
2013/10/29 PHP
兼容各大浏览器带关闭按钮的漂浮多组图片广告代码
2014/06/05 PHP
php上传图片之时间戳命名(保存路径)
2014/08/15 PHP
PHP易混淆知识整理笔记
2015/09/24 PHP
对php 判断http还是https,以及获得当前url的方法详解
2019/01/15 PHP
JavaScript Event学习第四章 传统的事件注册模型
2010/02/07 Javascript
加速IE的Javascript document输出的方法
2010/12/02 Javascript
javascript的propertyIsEnumerable()方法使用介绍
2014/04/09 Javascript
AngularJS 最常用的功能汇总
2016/02/17 Javascript
基于javascript实现图片滑动效果
2016/05/07 Javascript
js实现点击每个li节点,都弹出其文本值及修改
2016/12/15 Javascript
JS简单获取当前日期时间的方法(如:2017-03-29 11:41:10 星期四)
2017/03/29 Javascript
vue+SSM实现验证码功能
2018/12/07 Javascript
详解nodejs 开发企业微信第三方应用入门教程
2019/03/12 NodeJs
[51:26]VP vs VG 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python实现曲线点抽稀算法的示例
2017/10/12 Python
python 日志增量抓取实现方法
2018/04/28 Python
Python subprocess模块功能与常见用法实例详解
2018/06/28 Python
python实现点击按钮修改数据的方法
2019/07/17 Python
python图像处理模块Pillow的学习详解
2019/10/09 Python
python 图片二值化处理(处理后为纯黑白的图片)
2019/11/01 Python
Python读取VOC中的xml目标框实例
2020/03/10 Python
python Canny边缘检测算法的实现
2020/04/24 Python
利用HTML5画出一个坦克的形状具体实现代码
2013/06/20 HTML / CSS
个人简历自我评价八例
2013/10/31 职场文书
2013年军训通讯稿
2014/02/05 职场文书
环境科学专业求职信
2014/08/04 职场文书
父亲节活动策划方案
2014/08/24 职场文书
高等学院职业生涯规划书范文
2014/09/16 职场文书
运动会开幕词
2015/01/28 职场文书
企业介绍信范文
2015/01/30 职场文书
农业项目合作意向书
2015/05/08 职场文书
给朋友的赠语
2015/06/23 职场文书
原生JS实现分页
2022/04/19 Javascript
使用CSS自定义属性实现骨架屏效果
2022/06/21 HTML / CSS