实现富文本效果有两种方法：

  1. iframe+designMode
  2. contenteditable。

方法一：iframe+designMode

页面中iframe嵌入一个子页面，把iframe的属性designMode设为on，这个子页面的所有内容就可以想使用文字处理软件一样，对文本进行加粗、斜体等设置。
主页面

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  6.   <title>富文本编辑</title>
  7. </head>
  8. <body>
  9.   <iframe src="./content.html" name="richedit" style="width:400px;height:300px;"></iframe>
  10.   <script>
  11.     window.addEventListener('load', function () {
  12.       window.frames['richedit'].document.designMode = 'on';
  13.     }, false);
  14.   </script>
  15. </body>
  16. </html>

content.html子页面

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  6.   <title>Document</title>
  7. </head>
  8. <body>
  9.   <h1>富文本编辑器标题</h1>
  10.   <header>
  11.     <nav>导航栏</nav>
  12.   </header>
  13.   <main>
  14.     <section>内容区块</section>
  15.     <section>这里是一些内容，这里是一些内容，这里是一些内容</section>
  16.   </main>
  17.   <footer>底部版权相关申明</footer>
  18. </body>
  19. </html>

实现效果
富文本编辑器原理 - 图1

方法二：contenteditable

可以把contenteditable属性应用到页面中的任何元素，然后用户立即就可以编辑该元素，而不需要iframe页。

  1. <section class="editable" id="richedit">
  2.     <h2>标题栏</h2>
  3.     <nav>导航栏</nav>
  4.     <article>内容主体部分</article>
  5. </section>
  6. <script>
  7.   $richedit = document.getElementById('richedit');
  8.   $richedit.contentEditable = 'true';
  9. </script>

实现效果
富文本编辑器原理 - 图2

操作富文本

只展示富文本的效果意义不大，实际应用中，更多结合用户操作交互，产生想要的效果，js中已提供相应api。

document.execCommand()

document.execCommand()对文档执行预定义的命令，而且可以应用大多数格式。可以传递3个参数：要执行命令的名称、浏览器是否为命令提供用户界面的一个布尔值和执行命令必须的值（无需则为null）。
设置粗体document.execCommand('bold', false, null);
富文本编辑器原理 - 图3

ps:需要注意的是执行bold命令，IE和Opera会使用<strong>标签包围文本，Safari和Chrome使用<b>标签，而Firefox则使用’’标签，由于各个浏览器实现命令的方式不同，加上通过innerHTML实现转化的方式也不一样，所以不能指望富文本编辑器会产生一致的HTML。
富文本编辑器原理 - 图4
富文本编辑器原理 - 图5
设置斜体 document.execCommand('italic', false, null)
富文本编辑器原理 - 图6
设置居中对齐document.execCommand(‘justifycenter’, false, null);
富文本编辑器原理 - 图7
设置插入图片document.execCommand(‘insertimage’, false, ‘./position.png’);
富文本编辑器原理 - 图8
设置字体大小document.execCommand(‘fontsize’, false, this.value);
富文本编辑器原理 - 图9
当然，还有一些其他的设置命令，比如backcolor设置背景色，indent缩进文本，formatblock要包围当前文本块HTML标签，copy将选中文本复制到剪贴板等。
除了命令之外，还有于之相关的一些方法：

  • document.queryCommandEnabled()检测某个命令是否可以针对当前选择的文本。比如document.queryCommandEnabled(‘bold’)返回true表示对当前选中的文本可以执行bold命令。
  • document.queryCommandState()确定是否已将指定命令应用到选择的文本。比如document.queryCommandState(‘bold’)返回true表示当前选中的文本用了bold命令加粗的。
  • document.queryCommandValue()获取执行命令传入的值。比如document.queryCommandValue(‘fontsize’)返回5，则用fontsize命令传入的值是5。

富文本选区

为了更精细化控制富文本编辑器的内容，可以使用document.getSelection()方法，返回Selection对象。在Selection对象上提供了很多实用的方法。

  1. var selection = document.getSelection();
  2. console.log('当前选中的文本：');
  3. console.log(selection.toString());
  4. // 取得代表选区的范围                                                
  5. var range = selection.getRangeAt(0);
  6. console.log(range);
  7. // 包裹一个标签使得选中内容突出
  8. var span = document.createElement('span');
  9. span.style.backgroundColor = '#f0f';
  10. range.surroundContents(span);
  11. console.log('当前文本编辑器内容：');
  12. console.log($richedit.innerHTML);

富文本编辑器原理 - 图10
富文本编辑器原理 - 图11