Comment utiliser ueditor dans le projet vue

Cette fois, je vais vous montrer comment utiliser ueditor dans les projets vue. Quelles sont les précautions pour utiliser ueditor dans les projets vue. Voici des cas pratiques, jetons un coup d'oeil.

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

<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 Ajoutez la configuration suivante

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

4.index.html Ajoutez

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

5.composant éditeur

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour un contenu plus passionnant, veuillez faire attention aux autres. articles connexes sur le site Web PHP chinois !

Lecture recommandée :

Comment créer un graphique dynamique 3D avec Canvas

Comment utiliser des graphiques json et echarts avec WebGL

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!