使用el-input文本框实现文本HTML格式的保存，并回显编辑，显示详情等

一、背景与问题

在实际开发中，我们经常需要在前端页面中实现富文本编辑功能。传统的el-input组件仅支持纯文本输入，无法直接处理HTML格式内容。但某些业务场景需要同时支持：

1. 保存用户输入的富文本内容（如加粗、换行、列表等格式）
2. 前端展示时保持原有格式
3. 在编辑状态下支持格式化编辑

传统的解决方案是引入第三方富文本编辑器（如Quill、TinyMCE等），但这种方式存在以下问题：

• 需要引入额外的库
• 需要处理复杂的配置
• 与Element UI组件库的集成需要额外封装

本文将探索一种基于el-input的替代方案，通过结合contenteditable特性实现HTML格式的处理，同时保证安全性与性能。

二、基本原理

1. 原生HTML内容处理机制

HTML内容的处理需要解决两个核心问题：

1. 输入内容的转义：防止XSS攻击（如<script>标签注入）
2. 内容的存储与回显：确保HTML格式在保存和展示时保持一致

2. contenteditable的特殊处理

虽然el-input本身不支持HTML内容，但可以通过以下方式模拟：

• 使用<div contenteditable="true">作为编辑容器
• 通过el-input作为显示容器（需配合v-model绑定）

3. 安全处理机制

需要引入HTML转义/反转义机制，推荐使用DOMPurify库处理用户输入内容：

npm install dompurify

三、环境准备

1. 项目结构示例

src/
├── components/
│   └── RichTextEditor.vue
├── utils/
│   └── htmlUtils.js
├── App.vue

2. 安装依赖

npm install dompurify

四、核心实现

1. HTML转义/反转义工具类

// utils/htmlUtils.js
import { sanitizeHtml } from 'dompurify';

export const htmlEscape = (html) => {
  return sanitizeHtml(html, {
    allowedTags: ['b', 'i', 'u', 'br', 'p', 'ul', 'li', 'a'],
    allowedAttributes: {
      'a': ['href', 'target']
    }
  });
};

export const htmlUnescape = (html) => {
  return html;
};

2. 编辑器组件实现

<!-- components/RichTextEditor.vue -->
<template>
  <div>
    <el-input 
      v-model="displayContent" 
      type="textarea" 
      rows="10" 
      placeholder="请输入内容（支持HTML格式）"
      @focus="toggleEditor"
    ></el-input>
    <div 
      v-if="isEditing" 
      contenteditable="true" 
      class="editor" 
      @input="onInput"
      v-html="htmlEscape(content)"
    ></div>
  </div>
</template>

<script>
import { htmlEscape, htmlUnescape } from '../utils/htmlUtils';

export default {
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      isEditing: false,
      content: ''
    };
  },
  computed: {
    displayContent() {
      return this.isEditing ? this.content : this.htmlUnescape(this.value);
    }
  },
  watch: {
    value(newVal) {
      this.content = newVal;
    }
  },
  methods: {
    toggleEditor() {
      this.isEditing = !this.isEditing;
      if (this.isEditing) {
        this.content = this.htmlEscape(this.value);
      }
    },
    onInput(event) {
      const html = event.target.innerHTML;
      this.content = html;
      this.$emit('input', html);
    }
  }
};
</script>

<style scoped>
.editor {
  border: 1px solid #ccc;
  padding: 10px;
  min-height: 100px;
  outline: none;
}
</style>

3. 安全处理关键代码解析

// 在onInput方法中
const html = event.target.innerHTML;
this.content = htmlEscape(html);

• event.target.innerHTML获取当前编辑器内容
• htmlEscape对内容进行转义处理
• 配置的allowedTags限制了允许的HTML标签类型
• allowedAttributes限制了允许的属性

五、完整案例

1. 基础案例：富文本编辑器

<!-- pages/EditorPage.vue -->
<template>
  <div>
    <RichTextEditor v-model="textContent" />
    <el-button @click="saveContent">保存内容</el-button>
    <el-button @click="showPreview">预览内容</el-button>
    <div v-if="previewVisible" class="preview">
      <p>预览内容：</p>
      <div v-html="htmlUnescape(textContent)"></div>
    </div>
  </div>
</template>

<script>
import RichTextEditor from '../components/RichTextEditor.vue';
import { htmlEscape, htmlUnescape } from '../utils/htmlUtils';

export default {
  components: { RichTextEditor },
  data() {
    return {
      textContent: '',
      previewVisible: false
    };
  },
  methods: {
    saveContent() {
      // 保存逻辑：将textContent存储到后端
      console.log('保存的内容：', this.textContent);
    },
    showPreview() {
      this.previewVisible = true;
    }
  }
};
</script>

<style>
.preview {
  margin-top: 20px;
  border: 1px solid #ddd;
  padding: 10px;
}
</style>

2. 使用场景示例

// 在保存到后端前进行最后处理
const sanitizedContent = htmlEscape(this.textContent);
axios.post('/api/save', { content: sanitizedContent });

六、源码解析

1. 编辑器组件关键流程

1. 用户点击输入框触发@focus事件
2. 进入编辑模式，显示contenteditable容器
3. 用户输入内容时触发@input事件
4. 获取innerHTML内容并进行转义处理
5. 通过v-model同步到父组件

2. 转义处理机制

sanitizeHtml(html, {
  allowedTags: ['b', 'i', 'u', 'br', 'p', 'ul', 'li', 'a'],
  allowedAttributes: {
    'a': ['href', 'target']
  }
})

• 允许的标签限制了可编辑的格式类型
• 允许的属性限制了超链接的使用范围
• 这种限制可以有效防止XSS攻击

七、进阶使用

1. 增加格式化工具

// utils/formatUtils.js
export const addBold = (html) => {
  const parser = new DOMParser();
  const doc = parser.parseFromString(html, 'text/html');
  const selection = window.getSelection();
  const range = selection.getRangeAt(0);
  
  const span = doc.createElement('span');
  span.style.fontWeight = 'bold';
  
  const selectedText = range.toString();
  span.textContent = selectedText;
  
  range.deleteContents();
  range.insertNode(span);
  
  return doc.body.innerHTML;
};

2. 与后端的协作

// 后端接口示例（Node.js/Express）
app.post('/api/save', (req, res) => {
  const { content } = req.body;
  // 假设内容为纯文本，需要转义处理
  const sanitizedContent = sanitizeHtml(content, {
    allowedTags: ['b', 'i', 'u', 'br', 'p', 'ul', 'li', 'a'],
    allowedAttributes: {
      'a': ['href', 'target']
    }
  });
  
  // 存储到数据库
  db.saveContent(sanitizedContent);
  
  res.json({ success: true });
});

八、性能与工程实践

1. 性能优化策略

1. 内容长度限制：限制用户输入内容长度（如限制在5000字以内）
2. 防抖处理：对频繁输入进行防抖处理
3. 懒加载：仅在需要时才进行内容转义处理

2. 异常处理机制

try {
  const sanitizedContent = htmlEscape(this.textContent);
  axios.post('/api/save', { content: sanitizedContent });
} catch (error) {
  console.error('保存内容失败：', error);
  this.$notify.error({
    title: '错误',
    message: '内容保存失败'
  });
}

3. 安全风险分析

九、常见问题与踩坑

1. 常见错误示例

// 错误：未进行转义直接保存
axios.post('/api/save', { content: this.textContent });

问题分析：直接保存原始HTML内容可能导致XSS攻击

改进方案：

// 正确做法：先进行转义处理
axios.post('/api/save', { content: htmlEscape(this.textContent) });

2. 其他典型问题

十、最佳实践

1. 安全优先：始终使用DOMPurify进行内容净化
2. 格式限制：根据业务需求限定允许的HTML标签
3. 内容长度控制：设置最大输入长度限制
4. 输入校验：在前端和后端都进行输入校验
5. 性能优化：对大量内容进行懒加载处理
6. 用户提示：在输入时提示允许的格式类型

十一、总结

通过结合contenteditable特性与DOMPurify库，我们可以在不引入第三方富文本编辑器的情况下，实现基于el-input的富文本处理功能。这种方案具有以下特点：

• 灵活性：可自定义允许的HTML标签和属性
• 安全性：通过DOMPurify有效防止XSS攻击
• 可维护性：与Element UI组件库无缝集成
• 性能可控：可针对具体业务场景进行优化

建议在以下场景使用本方案：

• 需要保存简单格式化内容（如加粗、换行等）
• 不需要复杂的编辑功能（如图片上传、表格处理等）
• 对安全性要求较高的场景

但需注意以下限制：

• 不支持复杂的富文本功能（如表格、嵌入多媒体）
• 需要手动处理大部分格式化逻辑
• 与第三方富文本编辑器相比功能有限

通过合理的设计和实现，这种方案可以在保持代码简洁性的同时，满足大部分基础的富文本处理需求。