当前位置：首页 > JavaScript

js实现编辑器

2026-01-31 05:02:03JavaScript

实现基础文本编辑器

使用HTML的contenteditable属性创建可编辑区域，结合JavaScript监听输入事件：

<div id="editor" contenteditable="true"></div>
<script>
  const editor = document.getElementById('editor');
  editor.addEventListener('input', () => {
    console.log(editor.innerHTML); // 获取带格式的内容
  });
</script>

集成富文本功能

通过document.execCommand实现粗体、斜体等基础格式操作：

function formatText(command, value = null) {
  document.execCommand(command, false, value);
}
// 调用示例：formatText('bold')  formatText('insertImage', 'url')

使用现成库方案

引入开源库如TinyMCE或Quill快速实现专业编辑器：

js实现编辑器

<!-- TinyMCE示例 -->
<script src="https://cdn.tiny.cloud/1/your-api-key/tinymce/5/tinymce.min.js"></script>
<script>
  tinymce.init({ selector: '#editor' });
</script>

<!-- Quill示例 -->
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<div id="editor"></div>
<script>
  new Quill('#editor', { theme: 'snow' });
</script>

实现Markdown编辑器

结合marked.js库解析Markdown语法：

<textarea id="input"></textarea>
<div id="preview"></div>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script>
  document.getElementById('input').addEventListener('input', (e) => {
    document.getElementById('preview').innerHTML = marked(e.target.value);
  });
</script>

自定义语法高亮

使用Prism.js实现代码高亮功能：

js实现编辑器

<pre><code class="language-javascript" contenteditable="true">
  function test() { console.log('hello'); }
</code></pre>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/prism.min.js"></script>

实现撤销/重做功能

通过维护状态数组记录编辑历史：

let history = [];
let currentIndex = -1;

editor.addEventListener('input', () => {
  const content = editor.innerHTML;
  history = history.slice(0, currentIndex + 1);
  history.push(content);
  currentIndex = history.length - 1;
});

function undo() {
  if (currentIndex > 0) {
    currentIndex--;
    editor.innerHTML = history[currentIndex];
  }
}

添加工具栏UI

创建格式控制按钮并与编辑器交互：

<div class="toolbar">
  <button onclick="formatText('bold')">B</button>
  <button onclick="formatText('italic')">I</button>
  <input type="color" onchange="formatText('foreColor', this.value)">
</div>
<style>
  .toolbar { padding: 5px; background: #f0f0f0; }
  .toolbar button { margin-right: 5px; }
</style>

实现自动保存

使用防抖技术定期保存内容：

let saveTimer;
editor.addEventListener('input', () => {
  clearTimeout(saveTimer);
  saveTimer = setTimeout(() => {
    localStorage.setItem('editorContent', editor.innerHTML);
  }, 1000);
});

// 加载保存的内容
window.addEventListener('DOMContentLoaded', () => {
  const saved = localStorage.getItem('editorContent');
  if (saved) editor.innerHTML = saved;
});