最近用vue+element-ui開發一套后臺管理系統，其中項目中需要用到富文本編輯器，這里總結下開發過程中遇到的坑和使用方法。

剛開始用的是vue-quill-editor結合element-ui上傳圖片到服務器，name問題來了 按照官方文檔上面的方式。下面是我的代碼

class="avatar-uploader"

:action="serverUrl"

name="img"

:headers="header"

:show-file-list="false"

:on-success="uploadSuccess"

:on-error="uploadError"

:before-upload="beforeUpload">

v-model="detailContent"

ref="myQuillEditor"

:options="editorOption"

@change="onEditorChange($event)"

@ready="onEditorReady($event)"

>

export default {

data() {

return {

quillUpdateImg: false, // 根據圖片上傳狀態來確定是否顯示loading動畫，剛開始是false,不顯示

serverUrl: '', // 這里寫你要上傳的圖片服務器地址

header: {token: sessionStorage.token}, // 有的圖片服務器要求請求頭需要有token之類的參數，寫在這里

detailContent: '', // 富文本內容

editorOption: {} // 富文本編輯器配置

}

},

methods: {

// 上傳圖片前

beforeUpload(res, file) {},

// 上傳圖片成功

uploadSuccess(res, file) {},

// 上傳圖片失敗

uploadError(res, file) {}

}

}

那么我們需要怎樣將富文本圖片上傳這個按鈕跟自定義的文件上傳做綁定呢。

很簡單，我們需要在editorOption配置中這么寫

export default {

data() {

return {

quillUpdateImg: false, // 根據圖片上傳狀態來確定是否顯示loading動畫，剛開始是false,不顯示

serverUrl: '', // 這里寫你要上傳的圖片服務器地址

header: {token: sessionStorage.token}, // 有的圖片服務器要求請求頭需要有token之類的參數，寫在這里

detailContent: '', // 富文本內容

editorOption: {

placeholder: '',

theme: 'snow', // or 'bubble'

modules: {

toolbar: {

container: toolbarOptions, // 工具欄

handlers: {

'image': function (value) {

if (value) {

document.querySelector('#quill-upload input').click()

} else {

this.quill.format('image', false);

}

}

}

}

}

}

}

}

}

但是這里問題就出現了，當你用element-ui upload方法上傳時你會發現上傳不成功，emmmm~你會發現上傳時Request Method 方式為OPTIONS，這跟平時的提交方式不一樣,Status Code等于204,,去網上又查閱了下，發現這種請求方式，但是最終還是沒有解決掉，好像是需要后端也要相應的改下東西

所以走到這里只能用另外一種方式去實現相同的功能了————Ueditor

第一步：先按照官方的提示 去官網下載相應的代碼，我這里后端語言是PHP所以我下的是PHP的版本，根據需求去下載

第二步：ueditor里除了php文件都放到static文件，這是我的目錄結構

第三步：將PHP文件放到后端去，我這邊項目是我直接放到ftp上面去的，結構如下

第四步：我這邊封裝成了一個公共組件，因為有很多頁面需要用到

//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",

props: {

id: {

type: String

},

config: {

type: Object

},

defaultMsg: {

type: String

},

},

created() {

//this.$emit('defaultMsgVlaue', this.names)

},

data() {

return {

editor: null,

names: ''

}

},

mounted() {

//初始化UE

const _this = this;

this.initEditor()

//this.editor = UE.getEditor(this.id, this.config);

// this.editor.addListener('ready', () => {

// this.editor.setContent(_this.defaultMsg);

// });

},

destoryed() {

this.editor.destory();

},

methods: {

getUEContent: function() {

return this.editor.getContent();

},

initEditor() {

let _this= this;

this.editor = UE.getEditor('editor', this.config)

//編輯器準備就緒后會觸發該事件

this.editor.addListener('ready',()=>{

//設置可以編輯

this.editor.setEnabled();

this.editor.setContent(_this.defaultMsg);

})

//編輯器內容修改時

this.selectionchange()

},

//編輯器內容修改時

selectionchange() {

this.editor.addListener('selectionchange', () => {

//this.content = this.ue.getContent()

})

}

},

activated() {

//初始化編輯器

this.initEditor()

}

}

頁面調用如下

打開窗口

獲取內容

import {UEditor} from './ueditor/index.js'

export default{

name: 'hello',

components: {UEditor},

data(){

return {

config: {

/*//可以在此處定義工具欄的內容

toolbars: [

['fullscreen', 'source','|', 'undo', 'redo','|','bold', 'italic', 'underline', 'fontborder', 'strikethrough',

'|','superscript','subscript','|', 'forecolor', 'backcolor','|', 'removeformat','|', 'insertorderedlist', 'insertunorderedlist',

'|','selectall', 'cleardoc','fontfamily','fontsize','justifyleft','justifyright','justifycenter','justifyjustify','|',

'link','unlink']

],*/

autoHeightEnabled: false,

autoFloatEnabled: true,　　//是否工具欄可浮動

initialContent:'請輸入內容', //初始化編輯器的內容,也可以通過textarea/script給值，看官網例子

autoClearinitialContent:true, //是否自動清除編輯器初始內容，注意：如果focus屬性設置為true,這個也為真，那么編輯器一上來就會觸發導致初始化的內容看不到了

initialFrameWidth: null,

initialFrameHeight: 450,

BaseUrl: '',

UEDITOR_HOME_URL: 'static/ueditor/'

},

addFormVisible: false

}

},

methods: {

openWindow: function(){

this.addFormVisible = true;

},

//獲取文檔內容

getContent: function(){

let content = this.$refs.ueditor.getUEContent();

console.log(content);

alert(content);

}

}

}

注意：在這里封裝成一個公共組件了，但是在使用的過程中會發現，在同一頁面回顯數據到ueditor時只會渲染一次，這可怎么辦呢，

這里想到了用watch來監聽，然后再將數據放到ueditor里，這里我用的參數名是defaultMsg，代碼如下：

watch: {

'defaultMsg': {

handler(newValue, oldValue) {

//父組件param對象改變會觸發此函數

this.editor.setContent(newValue);

},

deep: true

}

}

這樣的話再同一個頁面回顯ueditor時就會實時改變，做到這里我想著試下在其他頁面是否可以，因為有多個路由頁面需要用到ueditor，當我在其他頁面打開ueditor時，發現ueditor加載不出來了，然后我就納悶了，然后排查了很多問題之后，終于知道是因為每次只初始化了ueditor，但是在關閉頁面時沒有將其銷毀，所以需要在上面封裝的公共組件里去銷毀下

destroyed() {

//銷毀編輯器實例，使用textarea代替

this.editor.destroy()

//重置編輯器，可用來做多個tab使用同一個編輯器實例

//如果要使用同一個實例,請注釋destroy()方法

// this.ue.reset()

}

這樣的話就解決了在多個路由頁面的時候ueditor不現實的問題。

第五步：配置文件上傳和回顯，我們需要在上傳圖片，并且讓上傳的圖片回顯到ueditor里，首先先將文件ueditor/ueditor.config.js里的serverUrl換成自己項目的服務器路徑

這里配置之后就可以直接使用了

遇到的其他問題如下：前端代碼必須跟PHP文件放在同一個域名上，我之前是將兩塊代碼分別放到不同FTP上，這樣導致ueditor里文件可以上傳但是提示上傳失敗，這樣上傳的圖片沒法回顯

有些還是不清楚的，或者有其他更好實現效果的方法的伙伴可以跟我留言，歡迎共同進步

總結

以上是生活随笔為你收集整理的elementui图片上传php,vue+element-ui+富文本————图片上传的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。