Vue中使用Ueditor的示例詳解
一、下載Ueditor包
官網(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)行腳本?？梢杂霉芾韱T打開 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)目里的 public 文件夾里 ，將utf8-php重命名為Ueditor便于使用
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",
// 可以放后臺(tái)存放路徑
serverUrl: "",
// UEditor 是文件的存放路徑，
UEDITOR_HOME_URL: "/UEditor/",
},
};
},
};
</script>下面來看看要實(shí)現(xiàn)的效果：
到此這篇關(guān)于Vue中使用Ueditor的文章就介紹到這了,更多相關(guān)Vue使用Ueditor內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
element自定義 多文件上傳 觸發(fā)多次on-change問題
這篇文章主要介紹了element自定義 多文件上傳 觸發(fā)多次on-change問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
在vue中使用inheritAttrs實(shí)現(xiàn)組件的擴(kuò)展性介紹
這篇文章主要介紹了在vue中使用inheritAttrs實(shí)現(xiàn)組件的擴(kuò)展性介紹，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-12-12
如何在vue項(xiàng)目中嵌入jsp頁面的方法(2種)
這篇文章主要介紹了如何在vue項(xiàng)目中嵌入jsp頁面的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
Vue echarts封裝組件需求分析與實(shí)現(xiàn)
在平常的項(xiàng)目中,echarts圖表我們也是使用的非常多的,通常我們從后端拿到數(shù)據(jù),需要在圖表上動(dòng)態(tài)的進(jìn)行呈現(xiàn),接下來我們就模擬從后端獲取數(shù)據(jù)然后進(jìn)行呈現(xiàn)的方法，這篇文章主要介紹了Vue echarts封裝組件需求分析與實(shí)現(xiàn)2022-10-10
這篇文章主要介紹了Vue中的計(jì)算屬性,模板內(nèi)的表達(dá)式,用于簡(jiǎn)單運(yùn)算,但是模板中放入太多的邏輯會(huì)讓模板過重且難以維護(hù)，更多具體內(nèi)容一起進(jìn)入下面文章學(xué)習(xí)吧,需要的朋友也可以參考一下2021-12-12
關(guān)于el-col的使用,占據(jù)寬度的應(yīng)用解析
這篇文章主要介紹了關(guān)于el-col的使用,占據(jù)寬度的應(yīng)用解析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要介紹了Vant主題定制如何修改顏色樣式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了關(guān)于element-ui 側(cè)邊欄的router問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要介紹了vue使用websocket的方法,結(jié)合實(shí)例形式對(duì)比分析了vue.js使用websocket的相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2019-06-06
Vue移動(dòng)端實(shí)現(xiàn)圖片上傳及超過1M壓縮上傳
這篇文章主要為大家詳細(xì)介紹了Vue移動(dòng)端實(shí)現(xiàn)圖片上傳及超過1M壓縮上傳，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-12-12