详解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的eval()中使用函数的进一步讨论
Jul 26 Javascript
Confirmer JQuery确认对话框组件
Jun 09 Javascript
url地址自动加#号问题说明
Aug 21 Javascript
JavaScript立即执行函数的三种不同写法
Sep 05 Javascript
jQuery判断数组是否包含了指定的元素
Mar 10 Javascript
jQuery匹配文档链接并添加class的方法
Jun 26 Javascript
JS锚点的设置与使用方法
Sep 05 Javascript
JS基于面向对象实现的拖拽功能示例
Dec 20 Javascript
详解vue模拟加载更多功能(数据追加)
Jun 23 Javascript
一个有意思的鼠标点击文字特效jquery代码
Sep 23 jQuery
vue拖拽排序插件vuedraggable使用方法详解
Aug 21 Javascript
微信小程序使用map组件实现解析经纬度功能示例
Jan 22 Javascript
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
如何做到多笔资料的同步
2006/10/09 PHP
PHP读MYSQL中文乱码的解决方法
2006/12/17 PHP
重新封装zend_soap实现http连接安全认证的php代码
2011/01/12 PHP
探讨:如何编写PHP扩展
2013/06/13 PHP
php获取bing每日壁纸示例分享
2014/02/25 PHP
PHP base64编码后解码乱码的解决办法
2014/06/19 PHP
php使用socket post数据到其它web服务器的方法
2015/06/02 PHP
用PHP代码给图片加水印
2015/07/01 PHP
Laravel实现定时任务的示例代码
2017/08/10 PHP
php封装的pdo数据库操作工具类与用法示例
2019/05/08 PHP
javascript 年月日联动实现核心代码
2009/12/21 Javascript
jquery选择器大全 全面详解jquery选择器
2014/03/06 Javascript
jQuery实现Twitter的自动文字补齐特效
2014/11/28 Javascript
JavaScript+CSS实现仿天猫侧边网页菜单效果
2015/08/25 Javascript
jquery点击缩略图切换视频播放特效代码分享
2015/09/15 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件包装
2015/11/20 Javascript
JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】
2016/08/23 Javascript
微信小程序小组件 基于Canvas实现直播点赞气泡效果
2020/05/29 Javascript
详解微信小程序Page中data数据操作和函数调用
2017/09/27 Javascript
JavaScript作用域链实例详解
2019/01/21 Javascript
vue el-table实现行内编辑功能
2019/12/11 Javascript
支付宝小程序实现省市区三级联动
2020/06/21 Javascript
详解js中的原型,原型对象,原型链
2020/07/16 Javascript
js+canvas实现五子棋小游戏
2020/08/02 Javascript
[03:36]2015国际邀请赛第二日现场精彩集锦
2015/08/06 DOTA
Django视图和URL配置详解
2018/01/31 Python
Jupyter中直接显示Matplotlib的图形方法
2018/05/24 Python
Python3 pandas 操作列表实例详解
2019/09/23 Python
LUISAVIAROMA中国官网:时尚奢侈品牌购物网站
2020/11/01 全球购物
资深地理教师自我评价
2013/09/21 职场文书
高中三年学习生活的自我评价
2013/10/10 职场文书
销售顾问的岗位职责
2013/11/13 职场文书
事业单位分类改革实施方案
2014/03/21 职场文书
检讨书1000字
2014/10/11 职场文书
2015年公务员工作总结
2015/04/24 职场文书
MySQL存储过程及语法详解
2022/08/05 MySQL