大家過年好，這個時間能看到這篇文章的絕對是鐵血戰士。好久沒有更新《Vue實戰》系列文章了，最近接了一個項目，所以沒有時間再更新文章。這裡打了個廣告哈：本人(也有團隊)承接APP、小程序、Web等項目，有需要技術人員的歡迎聯繫我。

閒言少敘，書歸正傳。本文承接上文 繼續我們的vue實戰之旅。本文將分享的是，如何在vue中添加富文本編輯器，從而實現編輯新聞（文章）的功能。本文對應的git地址：

<code>https://github.com/someone674/news-list.git/<code>

PC端的富文本編輯器有很多種選擇，介於我們的需求不是很複雜，最後我選擇了一款輕量級、簡單的編輯器來集合，可以實現我們需要的功能。這款編輯器就叫：wangeditor。它比較簡單，輕量，同時擁有的功能也足夠我們的要求。

安裝

首先我們打開我們的項目，在控制檯裡輸入：

<code>npm install wangeditor --save/<code>

這樣，我們就安裝了這款富文本編輯器了，一定要--save哦！安裝完，我們就可以引入它，創建我們的編輯器了。

新建發佈頁面

在目錄views裡，我們創建addNews.vue文件，這個頁面，就是我們的發佈文章的頁面了，然後打開目錄router裡的index.js，添加該頁面的路由：

<code>{
  path: '/addNews',
  name: 'addNews',
  component: () => import(/* webpackChunkName: "about" */ '../views/addNews.vue'),
  meta: {
    showHeader: true,
    requiresAuth: true
  }
}/<code>

添加完，我們打開Header.vue文件，在登錄、註冊下面，我們增加一個寫文章的按鈕：

<code><el-button>寫新聞/<el-button>/<code>

同時，寫上對應的方法：

<code>// 發表新聞
    addNews () {
      this.$router.push({ path: '/addNews' }).catch(() => {})
    },/<code>

這樣，我們在導航欄裡，點擊“寫文章”後，就可以通過路由，跳轉到addNews頁面了。但是現在這個頁面什麼也沒有，我們需要實現這個頁面。

打開addNews.vue頁面，首先引入編輯器：

<code>import E from 'wangeditor'/<code>

引入了編輯器，我們就用這個E，創建一個編輯器實例：

<code>var editor = new E(this.$refs.editor)
    editor.customConfig.onchange = (html) => {
      this.editorContent = html
    }
    editor.create()/<code> 

這段代碼是什麼意思呢？意思就是通過E來new一個對象，這個對象就是編輯器對象。它可以通過屬性customConfig來配置相關的設置。我們只加了一個內容字段editorContent。這個字段在data中定義的：

那麼，這幾行代碼，放到哪裡執行呢？換句話說，我們需要在什麼時候去創建這個編輯器，供我們頁面使用呢？答案是，在組件掛載完成後，然後開始渲染我們的編輯器。也就是在mounted生命週期函數中執行這段代碼：

有了它，我們再在模板中，就是引用了：

<code>

      

      <button>查看內容/<button>
    
/<code>

到此，編輯器就算集成完了。是不是很簡單？下載代碼，一起嘗試一下吧。

閱讀更多 溫馨的醬牛肉 的文章

關鍵字: 路由器 實戰 集成