Vue使用vue-html5-editor的 富文本編輯器

最近由於工作的需求，需要在后台管理界面中，添加一個富文本編輯器。

 

富文本編輯器，我們之前用過百度的ueditor，在傳統模式開發的時候還是很方便的，可以很便利的進行內容編輯，然后獲取到編輯內容的信息

百度的ueditor地址：

https://ueditor.baidu.com/website/

 

但是這次是要整合一個vue的，還沒有這么搞過，就試試吧。

富文本編輯器的核心原理其實蠻簡單的，但是自己寫還是很麻煩，沒有那個時間。

1.考慮方式

有兩種方式，一種是把ueditor進行vue的移植改造。把傳統模式改成webpack可用的模式就可以了。

但是，我覺得ueditor已經很久沒有維護了，界面也太丑了，所以試試別的能用的。

 

2.踩坑 froala editor...

搞了很久，按這位老兄說的

https://www.jianshu.com/p/cb782b957a13

也許是因為這個本身是收費的，也許是我哪個地方有問題，沒搞出來。

 

3.改換用vue-html5-editor

改換了以后就成功了，上圖看看

 

先安裝

npm install vue-html5-editor --save

安裝完畢之后引入到項目中

這個是編輯的main.js，按照官方說明 https://gitee.com/tai/vue-html5-editor 以全局引入的方式引入的

import VueHtml5Editor from 'vue-html5-editor'

Vue.use(VueHtml5Editor, {
  // 全局組件名稱，使用new VueHtml5Editor(options)時該選項無效
  // global component name
  name: 'vue-html5-editor',
  // 是否顯示模塊名稱，開啟的話會在工具欄的圖標后台直接顯示名稱
  // if set true,will append module name to toolbar after icon
  showModuleName: false,
  // 自定義各個圖標的class，默認使用的是font-awesome提供的圖標
  // custom icon class of built-in modules,default using font-awesome
  icons: {
    text: 'fa fa-pencil',
    color: 'fa fa-paint-brush',
    font: 'fa fa-font',
    align: 'fa fa-align-justify',
    list: 'fa fa-list',
    link: 'fa fa-chain',
    unlink: 'fa fa-chain-broken',
    tabulation: 'fa fa-table',
    image: 'fa fa-file-image-o',
    hr: 'fa fa-minus',
    eraser: 'fa fa-eraser',
    undo: 'fa-undo fa',
    'full-screen': 'fa fa-arrows-alt',
    info: 'fa fa-info'
  },
  // 配置圖片模塊
  // config image module
  image: {
    // 文件最大體積，單位字節  max file size
    sizeLimit: 512 * 1024,
    // 上傳參數,默認把圖片轉為base64而不上傳
    // upload config,default null and convert image to base64
    upload: {
      url: 'http://localhost:8080/files/upload',
      headers: {},
      params: {},
      fieldName: 'file'
    },
    // 壓縮參數,默認使用localResizeIMG進行壓縮,設置為null禁止壓縮
    // compression config,default resize image by localResizeIMG (https://github.com/think2011/localResizeIMG)
    // set null to disable compression
    compress: null,
    // 響應數據處理,最終返回圖片鏈接
    // handle response data，return image url
    uploadHandler (responseText) {
      // default accept json data like  {ok:false,msg:"unexpected"} or {ok:true,data:"image url"}
      var json = JSON.parse(responseText)
      return json.data.fileurl
    }
  },
  // 語言，內建的有英文（en-us）和中文（zh-cn）
  // default en-us, en-us and zh-cn are built-in
  language: 'zh-cn',
  // 自定義語言
  i18n: {
    // specify your language here
    'zh-cn': {
      'align': '對齊方式',
      'image': '圖片',
      'list': '列表',
      'link': '鏈接',
      'unlink': '去除鏈接',
      'table': '表格',
      'font': '文字',
      'full screen': '全屏',
      'text': '排版',
      'eraser': '格式清除',
      'info': '關於',
      'color': '顏色',
      'please enter a url': '請輸入地址',
      'create link': '創建鏈接',
      'bold': '加粗',
      'italic': '傾斜',
      'underline': '下划線',
      'strike through': '刪除線',
      'subscript': '上標',
      'superscript': '下標',
      'heading': '標題',
      'font name': '字體',
      'font size': '文字大小',
      'left justify': '左對齊',
      'center justify': '居中',
      'right justify': '右對齊',
      'ordered list': '有序列表',
      'unordered list': '無序列表',
      'fore color': '前景色',
      'background color': '背景色',
      'row count': '行數',
      'column count': '列數',
      'save': '確定',
      'upload': '上傳',
      'progress': '進度',
      'unknown': '未知',
      'please wait': '請稍等',
      'error': '錯誤',
      'abort': '中斷',
      'reset': '重置'
    }
  },
  // 隱藏不想要顯示出來的模塊
  // the modules you don't want
  hiddenModules: [
    'info'
  ],
  // 自定義要顯示的模塊，並控制順序
  // keep only the modules you want and customize the order.
  // can be used with hiddenModules together
  visibleModules: [
    'text',
    'color',
    'font',
    'align',
    'list',
    'link',
    'unlink',
    'tabulation',
    'image',
    'hr',
    'eraser',
    'undo',
    'full-screen',
    'info'

], // 擴展模塊，具體可以參考examples或查看源碼 // extended modules  modules: { // omit,reference to source code of build-in modules  } })

 

 在模塊中引入

模塊 contents.vue

<template>
  <div id="contents">
    <h1>添加內容</h1>
    <br>
    <vue-html5-editor :content="content" @change="updateData" :height="500" :z-index="1000" :auto-height="true" :show-module-name="false"></vue-html5-editor>
  </div>
</template>

<script>

export default {
  name: 'Contents',
  data () {
    return {
      id: '',
      content: ''
    }
  },
  methods: {
    updateData (e) {
      this.content = e
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

 

嘿嘿，運行起來以后，你會發現，有框，但按鈕不在，因為這是個坑。 按鈕是個開源組件 font-awesome

這個開源組件就是個圖標庫，有多種引入方式，我采用的是css全局引入的方式，

先下載了http://www.fontawesome.com.cn/download/font-awesome-4.7.0.zip

解壓放入 src/assets，再到App.vue的style引入

<style>
@import 'assets/font-awesome-4.7.0/css/font-awesome.min.css';
</style>

 到此，引入就告一段落。

 

添加文件上傳的部分。

文件上傳我有兩個部分

圖片文件上傳: http://localhost:8080/files/upload

這個上傳要求請求方式為POST，form表單的文件部分字段名為file

返回如下

{
    status: 200,
    data:{
      filename: "2019072935563.png", 
      fileurl: "http://localhost:8080/files/2019072935563.png"
    },
    message: null
}    
　　

 

圖片文件獲取: http://localhost:8080/files/{imgname}

這樣就完成了所有功能