通過在vue項(xiàng)目中使用ueditor（詳細(xì)教程）

來源：懂視網(wǎng) 責(zé)編：小OO 時(shí)間：2020-11-27 19:42:35

通過在vue項(xiàng)目中使用ueditor（詳細(xì)教程）

以vue-cli生成的項(xiàng)目為例。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>；。

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀以vue-cli生成的項(xiàng)目為例。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>；。

下面我就為大家分享一篇vue項(xiàng)目中使用ueditor的實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。

以vue-cli生成的項(xiàng)目為例

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/";//配置路徑設(shè)定為UEditor所放的位置
</script>

5.editor組件

<template>
 <p>
 <mt-button @click="geteditor()" type="danger">獲取</mt-button>
 <script id="editor" type="text/plain" style="width:1024px;height:500px;"></script>
 </p>
</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>

上面是我整理給大家的，希望今后會(huì)對(duì)大家有幫助。

相關(guān)文章：

vue實(shí)現(xiàn)樹形菜單效果

VUE重點(diǎn)問題總結(jié)

p5.js入門教程之鍵盤交互

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com