Maison > interface Web > js tutoriel > En utilisant ueditor dans le projet vue (tutoriel détaillé)

En utilisant ueditor dans le projet vue (tutoriel détaillé)

亚连
Libérer: 2018-06-01 14:43:15
original
3414 Les gens l'ont consulté

Ci-dessous, je vais partager avec vous un exemple d'utilisation de ueditor dans un projet vue. Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde.

Prenons comme exemple le projet généré par vue-cli

1 Mettez d'abord le fichier ueditor dans le dossier 1.static

2.index.htmlAjoutez le code suivant

1

2

<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>

Copier après la connexion

3. Ajoutez la configuration suivante à webpack.base.conf.js

1

2

3

externals: {

  &#39;UE&#39;: &#39;UE&#39;,

 },

Copier après la connexion

4. Ajouter

1

2

3

<script type="text/javascript">

 window.UEDITOR_HOME_URL = "/static/ueditor/";//配置路径设定为UEditor所放的位置

</script>

Copier après la connexion

5.composant éditeur

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

<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>

Copier après la connexion

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles connexes :

Vue implémente l'effet de menu arborescent

Résumé des problèmes clés de VUE

Tutoriel d'introduction à p5.js sur l'interaction avec le clavier

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal