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)的效果：