在使用Web應用完成富文本編輯的過程中，WangEditor是一個大家經常使用的開源富文本編輯器。在Vue框架下，經常使用wangeditor-vue插件來實現富文本編輯器的功能。但是，很多人在使用過程中會發現wangeditor-vue的寬度設置有一些問題。下面詳細介紹WangEditor在Vue框架下，寬度設置的方法。

首先，我們需要明確一點：wangeditor-vue的寬度是需要的頁面樣式配合的。因為wangeditor-vue是一個組件，而組件是運行在一個父組件中的。而父組件的寬度是需要頁面樣式來設置的。所以，我們在設置wangeditor-vue的寬度時，需要同時考慮頁面的樣式設置。

.wangeditor-container{
width: 80%;
margin: 0 auto;
}

在上面的代碼中，我們設置了wangeditor-container的樣式，將它的寬度設置為了80%，并且水平居中。這樣，我們就可以保證wangeditor-vue的寬度不會超出父組件的范圍。當然，你也可以依據自己的需求來設置樣式。

如果你想要在編輯器中顯示出一個圖片或視頻，你需要在WangEditor中導入對應的插件。這些插件需要在組件mounted生命周期中進行初始化。但是，在初始化之前，你需要先為這些插件設置好相應的樣式。

/*圖片樣式*/
.wangeditor-image-container{
margin: 10px;
max-width: 100%;
max-height: 300px;
}
/*視頻樣式*/
.wangeditor-video-container{
max-width: 100%;
max-height: 300px;
}

在上面的代碼中，我們設置了wangeditor-image-container和wangeditor-video-container的樣式。這樣，當我們在編輯器中插入圖片和視頻時，它們就會按照此樣式進行顯示。當然，你也可以根據自己的需求來設置樣式。

WangEditor是一款功能強大的富文本編輯器，使用wangeditor-vue插件在Vue框架下可以非常方便地完成富文本的編輯。在使用的過程中，我們需要注意到wangeditor-vue的寬度需要和頁面樣式配合設置，插件的初始化需要在mounted生命周期中進行，并且對應的插件需要設置相應的樣式。希望本文能夠幫助大家更好地使用wangeditor-vue插件。