Vue js - Ajouter du texte et une zone déroulante à la zone de contenu HTML modifiable
<p>J'utilise Vue.js. J'essaie d'ajouter du texte et une zone déroulante dans un div HTML modifiable. </p><p>Je souhaite ajouter une liste déroulante à l'aide d'un bouton. Cette liste déroulante peut être ajoutée n'importe où dans le texte, tout comme l'endroit où je place mon curseur. </p><p>Maintenant, cela fonctionne presque, mais je ne trouve pas de problème. </p><p>Lorsque j'entre et ajoute plusieurs listes déroulantes, puis que j'appuie sur le bouton "Obtenir le modèle de données", cela indique toujours que l'option de la liste déroulante que j'ai sélectionnée est incorrecte. Je veux dire, il montre toujours la première option. </p><p>À l'aide de ce bouton "Obtenir le modèle de données", j'essaie d'obtenir toutes les options de texte + sélection. </p><p>Voici mon code :</p><p><br /></p>
<pre class="brush:php;toolbar:false;"><template>
<div>
<div class="content-editable" contenteditable="true" @input="onInput" ref="contentEditable"></div>
<bouton @click="addDropdown">Ajouter une liste déroulante</bouton>
<bouton @click="getDataModel">Obtenir le modèle de données</bouton>
<div>{{ dataModel }}</div>
</div>
</modèle>
<script>
exporter par défaut {
données() {
retour {
contenu: '',
listes déroulantes : [],
dropdownOptions : ['Option 1', 'Option 2', 'Option 3'],
modèle de données: '',
} ;
},
méthodes : {
onInput(événement) {
this.content = event.target.innerHTML.replace(/<div><br></div>/g, '');
},
addDropdown() {
liste déroulante const = {
selectedOption : this.dropdownOptions[0],
} ;
this.dropdowns.push(dropdown);
const editableDiv = this.$refs.contentEditable;
const dropdownSelect = document.createElement('select');
dropdownSelect.style.width = '100px';
this.dropdownOptions.forEach((option) => {
const dropdownOption = document.createElement('option');
dropdownOption.value = option ;
dropdownOption.text = option ;
dropdownSelect.appendChild(dropdownOption);
});
editableDiv.appendChild(dropdownSelect);
},
getDataModel() {
const editableDiv = this.$refs.contentEditable;
const clonedDiv = editableDiv.cloneNode(true);
const selectElements = clonedDiv.querySelectorAll('select');
this.dropdowns.forEach((liste déroulante, index) => {
const selectedOption = dropdown.selectedOption;
const selectedOptionText = Array.from(selectElements[index].options).find((option) => option.value === selectedOption)?.text;
const selectedOptionTextNode = document.createTextNode(` ${selectedOptionText}`);
selectElements[index].replaceWith(selectedOptionTextNode);
});
this.dataModel = clonedDiv.textContent ;
},
},
} ;
</script>
<portée du style>
.content-editable {
bordure : 1px solide #ccc ;
remplissage : 10 px ;
hauteur minimale : 100 px ;
marge inférieure : 10 px ;
}
</style></pre>
<p><br /></p>
