以下代碼在content-display的部份在footer增加一個切換按鈕，除了原本顯示格式外，可切換成帶有html標籤的格式： <template> <div> <div> <div class="wangeditor"> <WangEditor v-model="content" @response="(msg) => content = msg" /> </div> <div class="right-panel"> <mreditor1 ref="mreditor1" /> </div> </div> <div v-if="isVisible" class="content-display" v-html="highlightedContent"></div> <footer class="sticky-footer"> <span><button @click="toggleContent">顯示/隱藏標籤</button></span> <span><button @click="resetAll" class="reset-btn">輸入新醫案</button></span> <!-- 新增ID输入框和获取按钮 --> <span class="id-input"> <input v-model="fetchId" placeholder="輸入醫案ID" type="number" min="1" /> <button @click="fetchById">獲取醫案</button> </span> <!-- 操作按钮组 --> <span v-if="submittedId"> <button @click="updateContent" class="update-btn">更新醫案</button> <button @click="deleteContent" class="delete-btn">刪除醫案</button> </span> <span v-else> <button @click="submitContent" class="submit-btn">提交醫案</button> </span> <span v-if="submittedId" class="submitted-id">醫案 ID: {{ submittedId }}</span> <span>醫案編輯器</span> </footer> </div> </template> <script> import WangEditor from './WangEditor.vue'; import mreditor1 from './mreditor1.vue'; export default { components: { WangEditor, mreditor1 }, data() { return { content: '', isVisible: true, submittedId: null, fetchId: null, dnTags: [] // 存储从API获取的标签数据 }; }, computed: { // 计算高亮后的内容 highlightedContent() { if (!this.dnTags.length || !this.content) return this.content; // 创建临时DOM元素处理高亮 const tempEl = document.createElement('div'); tempEl.innerHTML = this.content; // 遍历所有文本节点 const walker = document.createTreeWalker( tempEl, NodeFilter.SHOW_TEXT ); const nodes = []; while (walker.nextNode()) { nodes.push(walker.currentNode); } // 对每个文本节点进行处理 nodes.forEach(node => { let text = node.nodeValue; let newHtml = text; // 对每个标签进行高亮处理（按长度降序排序，避免短标签优先匹配） this.dnTags .slice() .sort((a, b) => b.length - a.length) .forEach(tag => { const regex = new RegExp( escapeRegExp(tag), 'g' ); newHtml = newHtml.replace( regex, `<span style="color: rgb(212, 107, 8); font-weight: bold;">${tag}</span>` ); }); // 如果内容有变化则替换节点 if (newHtml !== text) { const span = document.createElement('span'); span.innerHTML = newHtml; node.parentNode.replaceChild(span, node); } }); return tempEl.innerHTML; } }, async mounted() { // 组件挂载时获取标签数据 await this.fetchDNTags(); }, methods: { // 获取标签数据 async fetchDNTags() { try { const response = await fetch('DNTag/?format=json'); const data = await response.json(); this.dnTags = data .map(item => item.dnname) .filter(name => name && name.trim().length > 0); } catch (error) { console.error('获取标签失败:', error); alert('标签数据加载失败，高亮功能不可用'); } }, // 通过ID获取医案数据 async fetchById() { if (!this.fetchId) { alert('請輸入有效的醫案ID'); return; } try { const response = await fetch(`MRInfo/${this.fetchId}/?format=json`); if (response.ok) { const data = await response.json(); // 填充表单数据 this.$refs.mreditor1.formData.mrname = data.mrname || ''; this.$refs.mreditor1.formData.mrposter = data.mrposter || ''; this.content = data.mrcase || ''; this.submittedId = data.id; this.fetchId = null; // 清空输入框 // 刷新标签数据 await this.fetchDNTags(); alert('醫案數據加載成功！'); } else if (response.status === 404) { alert('未找到該ID的醫案'); } else { throw new Error('獲取醫案失敗'); } } catch (error) { console.error('Error:', error); alert(`獲取醫案失敗: ${error.message}`); } }, // 提交医案 async submitContent() { const formData = this.$refs.mreditor1.getFormData(); const postData = { mrcase: this.content, ...formData }; try { const response = await fetch('MRInfo/?format=json', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(postData), }); if(response.ok) { const data = await response.json(); this.submittedId = data.id; alert('醫案提交成功！'); } else { throw new Error('提交失败'); } } catch (error) { console.error('Error:', error); alert(`提交失败: ${error.message}`); } }, // 更新医案 async updateContent() { if (!this.submittedId) return; const formData = this.$refs.mreditor1.getFormData(); const postData = { mrcase: this.content, ...formData }; try { const response = await fetch(`MRInfo/${this.submittedId}/?format=json`, { method: 'PUT', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(postData), }); if (response.ok) { alert('醫案更新成功！'); } else { throw new Error('更新失败'); } } catch (error) { console.error('Error:', error); alert(`更新失败: ${error.message}`); } }, // 删除医案 async deleteContent() { if (!this.submittedId) return; if (!confirm('確定要刪除這個醫案嗎？')) return; try { const response = await fetch(`MRInfo/${this.submittedId}/?format=json`, { method: 'DELETE', headers: { 'Content-Type': 'application/json', } }); if (response.ok) { this.resetAll(); alert('醫案刪除成功！'); } else { throw new Error('刪除失败'); } } catch (error) { console.error('Error:', error); alert(`刪除失败: ${error.message}`); } }, // 重置表单 resetAll() { this.content = ''; this.submittedId = null; this.fetchId = null; this.$refs.mreditor1.resetForm(); }, // 切换内容显示 toggleContent() { this.isVisible = !this.isVisible; } } }; // 辅助函数：转义正则特殊字符 function escapeRegExp(string) { return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); } </script> <style scoped> /* 原有样式保持不变 */ .wangeditor { flex: 1; padding: 10px; overflow-y: auto; } .right-panel { position: fixed; top: 56px; bottom: 45px; right: 0; width: 30%; background: white; padding: 10px; z-index: 100; overflow-y: auto; } .content-display { position: fixed; top: 570px; left: 0; width: 70%; bottom: 45px; z-index: 999; background-color: white; overflow-y: auto; padding: 10px; border: 1px solid #eee; } .sticky-footer { display: flex; justify-content: flex-end; align-items: center; position: fixed; bottom: 0; left: 0; width: 100%; background-color: #ffd800ff; z-index: 999; padding: 10px 20px; box-sizing: border-box; flex-wrap: wrap; } .sticky-footer > span { margin-left: 5px; display: flex; align-items: center; } .submitted-id { padding: 2px; background-color: #e2f0fd; color: #004085; border-radius: 4px; } .reset-btn { margin-left: 10px; padding: 2px; background-color: #dc3545; color: white; border: none; border-radius: 4px; cursor: pointer; } .reset-btn:hover { background-color: #c82333; } /* 新增ID输入框样式 */ .id-input { display: flex; align-items: center; } .id-input input { width: 100px; padding: 2px 5px; margin-right: 5px; border: 1px solid #ccc; border-radius: 4px; } /* 操作按钮样式 */ .submit-btn { background-color: #28a745; color: white; border: none; padding: 2px 8px; border-radius: 4px; cursor: pointer; } .update-btn { background-color: #007bff; color: white; border: none; padding: 2px 8px; border-radius: 4px; cursor: pointer; } .delete-btn { background-color: #dc3545; color: white; border: none; padding: 2px 8px; border-radius: 4px; cursor: pointer; } .submit-btn:hover { background-color: #218838; } .update-btn:hover { background-color: #0069d9; } .delete-btn:hover { background-color: #c82333; } </style>

<think>我们需要在footer中增加一个切换按钮，用于切换content-display的显示格式。目前，content-display使用v-html显示高亮后的内容（带HTML标签）。现在要求增加一个切换功能，使得content-display可以在两种模式之间切换： 1. 带HTML标签的格式（即当前的高亮格式） 2. 原始文本格式（即不解析HTML，直接显示文本） 因此，我们需要： 1. 在footer中添加一个按钮，用于切换显示模式。 2. 添加一个数据属性（例如displayFormat）来记录当前的显示模式（'html'或'text'）。 3. 根据displayFormat的值，动态设置content-display的内容： - 如果是'html'，则使用v-html绑定高亮后的内容（当前行为）。 - 如果是'text'，则使用文本插值（{{ content }}）显示原始文本。 注意：高亮后的内容是通过计算属性highlightedContent得到的，所以当显示模式为'html'时，我们显示highlightedContent；当显示模式为'text'时，我们显示原始文本content。 另外，为了保持一致性，我们还需要考虑在切换显示模式时，content-display的样式可能需要调整（比如文本的换行等）。 修改步骤： 1. 在data中添加一个属性displayFormat，默认值为'html'（即当前模式）。 2. 在footer中添加一个按钮，点击按钮切换displayFormat的值（在'html'和'text'之间切换）。 3. 修改content-display的显示方式，根据displayFormat的值来决定使用v-html还是文本插值。 4. 为切换按钮添加合适的标签，例如“切換純文本”和“切換高亮”，根据当前状态显示。 具体代码修改如下：</think>以下是在footer增加切换按钮，实现content-display在原始文本格式和带HTML标签格式之间切换的完整代码： ```vue <template> <div> <div> <div class="wangeditor"> <WangEditor v-model="content" @response="(msg) => content = msg" /> </div> <div class="right-panel"> <mreditor1 ref="mreditor1" /> </div> </div> <!-- 修改：根据displayFormat显示不同格式内容 --> <div v-if="isVisible" class="content-display"> <div v-if="displayFormat === 'html'" v-html="highlightedContent"></div> <pre v-else>{{ content }}</pre> </div> <footer class="sticky-footer"> <span> <!-- 修改：新增格式切换按钮 --> <button @click="toggleFormat"> {{ displayFormat === 'html' ? '切換純文本' : '切換高亮' }} </button> </span> <span><button @click="toggleContent">顯示/隱藏標籤</button></span> <span><button @click="resetAll" class="reset-btn">輸入新醫案</button></span> <span class="id-input"> <input v-model="fetchId" placeholder="輸入醫案ID" type="number" min="1" /> <button @click="fetchById">獲取醫案</button> </span> <span v-if="submittedId"> <button @click="updateContent" class="update-btn">更新醫案</button> <button @click="deleteContent" class="delete-btn">刪除醫案</button> </span> <span v-else> <button @click="submitContent" class="submit-btn">提交醫案</button> </span> <span v-if="submittedId" class="submitted-id">醫案 ID: {{ submittedId }}</span> <span>醫案編輯器</span> </footer> </div> </template> <script> import WangEditor from './WangEditor.vue'; import mreditor1 from './mreditor1.vue'; export default { components: { WangEditor, mreditor1 }, data() { return { content: '', isVisible: true, submittedId: null, fetchId: null, dnTags: [], // 存储从API获取的标签数据 displayFormat: 'html' // 新增：控制显示格式 ('html' 或 'text') }; }, computed: { // 计算高亮后的内容 highlightedContent() { if (!this.dnTags.length || !this.content) return this.content; // 创建临时DOM元素处理高亮 const tempEl = document.createElement('div'); tempEl.innerHTML = this.content; // 遍历所有文本节点 const walker = document.createTreeWalker( tempEl, NodeFilter.SHOW_TEXT ); const nodes = []; while (walker.nextNode()) { nodes.push(walker.currentNode); } // 对每个文本节点进行处理 nodes.forEach(node => { let text = node.nodeValue; let newHtml = text; // 对每个标签进行高亮处理（按长度降序排序，避免短标签优先匹配） this.dnTags .slice() .sort((a, b) => b.length - a.length) .forEach(tag => { const regex = new RegExp( this.escapeRegExp(tag), 'g' ); newHtml = newHtml.replace( regex, `<span class="highlight-tag">${tag}</span>` ); }); // 如果内容有变化则替换节点 if (newHtml !== text) { const span = document.createElement('span'); span.innerHTML = newHtml; node.parentNode.replaceChild(span, node); } }); return tempEl.innerHTML; } }, async mounted() { // 组件挂载时获取标签数据 await this.fetchDNTags(); }, methods: { // 新增：切换显示格式 toggleFormat() { this.displayFormat = this.displayFormat === 'html' ? 'text' : 'html'; }, // 获取标签数据 async fetchDNTags() { try { const response = await fetch('DNTag/?format=json'); const data = await response.json(); this.dnTags = data .map(item => item.dnname) .filter(name => name && name.trim().length > 0); } catch (error) { console.error('获取标签失败:', error); alert('标签数据加载失败，高亮功能不可用'); } }, // 通过ID获取医案数据 async fetchById() { if (!this.fetchId) { alert('請輸入有效的醫案ID'); return; } try { const response = await fetch(`MRInfo/${this.fetchId}/?format=json`); if (response.ok) { const data = await response.json(); // 填充表单数据 this.$refs.mreditor1.formData.mrname = data.mrname || ''; this.$refs.mreditor1.formData.mrposter = data.mrposter || ''; this.content = data.mrcase || ''; this.submittedId = data.id; this.fetchId = null; // 清空输入框 // 刷新标签数据 await this.fetchDNTags(); alert('醫案數據加載成功！'); } else if (response.status === 404) { alert('未找到該ID的醫案'); } else { throw new Error('獲取醫案失敗'); } } catch (error) { console.error('Error:', error); alert(`獲取醫案失敗: ${error.message}`); } }, // 提交医案 async submitContent() { const formData = this.$refs.mreditor1.getFormData(); const postData = { mrcase: this.content, ...formData }; try { const response = await fetch('MRInfo/?format=json', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(postData), }); if(response.ok) { const data = await response.json(); this.submittedId = data.id; alert('醫案提交成功！'); } else { throw new Error('提交失败'); } } catch (error) { console.error('Error:', error); alert(`提交失败: ${error.message}`); } }, // 更新医案 async updateContent() { if (!this.submittedId) return; const formData = this.$refs.mreditor1.getFormData(); const postData = { mrcase: this.content, ...formData }; try { const response = await fetch(`MRInfo/${this.submittedId}/?format=json`, { method: 'PUT', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(postData), }); if (response.ok) { alert('醫案更新成功！'); } else { throw new Error('更新失败'); } } catch (error) { console.error('Error:', error); alert(`更新失败: ${error.message}`); } }, // 删除医案 async deleteContent() { if (!this.submittedId) return; if (!confirm('確定要刪除這個醫案嗎？')) return; try { const response = await fetch(`MRInfo/${this.submittedId}/?format=json`, { method: 'DELETE', headers: { 'Content-Type': 'application/json', } }); if (response.ok) { this.resetAll(); alert('醫案刪除成功！'); } else { throw new Error('刪除失败'); } } catch (error) { console.error('Error:', error); alert(`刪除失败: ${error.message}`); } }, // 重置表单 resetAll() { this.content = ''; this.submittedId = null; this.fetchId = null; this.displayFormat = 'html'; // 重置为默认格式 this.$refs.mreditor1.resetForm(); }, // 切换内容显示 toggleContent() { this.isVisible = !this.isVisible; }, // 转义正则特殊字符 escapeRegExp(string) { return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); } } }; </script> <style scoped> /* 新增高亮标签样式 */ .highlight-tag { color: rgb(212, 107, 8); font-weight: bold; background-color: rgba(212, 107, 8, 0.1); padding: 0 2px; border-radius: 2px; } /* 纯文本显示样式 */ .content-display pre { white-space: pre-wrap; word-break: break-word; font-family: inherit; margin: 0; padding: 10px; line-height: 1.5; } /* 原有样式保持不变 */ .wangeditor { flex: 1; padding: 10px; overflow-y: auto; } .right-panel { position: fixed; top: 56px; bottom: 45px; right: 0; width: 30%; background: white; padding: 10px; z-index: 100; overflow-y: auto; } .content-display { position: fixed; top: 570px; left: 0; width: 70%; bottom: 45px; z-index: 999; background-color: white; overflow-y: auto; padding: 10px; border: 1px solid #eee; } .sticky-footer { display: flex; justify-content: flex-end; align-items: center; position: fixed; bottom: 0; left: 0; width: 100%; background-color: #ffd800ff; z-index: 999; padding: 10px 20px; box-sizing: border-box; flex-wrap: wrap; gap: 8px; } .sticky-footer > span { display: flex; align-items: center; } .submitted-id { padding: 2px; background-color: #e2f0fd; color: #004085; border-radius: 4px; } .reset-btn { padding: 2px 8px; background-color: #dc3545; color: white; border: none; border-radius: 4px; cursor: pointer; } .reset-btn:hover { background-color: #c82333; } /* ID输入框样式 */ .id-input { display: flex; align-items: center; } .id-input input { width: 100px; padding: 2px 5px; margin-right: 5px; border: 1px solid #ccc; border-radius: 4px; } /* 操作按钮样式 */ .submit-btn { background-color: #28a745; color: white; border: none; padding: 2px 8px; border-radius: 4px; cursor: pointer; } .update-btn { background-color: #007bff; color: white; border: none; padding: 2px 8px; border-radius: 4px; cursor: pointer; } .delete-btn { background-color: #dc3545; color: white; border: none; padding: 2px 8px; border-radius: 4px; cursor: pointer; } .submit-btn:hover { background-color: #218838; } .update-btn:hover { background-color: #0069d9; } .delete-btn:hover { background-color: #c82333; } </style> ``` ### 主要修改说明： 1. **新增显示格式切换功能**： - 添加 `displayFormat` 数据属性（'html' 或 'text'） - 新增 `toggleFormat()` 方法切换显示格式 - 在 footer 添加切换按钮，按钮文字随状态变化 2. **内容显示区域改造**： ```html <div v-if="isVisible" class="content-display"> <div v-if="displayFormat === 'html'" v-html="highlightedContent"></div> <pre v-else>{{ content }}</pre> </div> ``` - 使用条件渲染切换 HTML 格式和纯文本格式 - 纯文本格式使用 `<pre>` 标签保留原始格式 3. **样式优化**： - 添加 `.highlight-tag` 类统一管理高亮样式 - 为纯文本格式添加 `white-space: pre-wrap` 保留换行 - 调整 footer 按钮间距增加可操作性 4. **功能增强**： - 重置表单时恢复默认显示格式 - 按钮文字动态变化（"切換純文本"/"切換高亮"） - 高亮标签添加半透明背景增强可读性 ### 使用说明： 1. **显示格式切换**： - 点击 "切換純文本" 按钮显示原始文本内容 - 点击 "切換高亮" 按钮显示带标签高亮的内容 - 默认显示高亮格式 2. **高亮效果**： - 匹配的标签显示为橙色（rgb(212, 107, 8)） - 添加加粗和半透明背景效果 - 标签按长度降序处理避免匹配冲突 3. **纯文本显示**： - 使用 `<pre>` 标签保留原始换行和空格 - 添加 `word-break: break-word` 防止长文本溢出 - 保持与高亮区域一致的字体和行高