Vue js – Fügen Sie Text und Dropdown-Feld zum bearbeitbaren HTML-Inhaltsfeld hinzu
<p>Ich verwende Vue.js. Ich versuche, Text und ein Dropdown-Feld in ein bearbeitbares HTML-Div einzufügen. </p><p>Ich möchte über eine Schaltfläche ein Dropdown-Feld hinzufügen. Dieses Dropdown-Feld kann an einer beliebigen Stelle im Text eingefügt werden, genau wie dort, wo ich meinen Cursor platziere. </p><p>Jetzt funktioniert es fast, aber ich kann kein Problem finden. </p><p>Wenn ich mehrere Dropdown-Boxen eingebe und hinzufüge und dann auf die Schaltfläche „Datenmodell abrufen“ klicke, wird immer angezeigt, dass die von mir ausgewählte Dropdown-Box-Option falsch ist. Ich meine, es zeigt immer die erste Option. </p><p>Mit dieser Schaltfläche „Datenmodell abrufen“ versuche ich, alle Text- und Auswahloptionen abzurufen. </p><p>Hier ist mein Code:</p><p><br /></p>
<pre class="brush:php;toolbar:false;"><template>
<div>
<div class="content-editable" contenteditable="true" @input="onInput" ref="contentEditable"></div>
<button @click="addDropdown">Dropdown hinzufügen</button>
<button @click="getDataModel">Datenmodell abrufen</button>
<div>{{ dataModel }}</div>
</div>
</template>
<script>
Standard exportieren {
Daten() {
zurückkehren {
Inhalt: '',
Dropdown-Listen: [],
dropdownOptions: ['Option 1', 'Option 2', 'Option 3'],
Datenmodell: '',
};
},
Methoden: {
onInput(event) {
this.content = event.target.innerHTML.replace(/<div><br></div>/G, '');
},
addDropdown() {
const Dropdown = {
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((dropdown, 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>
<Stilbereich>
.content-editable {
Rand: 1px fest #ccc;
Polsterung: 10px;
Mindesthöhe: 100 Pixel;
Rand unten: 10px;
}
</style></pre>
<p><br /></p>
