Vue中使用Ueditor的示例詳解
更新時間：2022年08月23日 15:49:33 作者：KenoAin
這篇文章主要介紹了Vue中使用Ueditor的方法，本文通過實例給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
一、下載Ueditor包
官網(wǎng)地址：http://fex.baidu.com/ueditor/
git地址： https://github.com/fex-team/ueditor
打開下載后的文件，大致目錄，不會有較大差別
二、編譯下載文件
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，因為在此系統(tǒng)上禁止運行腳本。可以用管理員打開 Windows PowerShell 運行 set-ExecutionPolicy RemoteSigned 選擇Y ，再運行 get-ExecutionPolicy 之后顯示 RemoteSigned 就可以正常編譯了
三、在Vue項目中引用
編譯成功之后會生成一個 dist 文件夾，里面是我們要的編譯后的文件，將 utf8-php 文件復(fù)制到 vue項目里的 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: {
// 設(shè)置編輯器不自動被內(nèi)容撐高
autoHeightEnabled: false,
// 初始容器高度
initialFrameHeight: 320,
// 初始容器寬度
initialFrameWidth: "1000",
// 可以放后臺存放路徑
serverUrl: "",
// UEditor 是文件的存放路徑，
UEDITOR_HOME_URL: "/UEditor/",
},
};
},
};
</script>下面來看看要實現(xiàn)的效果：
到此這篇關(guān)于Vue中使用Ueditor的文章就介紹到這了,更多相關(guān)Vue使用Ueditor內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
element自定義 多文件上傳 觸發(fā)多次on-change問題
這篇文章主要介紹了element自定義 多文件上傳 觸發(fā)多次on-change問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
在vue中使用inheritAttrs實現(xiàn)組件的擴展性介紹
這篇文章主要介紹了在vue中使用inheritAttrs實現(xiàn)組件的擴展性介紹，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-12-12
這篇文章主要介紹了如何在vue項目中嵌入jsp頁面的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
在平常的項目中,echarts圖表我們也是使用的非常多的,通常我們從后端拿到數(shù)據(jù),需要在圖表上動態(tài)的進行呈現(xiàn),接下來我們就模擬從后端獲取數(shù)據(jù)然后進行呈現(xiàn)的方法，這篇文章主要介紹了Vue echarts封裝組件需求分析與實現(xiàn)2022-10-10
這篇文章主要介紹了Vue中的計算屬性,模板內(nèi)的表達式,用于簡單運算,但是模板中放入太多的邏輯會讓模板過重且難以維護，更多具體內(nèi)容一起進入下面文章學(xué)習(xí)吧,需要的朋友也可以參考一下2021-12-12
關(guān)于el-col的使用,占據(jù)寬度的應(yīng)用解析
這篇文章主要介紹了關(guān)于el-col的使用,占據(jù)寬度的應(yīng)用解析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要介紹了Vant主題定制如何修改顏色樣式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了關(guān)于element-ui 側(cè)邊欄的router問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要介紹了vue使用websocket的方法,結(jié)合實例形式對比分析了vue.js使用websocket的相關(guān)操作技巧與注意事項,需要的朋友可以參考下2019-06-06
這篇文章主要為大家詳細(xì)介紹了Vue移動端實現(xiàn)圖片上傳及超過1M壓縮上傳，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-12-12