<p contenteditable="true">这是一个可编辑段落。</p>
所有主流浏览器都支持 contenteditable 属性
问题原始链接：https://www.zhihu.com/question/366666295/answer/976815981
能提出这个问题，说明题主有过很仔细的思考。我尝试借此澄清一个大家入门 Web 富文本编辑时可能的误解吧：
在浏览器里，打开了 contentEditable 不等于借助了 contentEditable。这是什么意思呢？
- 打开了 contentEditable，意味着页面这个区域内具备了进行富文本编辑的能力。
- 借助了 contentEditable，意味着依赖了浏览器默认的富文本编辑行为。
粗略看来，一个 DOM 元素加上 contentEditable 属性后，就大致具备了这些能力：
- 选区的拖选编辑和光标闪动支持
- 方向键控制时的默认行为
- 输入文字时的默认行为（牵扯到输入法）
- 复制粘贴时的默认行为（牵扯到富文本剪贴）
主流浏览器都会给你一套开箱即用的方案，让你用一行代码即可实现富文本编辑器。但天下没有免费的午餐，像这种最简单的方案就有传说中的不兼容的问题。比如同样一个加粗操作，没人规定浏览器是应该给文本套个 <b> 标签还是给 <span> 加个 font-weight:bold; 的 CSS 样式来实现（印象里 Chrome 是直接套 span 的，说好的语义化呢）。于是最后在 Chrome 和 Firefox 里互相编辑的产物，就必然是不可控、不可预期的了。很多人说富文本做起来很脏，这就是原因之一。
所以还是那句老话，完全依赖别人现成的技术是会被卡脖子的。相应地，Facebook 的 DraftJS 虽然不太好用，但代表了一种 React 思潮引领下的富文本新思路（大概率不是它首创，但这么说起来方便前端同学们理解），简单来说是这样的：
- 同样用 contentEditable，但只关心它的选区 (Selection) 状态。
- 输入文本时，以 nextState = f(selection, input) 理念计算出新状态。
这样看来，整个编辑器就像是一个 React 中的受控组件了。关键的受控行为大概包括这些：
- 按键输入被拦截，基于 f(selection, input) 计算出新状态
- 复制粘贴被拦截，基于 f(selection, input) 计算出新状态
- DOM 更改被拦截，基于 nextState 单向地渲染出 DOM 状态
那么，还有哪些地方需要依赖 contentEditable 呢？其实就是和 Selection 强相关的东西：
- 选区高亮状态依赖 contentEditable，否则你需要自己渲染那个「拖蓝」区域。
- 点击后的选中状态依赖 contentEditable，否则你需要自己计算某个坐标下对应了哪个文字，意味着要自己去解析字体参数做文本排版，这是天坑。
- 方向键操作后的状态依赖 contentEditable，理由同上。
我相信看到这里，有经验的前端同学已经知道怎样开始尝试「不借助 contentEditable 的默认行为来实现富文本编辑器」了吧。当然，我已经挺久没做富文本了，上面一些概念可能与具体细节有些出入，欢迎大家指正。
注意，许多实际工程做起来，绝不是知道个原理就够了。富文本在细节层面有非常多麻烦的地方，除非实力雄厚如 Google，否则不推荐大家在商业项目里完全从头做起。
具体到实际项目，ProseMirror 和 Slate 的框架化设计都很不错。我相信它们是开发「自主可控」的富文本编辑器时的正解。许多历史经验已经告诉我们，自主可控未必意味着完全自己从头写，而是要掌控对满足自己未来需求的控制权。在这小小的富文本编辑器里，不也是这样吗？
其他精彩文章，可以到点这里阅读哦 https://michael18811380328.github.io/
问题现在主流的web富文本编辑器几乎都是基于contentEditable的，我们之前的编辑器引擎就是基于TinyMCE魔改的，这个引擎目前只有我一个人负责。富文本编辑器是我们的核心业务，现在leader要搞一个专门的富文本编辑器团队，开发类似于Google docs那种不基于contentEditable的编辑器引擎，这完全是另一个级别的事情了，我找遍了全网也找不到类似还活着的开源项目。除了代码编辑器ace之外真的一无所获，有没有做过的大佬稍微讲一下思路，要实现那些关键组件？或者讲一下大家团队一开始是怎
支持拖拽 复制 截图 excel ----------------------------------------------------------------------------------------------------------------------------------------------复制代码
* Created by zhanglei on 2017/5/23.
import React, { Component, PropTypes } from 'react';
import { Icon,Modal,message } from 'antd';
import ContentEditable from 'react-contenteditable'
import './edit.less'
export default class Editor extends Component {
static propTypes = {
className: PropTypes.string,
value:PropTypes.string,
editColor:PropTypes.string,
constructor(props){
super(props);
['inputTextChange','onchangefile','onpaste','ondrop','onParseOrDrop'].map(item=>this[item]=this[item].bind(this));
this.state={
value:null,
tableData:[],
linkModel:false,
visible:false,
isColor:false,
myDisabled:false,
isEdit:true,
isFace:false,
isBackground:false,
linkValue:null,
editStatus:[
{label:'加粗',value:'bold',icon:'zitijiacu'},
{label:'斜体',value:'italic',icon:'zitixieti'},
{label:'下划线',value:'underline',icon:'xiahuaxian'},
{label:'链接',value:'createLink',icon:'lianjie'}
fontSizeData:[
{title:'大号',value:'h1',icon:'H1'},
{title:'中号',value:'h2',icon:'h2'},
{title:'正常',value:'h3',icon:'h3-copy-copy'},
{title:'小号',value:'h4',icon:'h4'}
isSent:true,
colorData:[
'red','orange','yellow','#01FF01','#98F5FF','#8686FF','rgb(216, 154, 255)', '#fff',
'#DE1607','#E49402','#E2E205','#04DE04','rgb(71, 237, 255)','#6363F9','rgb(204, 123, 255)', 'rgb(206, 205, 205)',
'#C10303','#D08702','#C5C503','#07C307','rgb(0, 221, 245)','#4C4CFB','rgb(184, 70, 255)', 'rgb(183, 183, 183)',
'#960505','#AB7005','#ABAB03','#02A902','rgb(6, 171, 189)','#3333FF','rgb(167, 25, 255)', 'rgb(148, 148, 148)',
'#710303','#989805','#989805','#059C05','rgb(9, 138, 152)','blue','#A020F0', 'rgb(76, 75, 75)',
'#5D0404',' #757504','#757504','green','rgb(2, 99, 109)','blue','#A020F0', '#000','rgb(56, 2, 2)'
componentDidMount(){
document.addEventListener('click',this.documentClick);
componentWillReceiveProps(nextProps){
if('value' in nextProps&&this;.state.editValue !== nextProps.value){
this.setState({editValue:nextProps.value})
//全局取消隐藏颜色框
documentClick=(e)=>{
const {isColor,isBackground} = this.state;
if(isColor||isBackground){
let en = e.srcElement||e.target;
const name = '.color-content';
while(en){
if(en.className&&en;.className === name.replace('.','')){
return;
en = en[removed];
this.setState({isColor:false,isBackground:false});
//卸载颜色框
componentWillUnmount(){
document.removeEventListener('click',this.documentClick)
* <粘贴功能>
* @param onParseOrDrop 通用方法
用于日常写作的富文本编辑器
在您的Web应用程序中撰写格式精美的文本。 Trix是一种所见即所得的编辑器，用于编写消息，评论，文章和列表，这是大多数Web应用程序组成的简单文档。 它具有完善的文档模型，对嵌入式附件的支持以及输出简洁一致HTML。
Trix是一个开源项目， 是的创建者。 数以百万计的人将他们的文本信任到Basecamp，我们构建了Trix，为他们提供了最佳的编辑体验。 参见中的Trix实际应用。
大多数WYSIWYG编辑器都是HTML的contenteditable和execCommand API的包装，这些API由Microsoft设计，以支持Inter
很久以前就想做一个
富文本编辑器，但是感觉比较难，一直没有
实现。直到了解了html5的
contenteditable属性可以设置一个div为可编辑状态，利用这个特性做
富文本编辑器就比较简单了
首先 认识一下
contenteditable 它是一个属性 可以这样使一个DIV的编辑状态被激活
<div
contenteditable="true"></div>
...
制作一个简单的
富文本编辑器（一）
h5中新添加了几个全局属性其中
contentEditable属性可以让一个元素变为一个可编辑的元素，可以为用户提供在线编辑；
两个值true 和 false
那么我们来试一下这个属性的效果
很简单：在想改变的元素里添加这个属性将值设为true;
<div
contenteditable="true">我可以编辑啦</div>
</body>
然后再设置点css样式
以上是一个简单的
富文本编辑器结构，其中 `.editor-container` 是
编辑器的容器元素，`.editor` 是可编辑的
富文本区域。要调节
编辑器的高度，可以为 `.editor` 元素设置样式，例如：
```css
.editor {
height: 300px; /* 设置高度为 300 像素 */
这将使
编辑器的高度为 300 像素。如果要自适应高度，可以使用 `auto` 属性：
```css
.editor {
height: auto; /* 自适应高度 */
如果需要在用户调整
编辑器大小时，自动调整高度，可以使用 JavaScript 监听事件：
```javascript
const editor = document.querySelector('.editor');
editor.addEventListener('input', function() {
this.style.height = 'auto'; /* 先将高度设置为自适应 */
this.style.height = this.scrollHeight + 'px'; /* 再设置高度为内容高度 */
以上代码将在用户输入时，先将
编辑器高度设置为自适应，再根据内容高度调整高度。这样就可以
实现编辑器高度自适应的效果。
