1行JS代码打造富文本编辑器？揭秘极简实现方案 | 拓跋的前端客栈

2025年11月26日 互联网

1行JS代码实现轻量级富文本编辑器：原理与扩展实践

一、极简实现的技术背景

在Web开发中，富文本编辑器是内容创作类应用的核心组件。传统实现方案通常依赖大型库（如Quill、TinyMCE），其完整版体积常超过200KB。本文探讨的1行核心JS代码方案，通过巧妙利用浏览器原生API，将功能压缩到极致，实现仅1.5KB的轻量级方案（含基础样式）。

1.1 核心原理剖析

实现基于document.designMode和contentEditable两大浏览器特性：

  • designMode: 'on'：将整个文档转为可编辑状态
  • contentEditable="true"：使特定元素可编辑
  • execCommandAPI：执行格式化命令（虽已废弃，但现代浏览器仍广泛支持）

二、1行核心代码实现

  1. const initEditor = (id) => Object.assign(document.getElementById(id), {contentEditable:true,designMode:'on',style:'min-h:200px;border:1px solid;padding:10px'});

2.1 代码分解说明

  1. 元素获取：通过getElementById定位容器
  2. 属性设置：
    • contentEditable：启用编辑
    • designMode：备用编辑模式（全文档）
  3. 样式注入：内联样式保证即时生效
  4. Object.assign：链式设置属性的简洁写法

2.2 完整实现示例

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <title>1行代码富文本编辑器</title>
  5.   <style>
  6.     #editor { min-height: 200px; border: 1px solid #ccc; padding: 10px; }
  7.     .toolbar button { margin: 0 5px; }
  8.   </style>
  9. </head>
  10. <body>
  11.   <div class="toolbar">
  12.     <button onclick="document.execCommand('bold')">B</button>
  13.     <button onclick="document.execCommand('italic')">I</button>
  14.     <button onclick="document.execCommand('createLink',false,prompt('URL:'))">Link</button>
  15.   </div>
  16.   <div id="editor" onclick="initEditor('editor')">点击编辑...</div>
  18.   <script>
  19.     const initEditor = (id) => Object.assign(document.getElementById(id), {
  20.       contentEditable: true,
  21.       designMode: 'on',
  22.       style: 'min-height:200px;border:1px solid #ccc;padding:10px;'
  23.     });
  24.   </script>
  25. </body>
  26. </html>

三、功能扩展方案

3.1 基础功能增强

  1. // 添加更多格式化命令
  2. const formatCommands = {
  3.   bold: () => document.execCommand('bold'),
  4.   italic: () => document.execCommand('italic'),
  5.   underline: () => document.execCommand('underline'),
  6.   insertImage: () => {
  7.     const url = prompt('输入图片URL:');
  8.     if(url) document.execCommand('insertImage', false, url);
  9.   }
  10. };
  12. // 事件监听增强
  13. document.getElementById('editor').addEventListener('input', (e) => {
  14.   console.log('内容变化:', e.target.innerHTML);
  15. });

3.2 现代API替代方案

针对execCommand的废弃问题，推荐使用：

  1. // 使用Selection API和Range API
  2. const makeBold = () => {
  3.   const selection = window.getSelection();
  4.   if (!selection.rangeCount) return;
  6.   const range = selection.getRangeAt(0);
  7.   const span = document.createElement('span');
  8.   span.style.fontWeight = 'bold';
  10.   range.surroundContents(span);
  11. };

四、性能优化策略

4.1 虚拟滚动实现

处理大文档时：

  1. class VirtualEditor {
  2.   constructor(container) {
  3.     this.container = container;
  4.     this.visibleRange = { start: 0, end: 100 };
  5.     this.observer = new IntersectionObserver(this.handleScroll.bind(this));
  6.   }
  8.   handleScroll(entries) {
  9.     // 根据可视区域动态加载内容
  10.   }
  11. }

4.2 差异化更新机制

  1. const debounceUpdate = debounce((editor, callback) => {
  2.   const html = editor.innerHTML;
  3.   if (html !== editor.lastSaved) {
  4.     callback(html);
  5.     editor.lastSaved = html;
  6.   }
  7. }, 300);

五、实际应用场景

5.1 评论系统集成

  1. // 初始化多个编辑器
  2. document.querySelectorAll('.comment-editor').forEach(el => {
  3.   initEditor(el.id);
  4.   el.addEventListener('blur', () => {
  5.     submitComment(el.id, el.innerHTML);
  6.   });
  7. });

5.2 移动端适配方案

  1. @media (max-width: 768px) {
  2.   #editor {
  3.     font-size: 16px;
  4.     line-height: 1.5;
  5.     padding: 15px;
  6.   }
  7.   .toolbar {
  8.     display: flex;
  9.     overflow-x: auto;
  10.   }
  11. }

六、安全与兼容性处理

6.1 XSS防护实现

  1. const sanitizeHTML = (html) => {
  2.   const div = document.createElement('div');
  3.   div.innerHTML = html;
  5.   // 移除危险标签和属性
  6.   const blacklist = ['script', 'iframe', 'object'];
  7.   blacklist.forEach(tag => {
  8.     const elements = div.getElementsByTagName(tag);
  9.     for (let i = elements.length - 1; i >= 0; i--) {
  10.       elements[i].parentNode.removeChild(elements[i]);
  11.     }
  12.   });
  14.   return div.innerHTML;
  15. };

6.2 浏览器兼容表

特性 Chrome Firefox Safari Edge
contentEditable ✓ ✓ ✓ ✓
execCommand ✓ ✓ ✓ ✓
Selection API ✓ ✓ ✓ ✓
Custom Elements ✓ ✓ ✓ ✓

七、完整实现示例

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <title>高级轻量编辑器</title>
  5.   <style>
  6.     #editor-container {
  7.       max-width: 800px;
  8.       margin: 20px auto;
  9.     }
  10.     #toolbar {
  11.       margin-bottom: 10px;
  12.       padding: 10px;
  13.       background: #f5f5f5;
  14.       border-radius: 4px;
  15.     }
  16.     #editor {
  17.       min-height: 300px;
  18.       border: 1px solid #ddd;
  19.       padding: 15px;
  20.       border-radius: 4px;
  21.     }
  22.     .btn {
  23.       padding: 5px 10px;
  24.       margin-right: 5px;
  25.       cursor: pointer;
  26.     }
  27.   </style>
  28. </head>
  29. <body>
  30.   <div id="editor-container">
  31.     <div id="toolbar">
  32.       <button class="btn" onclick="formatText('bold')">B</button>
  33.       <button class="btn" onclick="formatText('italic')">I</button>
  34.       <button class="btn" onclick="insertLink()">Link</button>
  35.       <button class="btn" onclick="insertImage()">Image</button>
  36.     </div>
  37.     <div id="editor" onclick="initEditor('editor')">点击或双击编辑内容...</div>
  38.   </div>
  40.   <script>
  41.     const initEditor = (id) => {
  42.       const editor = document.getElementById(id);
  43.       return Object.assign(editor, {
  44.         contentEditable: true,
  45.         designMode: 'on',
  46.         style: 'min-height:300px;border:1px solid #ddd;padding:15px;'
  47.       });
  48.     };
  50.     const formatText = (command) => {
  51.       document.execCommand(command, false, null);
  52.     };
  54.     const insertLink = () => {
  55.       const url = prompt('输入链接地址:', 'https://');
  56.       if (url) document.execCommand('createLink', false, url);
  57.     };
  59.     const insertImage = () => {
  60.       const url = prompt('输入图片URL:', 'https://');
  61.       if (url) document.execCommand('insertImage', false, url);
  62.     };
  64.     // 安全提交处理
  65.     document.getElementById('editor').addEventListener('blur', () => {
  66.       const content = document.getElementById('editor').innerHTML;
  67.       const sanitized = sanitizeHTML(content);
  68.       console.log('安全内容:', sanitized);
  69.       // 这里可以添加AJAX提交逻辑
  70.     });
  72.     function sanitizeHTML(html) {
  73.       const temp = document.createElement('div');
  74.       temp.innerHTML = html;
  75.       const scripts = temp.querySelectorAll('script');
  76.       scripts.forEach(script => script.remove());
  77.       return temp.innerHTML;
  78.     }
  79.   </script>
  80. </body>
  81. </html>

八、总结与展望

这种极简实现方案特别适合：

  1. 快速原型开发
  2. 对体积敏感的移动端应用
  3. 需要深度定制的特殊场景

未来发展方向：

  • 结合Web Components封装为标准组件
  • 集成AI辅助写作功能
  • 开发跨框架适配器（React/Vue/Svelte）

通过理解这1行核心代码背后的设计思想，开发者可以更灵活地平衡功能需求与性能要求，在各种场景下找到最优实现方案。

最新文章