Comment utiliser l'éditeur dans vue

Cet article présente principalement les informations pertinentes sur l'utilisation de l'éditeur de texte enrichi ueditor dans Vue. Les amis qui en ont besoin peuvent s'y référer

Récemment, j'ai rencontré le besoin d'utiliser un éditeur de texte enrichi lorsque je travaillais sur un. système de gestion back-end. Finalement, j'ai choisi ueditor. Mon projet utilise la solution vue+vuex+vue-router+webpack+elementUI pour terminer la construction du framework

1. Téléchargez la dernière version jsp de UEditor. site officiel. , après téléchargement et décompression, vous obtiendrez un dossier utf8-jsp, qui contient le contenu suivant :

2. Renommez ce dossier en ueditor, et déplacez-le dans le dossier statique de votre propre projet, modifiez le contenu du dossier ueditor.config.js, comme indiqué ci-dessous :

3. Écrivez sous-composants

<template>
 <p :id="id" type="text/plain"></p>
</template>
<script>
 import &#39;../../../static/ueditor/ueditor.config.js&#39;
 import &#39;../../../static/ueditor/ueditor.all.min.js&#39;
 import &#39;../../../static/ueditor/lang/zh-cn/zh-cn.js&#39;
 import &#39;../../../static/ueditor/ueditor.parse.min.js&#39;
 export default {
 name: &#39;UE&#39;,
 data() {
 return {
 editor: null
 }
 },
 props: {
 defaultMsg: {
 type: String,
 default: &#39;请输入内容&#39;
 },
 config: {
 type: Object
 },
 id: {
 type: String,
 default: `ue${Math.random(0, 100)}`
 }
 },
 mounted() {
 this.$nextTick(() => {
 this.editor = UE.getEditor(this.id, this.config); // 初始化UE
 this.editor.addListener("ready", () => {
  this.editor.execCommand(&#39;insertHtml&#39;, this.defaultMsg);
  this.editor.focus() // 确保UE加载完成后，放入内容。
 })
 })
 },
 methods: {
 getUEContent() { // 获取内容方法
 return this.editor.getContent()
 },
 clearContent() { // 清空编辑器内容
 return this.editor.execCommand(&#39;cleardoc&#39;);
 },
 },
 beforeDestroy() {
 // 组件销毁的时候，要销毁 UEditor 实例
 if (this.editor !== null && this.editor.destroy) {
 this.editor.destroy();
 }
 }
 }
</script>
<style scoped></style>

4. Utilisez

<UE :config="configEditor" :id="ue1" ref="ue" :defaultMsg="val"></UE>

dans le composant parent 5. Après cela, le téléchargement d'images provoquera une erreur http d'élément de configuration backend et le téléchargement de fichiers le fera. provoquer une erreur de téléchargement. Il est important de noter ici qu'une fois que ueditor est configuré sur le front-end, il doit coopérer avec la partie back-end, puis changer le préfixe de l'URL du serveur dans ueditor.config.js en l'adresse du chemin de requête pour votre propre arrière-plan. -fin d'accès

serverUrl: "统一请求地址"

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

Articles connexes :

Comment utiliser highCharts pour dessiner un diagramme circulaire 3D dans Vue

Utiliser le plugin de chargement paresseux d'image dans vue -lazyload

Composant à fichier unique Vuejs (tutoriel détaillé)

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!