contenteditable实战总结从基础到高级的全面解析

为什么我要对比这几个方案

最近在项目里搞了个富文本编辑器，主要用到了contenteditable属性。说实话，这个属性挺方便的，但也有不少坑。今天就来聊聊我用过的几种实现方式，希望能帮到大家。

谁更灵活？谁更省事？

我比较喜欢用纯HTML+JavaScript的方式来实现contenteditable，因为这样最灵活，可以完全按自己的需求来定制。不过，这种方式也有一些坑，后面会详细说。

纯HTML+JavaScript：核心代码就这几行

先来看看纯HTML+JavaScript的实现方式。其实很简单，只需要一个div加上contenteditable属性，然后写点JS来处理一些事件就行了。

<div id="editor" contenteditable="true">
  这里是可编辑的内容
</div>

<script>
  const editor = document.getElementById('editor');
  
  editor.addEventListener('input', (e) => {
    console.log('内容变化了:', e.target.innerHTML);
  });

  editor.addEventListener('focus', (e) => {
    console.log('编辑器获得了焦点');
  });

  editor.addEventListener('blur', (e) => {
    console.log('编辑器失去了焦点');
  });
</script>

上面的代码就是最基础的实现。通过监听input、focus和blur事件，可以实现基本的功能。不过，这种实现方式在实际使用中还是有一些问题的，比如处理粘贴、拖拽等复杂操作时会比较麻烦。

性能对比：差距比我想象的大

纯HTML+JavaScript的方式虽然灵活，但在性能上可能不如一些成熟的库。我之前用过几个第三方库，比如ProseMirror和TinyMCE，发现它们在处理大量内容时表现更好。

ProseMirror：功能强大，但配置复杂

ProseMirror是一个非常强大的富文本编辑器库，支持很多高级功能，比如协作编辑、自定义节点等。但是，它的配置相当复杂，学习曲线也比较陡峭。

import { EditorState } from 'prosemirror-state';
import { EditorView } from 'prosemirror-view';
import { Schema, DOMParser } from 'prosemirror-model';
import { exampleSetup } from 'prosemirror-example-setup';

const schema = new Schema({
  nodes: exampleSetup.nodes,
  marks: exampleSetup.marks
});

const doc = DOMParser.fromSchema(schema).parse(document.querySelector('#content'));

const state = EditorState.create({
  doc,
  plugins: exampleSetup.plugins
});

const view = new EditorView(document.querySelector('#editor'), {
  state
});

上面的代码只是ProseMirror的一个简单示例。如果你需要更复杂的功能，就得自己去配置各种插件和节点，折腾半天才发现还有很多坑要踩。

TinyMCE：简单易用，但灵活性有限

TinyMCE是一个非常流行的富文本编辑器，它的优点是简单易用，配置起来也很方便。不过，它的灵活性相对较低，有时候你想要的一些特殊功能可能就不太好实现。

<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
<script>
  tinymce.init({
    selector: '#editor',
    plugins: 'link image code',
    toolbar: 'undo redo | bold italic | alignleft aligncenter alignright | code'
  });
</script>

<textarea id="editor">
  这里是可编辑的内容
</textarea>

上面的代码展示了如何初始化一个简单的TinyMCE编辑器。它的API还算丰富，但如果你想做一些非常规的操作，可能会发现有些地方不太方便。

我的选型逻辑

总的来说，选择哪种方案要看具体的需求和场景。如果项目比较简单，不需要太多高级功能，我会直接用纯HTML+JavaScript的方式。这样可以快速实现，而且改动起来也方便。

如果项目需要更多高级功能，比如协作编辑或者自定义节点，我会考虑用ProseMirror。虽然配置起来有点麻烦，但它的功能确实强大。

至于TinyMCE，我觉得它适合那些需要快速集成并且对功能要求不是特别高的场景。它简单易用，配置起来也很方便。

以上是我的对比总结，有不同看法欢迎评论区交流

希望这篇文章能帮到大家。如果你有其他更好的方案或者有不一样的看法，欢迎在评论区留言交流。大家一起进步嘛！