Heim  >  Artikel  >  Web-Frontend  >  Durch die Verwendung von ueditor im Vue-Projekt (ausführliches Tutorial)

Durch die Verwendung von ueditor im Vue-Projekt (ausführliches Tutorial)

亚连
亚连Original
2018-06-01 14:43:153365Durchsuche

Im Folgenden werde ich Ihnen ein Beispiel für die Verwendung von ueditor in einem Vue-Projekt vorstellen. Es hat einen guten Referenzwert und ich hoffe, dass es für alle hilfreich sein wird.

Nehmen Sie das von vue-cli generierte Projekt als Beispiel

1. Legen Sie zuerst die ueditor-Datei im 1.static-Ordner ab

2.index.htmlFügen Sie den folgenden Code hinzu

<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 fügt die folgende Konfiguration hinzu

externals: {
  &#39;UE&#39;: &#39;UE&#39;,
 },

4 .index.html

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

5.Editor-Komponente

<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(&#39;UE&#39;);// eslint-disable-line
export default {
 name: &#39;editorView&#39;,
 data: () => (
  {
   editor: null,
  }
 ),
 methods: {
  geteditor() {
   console.log(this.editor.getContent());
  },
 },
 mounted() {
  this.editor = UE.getEditor(&#39;editor&#39;);
 },
 destroyed() {
  this.editor.destroy();
 },
};
</script>
<style>
</style>

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Vue implementiert Baummenüeffekt

Zusammenfassung der wichtigsten VUE-Themen

p5.js Einführungs-Tutorial zur Tastaturinteraktion

Das obige ist der detaillierte Inhalt vonDurch die Verwendung von ueditor im Vue-Projekt (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn