Rich Text format（RTF）来源
当前端需要处理大量文本时，一般情况下只能用textarea，需要加个图片时，还需要额外加标签，实在太单调了，无法满足开发需求😌
总有某个功能块，想要图文并茂的效果，就像微信推文那样，梦想还是要有的，万一……🤣这不，富文本就这样诞生了，开发者们也纷纷开始了踩坑之旅……
本篇仅限于了解【富文本】，后续项目有需要再深入
富文本编辑器
Rich Text Editor（RTE），一种可以内嵌于浏览器，所见即所得的文本编辑器
常见富文本框编辑器（简直不要太多💀）
富文本原理
contenteditable 属性
contenteditable 是一个枚举属性，表示元素是否可被用户编辑，当给标签加上contenteditable='true'时，就变成可编辑
document.execCommand
富文本的核心
MDN描述
当一个HTML文档切换到设计模式时，document暴露 execCommand 方法，该方法允许运行命令来操纵可编辑内容区域的元素
bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)
// document.execCommand(命令名称，是否展示用户界面，命令需要的额外参数)
// 第三个参数就是一些命令可能需要额外的参数，比如插入图片就要多传个 url 或 base64 的参数，没有则为null
浏览器提供该方法，实现其他操作（比如加粗、倾斜、插入图片等等）
使用举例:
// 加粗
document.execCommand('bold', false, null);
// 添加图片
document.execCommand('insertImage', false, url || base64);
// 把一段文字用 p 标签包裹起来
document.execCommand('formatblock', false, '<p>');
项目中遇到的问题
项目里面有个功能块，里面的主体内容是富文本编辑器生成的，但是项目的css reset会影响到富文本的样式
解决方案：iframe
{
test: /richText.html$/,
use: [
{
loader: require.resolve('html-loader')
}
]
},
import richText from './richText.html';
load = () => {
const { props } = this;
const { loadRequire } = props.detail;
const oIframe = document.getElementById('richTextFrame');
oIframe.contentWindow.document.body.innerHTML = loadRequire;
this.setState({
// iFrameHeight: `${oIframe.contentWindow.document.body.scrollHeight + 100}px`,
});
};
<iframe
id="richTextFrame"
onLoad={this.load}
title="Inline Frame Example"
width="100%"
height="auto"
frameBorder="0"
srcDoc={richText}>
</iframe>
如何开发富文本编辑器
富文本编辑器主要就是设计模式中命令模式的一种具体应用，把编辑器中的每一个单一功能做成一个命令（Command），然后绑定按钮/快捷键去触发对应的命令（比如利用自定义事件来触发），每一个命令针对编辑器中的内容进行操作，生成新的内容然后替换/更改之前的内容。
核心就是 document.execCommand，可以参看 MDN上的文档;别的用到比较多的就是 window.getSelection() 这些方法；需要后端配合的，一般就是上传图片，保存、读取内容这些；
