laravel+vue組合的項目中引入ueditor(打包成組件形式)

前言：最近寫東西須要用到ueditor，而且須要是在vue組件中引入。

（本博客默認你已經配置了laravel+vue的項目環境，若是尚未配置好的的小夥伴，能夠看看個人另外一篇博客，連接：

http://www.cnblogs.com/meng1314-shuai/p/7136049.html 

）

一、下載editor

這個直接去ueditor的官網下載其PHP版本的就能夠了，沒什麼好說的

二、移到項目目錄中（主要講如何放置配置文件和靜態資源文件）

打開下載好的ueditor目錄，若是版本沒有錯也沒出什麼問題，應該就會看到以下目錄及文件

 

這裏面：ueditor.all.js、ueditor.config.js、ueditor.parse.js以及lang/zh-cn/zh-cn.js 是咱們須要拿來在vue中加載的配置文件，因此我直接放在了resources/assets/js目錄下（固然這裏咱們推薦的是引入這些配置文件對應的.min.js的文件，若是有的話。。。還有放置的目錄也能夠本身定義，

不過這裏咱們爲了方便區分和引入，因此就按前面說的目錄來放了），像這樣

固然，放置好了配置文件，剩下的四個目錄咱們就直接放在laravel默認的靜態資源目錄public/js下面，像這樣：

 

 三、定義公共的ueditor組件（方面多處引用）

這裏一樣爲了方便引入，咱們直接在ueditor的配置文件的同級目錄下新建UEditor.vue組件

而後編寫咱們的ueditor組件，這裏爲了方便喜歡「偷懶」小夥伴們😄，就不放圖片了，直接上代碼（是否是很貼心）

<template>
　　<div :id="id">
　　</div>
</template>
<style scoped>
</style>
<script>
import './ueditor.config.js'
import './ueditor.all.min.js'               //引入相應的配置文件，具體路徑請根據本身配置文件放置的路徑以及公共組件定義的路徑自行修改
import './ueditor.parse.min.js' 
import './lang/zh-cn/zh-cn.js'

 

export default {
　　props: {
　　},
　　data(){
　　　　return {
　　　　　　id: Math.ceil(Math.random()*100000) + 'editor'
　　　　}
　　},
　　mounted() {
　　　　this.editor = UE.getEditor(this.id)   // 獲取編輯器實例化的對象
　　},
　　methods: {
　　　　getUEContent() { // 獲取內容方法
　　　　return this.editor.getContent()
　　}
　　}
}
</script>

 好了，咱們的公共編輯器組件就已經定義好啦。

可能會有些小夥伴以爲ueditor的工具欄實在是太多了，好多都是本身幾乎用不到的，放在那裏佔地方不說，還下降了咱們項目的加載速度，這裏也許有些看過ueditor.config.js 配置文件的小夥伴應該會看到這樣一項配置：

這裏咱們看到它的註釋已經明確的告訴咱們它的做用了：工具欄上的全部的功能按鈕和下拉框，能夠在new編輯器的實例時選擇本身須要的從新定義

因此很簡單了，想要精簡編輯器的小夥伴們能夠直接在咱們的公共ueditor組件的生命週期函數mounted裏覆蓋此配置就好啦，附上一個我本身配置的代碼：

mounted() {
　　window.UEDITOR_CONFIG.toolbars = [[
　　　　'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', 　　　　'|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', '|',
　　　　'rowspacingtop', 'rowspacingbottom', 'lineheight', '|', 'fontfamily', 'fontsize'
　　]]
　　this.editor = UE.getEditor(this.id)
}

四、使用ueditor組件

到這裏咱們已經能夠直接在咱們其餘任意的vue組件裏使用咱們的公共組件了：

在script標籤中直接引入公共組件的UEditor.vue 文件，像這樣：import UE from '../editor/UEditor.vue';

而後註冊該組件：

components: {
　　UE
}

接下來咱們就能夠直接在template模板中使用UE組件了：

<template lang="html">
　　<div id="add">
　　　　<div id="myueditor">
　　　　　　<UE ref="ue"></UE>
　　　　</div>

　　</div>

</template>

這裏咱們使用了ref給組件註冊了引用信息，這樣咱們就能夠在這個父組件裏調用咱們編輯器組件的獲取內容方法getUEContent()(這個方法調用了ueditor的getContent()方法，忘記的小夥伴能夠去上面或者本身的代碼裏回顧一下)，像這樣：

<button @click="getUEContent()">獲取內容</button>//模版裏定義一個button綁定getUEContent()方法

 

而後註冊getUEContent()方法：

 

methods: {
　　getUEContent() {
　　　　let content = this.$refs.ue.getUEContent();//在這裏調用了子組件ueditor組件的getContent()方法
　　　　this.$notify({
　　　　　　title: '獲取成功，可在控制檯查看！',
　　　　　　message: content,
　　　　　　type: 'success'
　　　　});
　　　　console.log(content)
　　}

｝

好了，大功告成，趕忙去試試你的編輯器吧！

轉載請註明出處哦http://www.cnblogs.com/meng1314-shuai/p/7204405.html