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': 'UE',
},
|
Copier après la connexion
4. Ajouter
1 2 3 | <script type= "text/javascript" >
window.UEDITOR_HOME_URL = "/static/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');// eslint-disable-line
export default {
name: & #39;editorView',
data: () => (
{
editor: null ,
}
),
methods: {
geteditor() {
console.log( this .editor.getContent());
},
},
mounted() {
this .editor = UE.getEditor(& #39;editor');
},
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!