vue項目中使用ueditor的實例講解

更新時間：2018年03月05日 09:06:44 作者：小小令

下面小編就為大家分享一篇vue項目中使用ueditor的實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

以vue-cli生成的項目為例

1.static文件夾下先放入ueditor文件

2.index.html添加如下代碼

<script type="text/javascript" charset="utf-8" src="static/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="static/ueditor/ueditor.all.min.js"></script>

3.webpack.base.conf.js添加如下配置

externals: {
  'UE': 'UE',
 },

4.index.html中添加

<script type="text/javascript">
 window.UEDITOR_HOME_URL = "/static/ueditor/";//配置路徑設定為UEditor所放的位置
</script>

5.editor組件

<template>
 <div>
  <mt-button @click="geteditor()" type="danger">獲取</mt-button>
  <script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>
 </div>
</template>
<script>
const UE = require('UE');// eslint-disable-line
export default {
 name: 'editorView',
 data: () => (
  {
   editor: null,
  }
 ),
 methods: {
  geteditor() {
   console.log(this.editor.getContent());
  },
 },
 mounted() {
  this.editor = UE.getEditor('editor');
 },
 destroyed() {
  this.editor.destroy();
 },
};
</script>
<style>
</style>

以上這篇vue項目中使用ueditor的實例講解就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vue
ueditor

Vue3.0路由跳轉攜帶參數(shù)的示例詳解
這篇文章主要介紹了Vue3.0路由跳轉攜帶參數(shù)的示例代碼，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2023-04-04
解決vue項目中type=”file“ change事件只執(zhí)行一次的問題
這篇文章主要介紹了vue項目中解決type=”file“ change事件只執(zhí)行一次的問題,本文給大家介紹的非常詳細，需要的朋友可以參考下
2018-05-05
Vue?table新增、編輯解讀
這篇文章主要介紹了Vue?table新增、編輯，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-07-07
vue中動態(tài)綁定表單元素的屬性方法
下面小編就為大家分享一篇vue中動態(tài)綁定表單元素的屬性方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-02-02
詳解Vue中生命周期鉤子函數(shù)的使用示例
這篇文章主要為大家詳細介紹了Vue中常見的生命周期鉤子函數(shù)的使用,文中的示例代碼講解詳細,具有一定的借鑒價值,感興趣的小伙伴可以跟隨小編一起學習一下
2023-11-11
在vue項目中正確使用iconfont的方法
今天小編就為大家分享一篇在vue項目中正確使用iconfont的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
vue如何重置data的所有屬性
這篇文章主要介紹了vue如何重置data的所有屬性，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue-cli腳手架config目錄下index.js配置文件的方法
下面小編就為大家分享一篇vue-cli腳手架config目錄下index.js配置文件的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-03-03
vue加載視頻流,實現(xiàn)直播功能的過程
這篇文章主要介紹了vue加載視頻流,實現(xiàn)直播功能的過程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue父子組件進行通信方式原來是這樣的
這篇文章主要為大家詳細介紹了vue父子組件進行通信方式，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2022-02-02