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 相关文章推荐
列表内容的选择
Jun 30 Javascript
IE JS编程需注意的内存释放问题
Jun 23 Javascript
jQuery中removeData()方法用法实例
Dec 27 Javascript
在JavaScript中用getMinutes()方法返回指定的分时刻
Jun 10 Javascript
第四章之BootStrap表单与图片
Apr 25 Javascript
jQuery中的on与bind绑定事件区别实例详解
Feb 28 Javascript
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 jQuery
ES6 系列之 WeakMap的使用示例
Aug 06 Javascript
使用jquery DataTable和ajax向页面显示数据列表的方法
Aug 09 jQuery
详解vue中localStorage的使用方法
Nov 22 Javascript
纯js实现无缝滚动功能代码实例
Feb 21 Javascript
javascript实现图片轮换动作方法
Aug 07 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
php解析xml提示Invalid byte 1 of 1-byte UTF-8 sequence错误的处理方法
2013/11/14 PHP
PHP正则表达式替换站点关键字链接后空白的解决方法
2014/09/16 PHP
Thinkphp无限级分类代码
2015/11/11 PHP
yii2.0整合阿里云oss上传单个文件的示例
2017/09/19 PHP
硬盘浏览程序,保存成网页格式便可使用
2006/12/03 Javascript
Google Map V3 绑定气泡窗口(infowindow)Dom事件实现代码
2013/04/26 Javascript
jQuery中offset()方法用法实例
2015/01/16 Javascript
javascript实现数组内值索引随机化及创建随机数组的方法
2015/08/10 Javascript
深入探秘jquery瀑布流的实现
2016/01/30 Javascript
jQuery Validate格式验证功能实例代码(包括重名验证)
2017/07/18 jQuery
zTree异步加载展开第一级节点的实现方法
2017/09/05 Javascript
jQuery中ajax获取数据赋值给页面的实例
2017/12/31 jQuery
JS实现获取毫秒值及转换成年月日时分秒的方法
2018/08/15 Javascript
Vue常用指令详解分析
2018/08/19 Javascript
Node.js npm命令运行node.js脚本的方法
2018/10/10 Javascript
用node开发并发布一个cli工具的方法步骤
2019/01/03 Javascript
利用weixin-java-miniapp生成小程序码并直接返回图片文件流的方法
2019/03/29 Javascript
js实现上传图片并显示图片名称
2019/12/18 Javascript
jQuery zTree如何改变指定节点文本样式
2020/10/16 jQuery
Python中os.path用法分析
2015/01/15 Python
python3中bytes和string之间的互相转换
2017/02/09 Python
Python中函数eval和ast.literal_eval的区别详解
2017/08/10 Python
PyQt5利用QPainter绘制各种图形的实例
2017/10/19 Python
python如何通过twisted实现数据库异步插入
2018/03/20 Python
python使用PyQt5的简单方法
2019/02/27 Python
python实现五子棋人机对战游戏
2020/03/25 Python
Python代码中如何读取键盘录入的值
2020/05/27 Python
python drf各类组件的用法和作用
2021/01/12 Python
Html5实现移动端、PC端 刮刮卡效果
2016/06/30 HTML / CSS
使用HTML和CSS实现的标签云效果(附demo)
2021/02/03 HTML / CSS
动漫专业高职生职业生涯规划书
2014/02/15 职场文书
献爱心活动总结
2014/05/07 职场文书
党支部对照检查材料
2014/08/25 职场文书
小学教师师德整改措施
2014/09/29 职场文书
2015年敬老院工作总结
2015/05/18 职场文书
导游词之鲁迅祖居
2019/10/17 职场文书