欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解vue.js+UEditor集成 [前后端分離項目]

 更新時間:2017年07月07日 15:53:03   作者:我不要做網(wǎng)紅  
本篇文章主要介紹了詳解vue.js+UEditor集成 [前后端分離項目] ,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧

首先,談下這篇文章中的前后端所涉及到的技術(shù)框架內(nèi)容。

雖然是后端的管理項目,但整體項目,是采用前后端分離的方式完成,這樣做的目的也是產(chǎn)品化的需求;

前端,vue+vuex+vue router+webpack+elementUI的方案完成框架的搭建,其中用到了superUI來作為后端登陸之后的主頁面框架,中間集成vue的大型單頁應(yīng)用;

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

+zookeeper的方式來構(gòu)建項目框架和管理,提供給前端restful風(fēng)格的接口。此處還提供app端、PC WEB端的接口。

UEditor之前一直有在項目中使用,作為國內(nèi)開源的富文本編輯器,有百度的強(qiáng)大技術(shù)支持,整體來說是不錯的選擇,百度也提供了php、asp、.net、jsp的版本。原有的項目是采用整體式的開發(fā)方式,采用的是jsp的頁面開發(fā)技術(shù),所以集成起來相對來說更加容易,只需要按照文檔的方式將前端集成進(jìn)去,然后后端拿到源碼之后,針對文件上傳的類修改最終存儲的方法即可將文件等上傳到本身的服務(wù)器了。

然而,由于決定了做前后端分離的方式,必然就會有新的坑,特別是還選擇了新的技術(shù)vue.js+elementUI的這種方式。那么也只能放手一搏,不多啰嗦,介紹完,馬上開始正事。

1、下載UEditor官網(wǎng)最新的jsp版本的包,下載完成解壓之后得到一個ueditor1_4_3_3-utf8-jsp的文件夾,里面包含的內(nèi)容如下:

 

除了jsp的文件夾之外,其余的文件和文件夾復(fù)制到前端項目中的static用于存放靜態(tài)文件的目錄下,結(jié)構(gòu)如下:

這里特別說明jsp目錄下的資源為何不放進(jìn)來,因為我們是vue搭建的項目,jsp頁面肯定是不會放在前端的項目中的,包括config.json也放在后端用于解析,這里后面會解釋這樣做的原因。

2、前端將文件放進(jìn)來之后,暫時先這樣,咱們來整理后端的東西。這里將jsp目錄下的lib目中的ueditor.jar文件中的所有類全部拿出來(具體方式自己決定,反編譯工具或者拿到源碼都可以),放到后端項目中,然后在control層新建一個UeditorController.java的類,如下:

/**
 * 用于處理關(guān)于ueditor插件相關(guān)的請求
 * @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文件放到j(luò)ava/main/resources目錄下,修改ConfigManager.java類,如下:

注釋掉原有的讀取配置文件的方式,添加新的讀取路徑,這樣確保ueditor在初始化能夠正確的加載配置文件。此時,修改前端項目中ueditor.config.js中的serverUrl的值為:

// 服務(wù)器統(tǒng)一請求接口路徑
, serverUrl: http://localhost:8080/sys/ueditor/exec

而,針對ActionEnter.java類中,如下代碼后的文件上傳的處理,請大家針對自身的上傳方式和文件服務(wù)器選擇適合自己的方式:

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;
       //抓取遠(yuǎn)程圖片時的處理方式,此處也可以關(guān)閉

        //當(dāng)從網(wǎng)頁上復(fù)制內(nèi)容到編輯器中,如果圖片與該域名不同源,則會自動抓到本地的服務(wù)器保存 
      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',{
    //此處可以定制工具欄的功能,若不設(shè)置,則默認(rèn)是全部的功能
    toolbars: [
     [
      'anchor', //錨點
      'undo', //撤銷
      'redo', //重做
      'bold', //加粗
      'indent', //首行縮進(jìn)
      'snapscreen', //截圖
      'italic', //斜體
      'underline', //下劃線
      'strikethrough', //刪除線
      'subscript', //下標(biāo)
      'fontborder', //字符邊框
      'superscript', //上標(biāo)
      'formatmatch', //格式刷
      'source', //源代碼
      'blockquote', //引用
      'pasteplain', //純文本粘貼模式
      'selectall', //全選
      'print', //打印
      'preview', //預(yù)覽
      'horizontal', //分隔線
      'removeformat', //清除格式
      'time', //時間
      'date', //日期
      'unlink', //取消鏈接
      'insertrow', //前插入行
      'insertcol', //前插入列
      'mergeright', //右合并單元格
      'mergedown', //下合并單元格
      'deleterow', //刪除行
      'deletecol', //刪除列
      'splittorows', //拆分成行
      'splittocols', //拆分成列
      'splittocells', //完全拆分單元格
      'deletecaption', //刪除表格標(biāo)題
      'inserttitle', //插入標(biāo)題
      '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', //默認(rèn)
      'imageleft', //左浮動
      'imageright', //右浮動
      'attachment', //附件
      'imagecenter', //居中
      'wordimage', //圖片轉(zhuǎn)存
      'lineheight', //行間距
      'edittip ', //編輯提示
      'customstyle', //自定義標(biāo)題
      'autotypeset', //自動排版
      'webapp', //百度應(yīng)用
      '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>

至此,大功告成,包括文件上傳下載等部分全部搞定,不過要聲明一點的是,當(dāng)出現(xiàn)接口與頁面部署域名不同時,點擊選擇圖片上傳會出現(xiàn)iframe跨域的問題。

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • VUE項目初建和常見問題總結(jié)

    VUE項目初建和常見問題總結(jié)

    在本篇文章里小編給大家整理的是關(guān)于VUE 項目初建和常見問題以及相關(guān)知識點內(nèi)容,有需要的朋友們學(xué)習(xí)下。
    2019-09-09
  • VUE使用canvas實現(xiàn)簽名組件

    VUE使用canvas實現(xiàn)簽名組件

    這篇文章主要為大家詳細(xì)介紹了VUE使用canvas實現(xiàn)簽名組件,兼容PC移動端,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-07-07
  • vue實現(xiàn)不定高虛擬列表的示例詳解

    vue實現(xiàn)不定高虛擬列表的示例詳解

    這篇文章主要為大家詳細(xì)介紹了在vue環(huán)境單頁面項目下,如何實現(xiàn)不定高虛擬列表,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
    2023-10-10
  • vue實現(xiàn)登錄后頁面跳轉(zhuǎn)到之前頁面

    vue實現(xiàn)登錄后頁面跳轉(zhuǎn)到之前頁面

    本文給大家分享了vue實現(xiàn)登錄后頁面跳轉(zhuǎn)到之前頁面的一個功能,有這方便需要的朋友學(xué)習(xí)參考下吧。
    2018-01-01
  • Vue3之事件綁定的實現(xiàn)邏輯詳解

    Vue3之事件綁定的實現(xiàn)邏輯詳解

    這篇文章主要介紹了Vue3之事件綁定的實現(xiàn)邏輯,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-11-11
  • Vue開發(fā)手冊Function-based?API?RFC

    Vue開發(fā)手冊Function-based?API?RFC

    這篇文章主要為大家介紹了Vue開發(fā)手冊Function-based?API?RFC使用示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-11-11
  • vue項目實現(xiàn)img的src動態(tài)賦值

    vue項目實現(xiàn)img的src動態(tài)賦值

    這篇文章主要介紹了vue項目實現(xiàn)img的src動態(tài)賦值方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • vue項目中接入websocket時需要ip端口動態(tài)部署問題

    vue項目中接入websocket時需要ip端口動態(tài)部署問題

    這篇文章主要介紹了vue項目中接入websocket時需要ip端口動態(tài)部署問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-09-09
  • vue3+ts封裝彈窗及封裝分頁的示例代碼

    vue3+ts封裝彈窗及封裝分頁的示例代碼

    這篇文章主要介紹了vue3+ts封裝彈窗及封裝分頁的示例代碼,本文通過定義defaultDialog .vue,結(jié)合實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-08-08
  • 使用Vue3新特性構(gòu)建動態(tài)表單的方法詳解

    使用Vue3新特性構(gòu)建動態(tài)表單的方法詳解

    傳統(tǒng)的表單開發(fā)通常需要編寫大量的重復(fù)代碼,例如處理用戶輸入、驗證數(shù)據(jù)、更新 UI 等等,為了簡化開發(fā),我們可以借助 Vue 3 的新特性,例如組合式 API 和 ref 對象,所以本文我們將一起學(xué)習(xí)如何使用 Vue 3 的新特性構(gòu)建一個更加靈活、可擴(kuò)展的動態(tài)表單
    2024-06-06

最新評論