Vue中使用Ueditor的示例詳解
更新時間：2022年08月23日 15:49:33 作者：KenoAin
這篇文章主要介紹了Vue中使用Ueditor的方法，本文通過實例給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
一、下載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)上禁止運行腳本?？梢杂霉芾韱T打開 Windows PowerShell 運行 set-ExecutionPolicy RemoteSigned 選擇Y ，再運行 get-ExecutionPolicy 之后顯示 RemoteSigned 就可以正常編譯了
三、在Vue項目中引用
編譯成功之后會生成一個 dist 文件夾，里面是我們要的編譯后的文件，將 utf8-php 文件復制到 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: {
// 設置編輯器不自動被內(nèi)容撐高
autoHeightEnabled: false,
// 初始容器高度
initialFrameHeight: 320,
// 初始容器寬度
initialFrameWidth: "1000",
// 可以放后臺存放路徑
serverUrl: "",
// UEditor 是文件的存放路徑，
UEDITOR_HOME_URL: "/UEditor/",
},
};
},
};
</script>下面來看看要實現(xiàn)的效果：
到此這篇關于Vue中使用Ueditor的文章就介紹到這了,更多相關Vue使用Ueditor內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家詳細介紹了Vue分頁插件的前后端配置與使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
這篇文章主要為大家詳細介紹了如何使用Vue和React分別實現(xiàn)錨點定位功能,文中的示例代碼講解詳細,具有一定的借鑒價值,有需要的小伙伴可以學習一下2024-01-01
這篇文章主要介紹了關于ElementUI自定義Table支持render，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了vue3中安裝使用vue-i18n實時切換語言不用刷新問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
由于一些演示需要對一些簡單頁面進行配置,由于打包build后的vue項目基本已經(jīng)看不出原樣,因此需要創(chuàng)建一個文件,并在打包的時候不會進行編譯,所以文件放在public,這篇文章主要給大家介紹了關于vue引用public文件夾中文件的多種方式,需要的朋友可以參考下2024-02-02
這篇文章主要介紹了微信小程序用戶盒子、宮格列表,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-07-07
這篇文章主要介紹了Vue項目中如何配置src文件下的@別名問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章我們將一起學習vue.js實現(xiàn)綁定class和style樣式，感興趣的小伙伴們可以參考一下2016-12-12
這幾天，我做了一個vue移動端的小項目，本文主要介紹了Vue移動端apk項目，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
這篇文章主要介紹了vue項目中如何將當前頁面生成圖片問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10