一、下載包：

?官網地址：http://fex.baidu.com/ueditor/

?git地址：?https://github.com/fex-team/ueditor

打開下載后的文件，大致目錄，不會有較大差別

二、編譯下載文件

1、執行命令安裝依賴：

npm install

2、全局安裝Grunt-cli：

npm install -g grunt-cli?

3、安裝到本地：

npm install grunt --save-dev

安裝完之后的package.json?

4、執行編譯命令

grunt default

?

?如果發生grunt : 無法加載文件 D:\nodejs\node_global\grunt.ps1，因為在此系統上禁止運行腳本。可以用管理員打開 Windows PowerShell 運行 set-ExecutionPolicy RemoteSigned 選擇Y ，再運行 get-ExecutionPolicy 之后顯示 RemoteSigned 就可以正常編譯了

三、在Vue項目中引用?

?編譯成功之后會生成一個 dist 文件夾，里面是我們要的編譯后的文件，將 utf8-php 文件復制到 vue項目里的 static（或者public）?文件夾里 ，將utf8-php重命名為Ueditor便于使用(注意畫紅線地方路徑要匹配，不然會報錯出不來)

1、下載vue-ueditor-wrap

npm i?vue-ueditor-wrap

2、在vue項目中引入

<template><div class="ue"><vue-ueditor-wrap v-model="data" :config="myConfig"></vue-ueditor-wrap></div> </template><script> import VueUeditorWrap from "vue-ueditor-wrap";export default {components: {VueUeditorWrap,},data() {return {data: "dome",myConfig: {// 設置編輯器不自動被內容撐高autoHeightEnabled: false,// 初始容器高度initialFrameHeight: 320,// 初始容器寬度initialFrameWidth: "1000",// 可以放后臺存放路徑serverUrl: "",// UEditor 是文件的存放路徑，UEDITOR_HOME_URL: "/static/ueditor/",},};}, }; </script>

下面來看看要實現的效果：

?

總結

以上是生活随笔為你收集整理的vue中使用Ueditor编辑器的全部內容，希望文章能夠幫你解決所遇到的問題。

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