一、下載包：

?官網(wǎng)地址：http://fex.baidu.com/ueditor/

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

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

二、編譯下載文件

1、執(zhí)行命令安裝依賴：

npm install

2、全局安裝Grunt-cli：

npm install -g grunt-cli?

3、安裝到本地：

npm install grunt --save-dev

安裝完之后的package.json?

4、執(zhí)行編譯命令

grunt default

?

?如果發(fā)生grunt : 無法加載文件 D:\nodejs\node_global\grunt.ps1，因?yàn)樵诖讼到y(tǒng)上禁止運(yùn)行腳本。可以用管理員打開 Windows PowerShell 運(yùn)行 set-ExecutionPolicy RemoteSigned 選擇Y ，再運(yùn)行 get-ExecutionPolicy 之后顯示 RemoteSigned 就可以正常編譯了

三、在Vue項(xiàng)目中引用?

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

1、下載vue-ueditor-wrap

npm i?vue-ueditor-wrap

2、在vue項(xiàng)目中引入

<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: {// 設(shè)置編輯器不自動(dòng)被內(nèi)容撐高autoHeightEnabled: false,// 初始容器高度initialFrameHeight: 320,// 初始容器寬度initialFrameWidth: "1000",// 可以放后臺存放路徑serverUrl: "",// UEditor 是文件的存放路徑，UEDITOR_HOME_URL: "/static/ueditor/",},};}, }; </script>

下面來看看要實(shí)現(xiàn)的效果：

?

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。