Maison > Article > interface Web > En utilisant ueditor dans le projet vue (tutoriel détaillé)
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
<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. Ajoutez la configuration suivante à webpack.base.conf.js
externals: { 'UE': 'UE', },
4. Ajouter
<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>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!