Vue js - 在可编辑的 HTML 内容框中添加文本和下拉框
<p>我正在使用Vue.js。我试图在可编辑的HTML div中添加文本和下拉框。</p><p>我想要使用一个按钮来添加下拉框。这个下拉框可以添加到文本的任何位置，就像我放置光标的位置一样。</p><p>现在，它几乎可以工作，但我找不到一个问题。</p><p>当我输入并添加多个下拉框，然后按下“获取数据模型”按钮时，它总是显示我选择的下拉框选项不正确。我的意思是它总是显示第一个选项。</p><p>使用这个“获取数据模型”按钮，我试图获取所有的文本+选择选项。</p><p>以下是我的代码：</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">Add Dropdown</button>
<button @click="getDataModel">Get Data Model</button>
<div>{{ dataModel }}</div>
</div>
</template>
<script>
export default {
data() {
return {
content: '',
dropdowns: [],
dropdownOptions: ['Option 1', 'Option 2', 'Option 3'],
dataModel: '',
};
},
methods: {
onInput(event) {
this.content = event.target.innerHTML.replace(/<div><br></div>/G， ''）;
},
添加下拉菜单（）{
常量下拉菜单 = {
selectedOption: this.dropdownOptions[0],
};
this.dropdowns.push(下拉);
const editableDiv = this.$refs.contentEditable;
const dropdownSelect = document.createElement('select');
dropdownSelect.style.width = '100px';
this.dropdownOptions.forEach((选项) => {
const dropdownOption = document.createElement('option');
dropdownOption.value = 选项；
dropdownOption.text = 选项；
dropdownSelect.appendChild(dropdownOption);
});
editableDiv.appendChild(dropdownSelect);
},
获取数据模型（）{
const editableDiv = this.$refs.contentEditable;
const clonedDiv = editableDiv.cloneNode(true);
const selectElements = clonedDiv.querySelectorAll('select');
this.dropdowns.forEach((dropdown, 索引) => {
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 = 克隆的Div.textContent;
},
},
};
</脚本>
<样式范围>
.内容可编辑{
边框：1px实心#ccc；
内边距：10px；
最小高度：100px；
底部边距：10px；
}
</风格></pre>
<p><br />></p>
