详解vue.js+UEditor集成 [前后端分离项目]


Posted in Javascript onJuly 07, 2017

首先,谈下这篇文章中的前后端所涉及到的技术框架内容。

虽然是后端的管理项目,但整体项目,是采用前后端分离的方式完成,这样做的目的也是产品化的需求;

前端,vue+vuex+vue router+webpack+elementUI的方案完成框架的搭建,其中用到了superUI来作为后端登陆之后的主页面框架,中间集成vue的大型单页应用;

后端,springboot+spring+springmvc+spring serurity+mybatis+maven+redis+dubbo

+zookeeper的方式来构建项目框架和管理,提供给前端restful风格的接口。此处还提供app端、PC WEB端的接口。

UEditor之前一直有在项目中使用,作为国内开源的富文本编辑器,有百度的强大技术支持,整体来说是不错的选择,百度也提供了php、asp、.net、jsp的版本。原有的项目是采用整体式的开发方式,采用的是jsp的页面开发技术,所以集成起来相对来说更加容易,只需要按照文档的方式将前端集成进去,然后后端拿到源码之后,针对文件上传的类修改最终存储的方法即可将文件等上传到本身的服务器了。

然而,由于决定了做前后端分离的方式,必然就会有新的坑,特别是还选择了新的技术vue.js+elementUI的这种方式。那么也只能放手一搏,不多??拢?樯芡辏?砩峡?颊?隆?/p>

1、下载UEditor官网最新的jsp版本的包,下载完成解压之后得到一个ueditor1_4_3_3-utf8-jsp的文件夹,里面包含的内容如下:

详解vue.js+UEditor集成 [前后端分离项目] 

除了jsp的文件夹之外,其余的文件和文件夹复制到前端项目中的static用于存放静态文件的目录下,结构如下:

详解vue.js+UEditor集成 [前后端分离项目]

这里特别说明jsp目录下的资源为何不放进来,因为我们是vue搭建的项目,jsp页面肯定是不会放在前端的项目中的,包括config.json也放在后端用于解析,这里后面会解释这样做的原因。

2、前端将文件放进来之后,暂时先这样,咱们来整理后端的东西。这里将jsp目录下的lib目中的ueditor.jar文件中的所有类全部拿出来(具体方式自己决定,反编译工具或者拿到源码都可以),放到后端项目中,然后在control层新建一个UeditorController.java的类,如下:

/**
 * 用于处理关于ueditor插件相关的请求
 * @author Guoqing
 *
 */
@RestController
@CrossOrigin
@RequestMapping("/sys/ueditor")
public class UeditorController extends BaseController {

  @RequestMapping(value = "/exec")
  @ResponseBody
  public String exec(HttpServletRequest request) throws UnsupportedEncodingException{ 
    request.setCharacterEncoding("utf-8");
    String rootPath = request.getRealPath("/");
    return new ActionEnter( request, rootPath).exec();
  }
}

然后jsp目录下的config.json文件放到java/main/resources目录下,修改ConfigManager.java类,如下:

详解vue.js+UEditor集成 [前后端分离项目]

注释掉原有的读取配置文件的方式,添加新的读取路径,这样确保ueditor在初始化能够正确的加载配置文件。此时,修改前端项目中ueditor.config.js中的serverUrl的值为:

// 服务器统一请求接口路径
, serverUrl: http://localhost:8080/sys/ueditor/exec

而,针对ActionEnter.java类中,如下代码后的文件上传的处理,请大家针对自身的上传方式和文件服务器选择适合自己的方式:

switch ( actionCode ) {
      //读取配置文件时的请求处理
      case ActionMap.CONFIG:
        return this.configManager.getAllConfig().toString();
      //上传图片、视频、文件时的处理
      case ActionMap.UPLOAD_IMAGE:
      case ActionMap.UPLOAD_SCRAWL:
      case ActionMap.UPLOAD_VIDEO:
      case ActionMap.UPLOAD_FILE:
        conf = this.configManager.getConfig( actionCode );
        state = new Uploader( request, conf, baseFileService ).doExec();
        break;
       //抓取远程图片时的处理方式,此处也可以关闭

        //当从网页上复制内容到编辑器中,如果图片与该域名不同源,则会自动抓到本地的服务器保存 
      case ActionMap.CATCH_IMAGE:
        conf = configManager.getConfig( actionCode );
        String[] list = this.request.getParameterValues( (String)conf.get( "fieldName" ) );
        state = new ImageHunter( conf ).capture( list );
        break;
       //上传多文件时的文件在线管理
      case ActionMap.LIST_IMAGE:
      case ActionMap.LIST_FILE:
        conf = configManager.getConfig( actionCode );
        int start = this.getStartIndex();
        state = new FileManager( conf ).listFile( start );
        break;
        
    }
    return state.toJSONString();

最终的一步,写vue页面,插入ueditor组件,直接贴上源代码如下:

<template>
 <div>
  <el-row :gutter="20">
   <el-col :span="24" class="toolbar">
    <h1>完整demo</h1>
    <div id="editor" type="text/plain" style="width:100%;height:400px;"></div>
   </el-col>
  </el-row>
 </div>
</template>

<script>
 import AppConfig from '@/config'
 import '../../../../static/ueditor/ueditor.config.js'
 import '../../../../static/ueditor/ueditor.all.js'
 import '../../../../static/ueditor/lang/zh-cn/zh-cn.js'

 export default {
  name: "ueditor",
  data() {
   return {
    id: Math.random().toString(16).substring(2) + 'ueditorId',
    editor: null,
    msg: 'Welcome to ueditor'
   };
  },
  mounted() {
   this.ue = UE.getEditor('editor',{
    //此处可以定制工具栏的功能,若不设置,则默认是全部的功能
    toolbars: [
     [
      'anchor', //锚点
      'undo', //撤销
      'redo', //重做
      'bold', //加粗
      'indent', //首行缩进
      'snapscreen', //截图
      'italic', //斜体
      'underline', //下划线
      'strikethrough', //删除线
      'subscript', //下标
      'fontborder', //字符边框
      'superscript', //上标
      'formatmatch', //格式刷
      'source', //源代码
      'blockquote', //引用
      'pasteplain', //纯文本粘贴模式
      'selectall', //全选
      'print', //打印
      'preview', //预览
      'horizontal', //分隔线
      'removeformat', //清除格式
      'time', //时间
      'date', //日期
      'unlink', //取消链接
      'insertrow', //前插入行
      'insertcol', //前插入列
      'mergeright', //右合并单元格
      'mergedown', //下合并单元格
      'deleterow', //删除行
      'deletecol', //删除列
      'splittorows', //拆分成行
      'splittocols', //拆分成列
      'splittocells', //完全拆分单元格
      'deletecaption', //删除表格标题
      'inserttitle', //插入标题
      'mergecells', //合并多个单元格
      'deletetable', //删除表格
      'cleardoc', //清空文档
      'insertparagraphbeforetable', //"表格前插入行"
      'insertcode', //代码语言
      'fontfamily', //字体
      'fontsize', //字号
      'paragraph', //段落格式
      'insertimage', //多图上传
      'edittable', //表格属性
      'edittd', //单元格属性
      'link', //超链接
      'emotion', //表情
      'spechars', //特殊字符
      'searchreplace', //查询替换
      'map', //Baidu地图
      'gmap', //Google地图
      'insertvideo', //视频
      'help', //帮助
      'justifyleft', //居左对齐
      'justifyright', //居右对齐
      'justifycenter', //居中对齐
      'justifyjustify', //两端对齐
      'forecolor', //字体颜色
      'backcolor', //背景色
      'insertorderedlist', //有序列表
      'insertunorderedlist', //无序列表
      'fullscreen', //全屏
      'directionalityltr', //从左向右输入
      'directionalityrtl', //从右向左输入
      'rowspacingtop', //段前距
      'rowspacingbottom', //段后距
      'pagebreak', //分页
      'insertframe', //插入Iframe
      'imagenone', //默认
      'imageleft', //左浮动
      'imageright', //右浮动
      'attachment', //附件
      'imagecenter', //居中
      'wordimage', //图片转存
      'lineheight', //行间距
      'edittip ', //编辑提示
      'customstyle', //自定义标题
      'autotypeset', //自动排版
      'webapp', //百度应用
      'touppercase', //字母大写
      'tolowercase', //字母小写
      'background', //背景
      'template', //模板
      'scrawl', //涂鸦
      'music', //音乐
      'inserttable', //插入表格
      'drafts', // 从草稿箱加载
      'charts', // 图表
     ]
    ],
    BaseUrl: '',
    UEDITOR_HOME_URL: 'static/ueditor/'
   });

  },
  destoryed() {
   this.editor.destory();
  },
  methods:{
   getUeditorContent: function(){
    console.log(this.editor.getContent());
   }
  }
 }
</script>

至此,大功告成,包括文件上传下载等部分全部搞定,不过要声明一点的是,当出现接口与页面部署域名不同时,点击选择图片上传会出现iframe跨域的问题。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
怎样在JavaScript里写一个swing把数据插入数据库
Dec 10 Javascript
常用的JavaScript验证正则表达式汇总
Nov 26 Javascript
检测一个函数是否是JavaScript原生函数的小技巧
Mar 13 Javascript
javascript记住用户名和登录密码(两种方式)
Aug 04 Javascript
全面解析Bootstrap表单使用方法(表单按钮)
Nov 24 Javascript
基于JavaScript实现手机短信按钮倒计时(超简单)
Dec 30 Javascript
jQuery+ajax的资源回收处理机制分析
Jan 07 Javascript
js return返回多个值,通过对象的属性访问方法
Feb 21 Javascript
解决修复npm安装全局模块权限的问题
May 17 Javascript
JS前端知识点offset,scroll,client,冒泡,事件对象的应用整理总结
Jun 27 Javascript
JS数组方法push()、pop()用法实例分析
Jan 18 Javascript
jQuery实现影院选座订座效果
Apr 13 jQuery
JS实现搜索关键词的智能提示功能
Jul 07 #Javascript
vue.js国际化 vue-i18n插件的使用详解
Jul 07 #Javascript
javascript ES6 新增了let命令使用介绍
Jul 07 #Javascript
微信小程序之绑定点击事件实例详解
Jul 07 #Javascript
分享19个JavaScript 有用的简写写法
Jul 07 #Javascript
Vue.js数据绑定之data属性
Jul 07 #Javascript
js实现从左向右滑动式轮播图效果
Jul 07 #Javascript
You might like
PHP+MYSQL 出现乱码的解决方法
2008/08/08 PHP
fetchAll()与mysql_fetch_array()的区别详解
2013/06/05 PHP
DOM基础及php读取xml内容操作的方法
2015/01/23 PHP
实例讲解YII2中多表关联的使用方法
2017/07/21 PHP
无语,javascript居然支持中文(unicode)编程!
2007/04/12 Javascript
JavaScript的漂亮的代码片段
2013/06/05 Javascript
jQuery 删除或是清空某个HTML元素示例
2014/08/04 Javascript
常用原生js自定义函数总结
2016/11/20 Javascript
JS两种类型的表单提交方法实例分析
2016/11/28 Javascript
VueJS 集成 Medium Editor的示例代码 (自定义编辑器按钮)
2017/08/24 Javascript
JavaScript数据结构之单链表和循环链表
2017/11/28 Javascript
vue 弹窗时 监听手机返回键关闭弹窗功能(页面不跳转)
2019/05/10 Javascript
详解如何在JS代码中消灭for循环
2019/12/11 Javascript
vue实现商城秒杀倒计时功能
2019/12/12 Javascript
Node.JS如何实现JWT原理
2020/09/18 Javascript
Python使用pygame模块编写俄罗斯方块游戏的代码实例
2015/12/08 Python
基于python 字符编码的理解
2017/09/02 Python
使用实现pandas读取csv文件指定的前几行
2018/04/20 Python
Python 创建空的list,以及append用法讲解
2018/05/04 Python
浅谈tensorflow中几个随机函数的用法
2018/07/27 Python
Django框架模板介绍
2019/01/15 Python
Win10 安装PyCharm2019.1.1(图文教程)
2019/09/29 Python
django之从html页面表单获取输入的数据实例
2020/03/16 Python
基于python 取余问题(%)详解
2020/06/03 Python
scrapy-redis分布式爬虫的搭建过程(理论篇)
2020/09/29 Python
python单元测试框架pytest的使用示例
2020/10/07 Python
利用CSS3参考手册和CSS3代码生成工具加速来学习网页制
2012/07/11 HTML / CSS
html5 canvas移动浏览器上实现图片压缩上传
2016/03/11 HTML / CSS
HTML5新特性 多线程(Worker SharedWorker)
2017/04/24 HTML / CSS
周生生珠宝香港官网:Chow Sang Sang(香港及海外配送)
2019/09/05 全球购物
《识字五》教学反思
2014/03/01 职场文书
法院个人总结
2015/03/03 职场文书
幼儿教师远程研修感悟
2015/11/18 职场文书
青年人初次创业的“五不要”
2019/08/23 职场文书
如何用RabbitMQ和Swoole实现一个异步任务系统
2021/05/29 PHP
Redis中key的过期删除策略和内存淘汰机制
2022/04/12 Redis