原生API编写简单富文本编辑器003

在上一节，我们实现了一个简单的富文本编辑器，但是其中很多功能按钮点击还没有反应，因为这些功能需要参数，而我们并没有提供参数，这一节就来实现这些功能，它们包括：

  • 字体
  • 字号
  • 前景色
  • 背景色
  • 插入链接
  • 取消链接

字体设置

要设置字体，首先我们需要一个字体列表，为了能够在大多数电脑上显示正确的字体，我们目前就挑选一些系统自带的常用字体组成一个字体列表。

  1. // index.js
  2. ……
  4. const fontFamilys = [
  6.  '仿宋',
  8.  '黑体',
  10.  '楷体',
  12.  '宋体',
  14.  '微软雅黑',
  16.  '新宋体',
  18.  'Calibri',
  20.  'Consolas',
  22.  'Droid Sans',
  24.  ];

然后当我们点击字体设置按钮时，动态生成一个字体选择组件，插入到字体选择按钮下方。

  2. btn.onclick = function(e) {
  4.  if (command === 'fontName') {
  6.  showFontName(e);
  8.  } else {
  10.  document.execCommand(command, true, '');
  12.  }
  14.  };
  17. function showFontName(e) {
  18. // 定义字体列表
  19.  const fontFamilys = [
  21.  '仿宋',
  23.  '黑体',
  25.  '楷体',
  27.  '宋体',
  29.  '微软雅黑',
  31.  '新宋体',
  33.  'Calibri',
  35.  'Consolas',
  37.  'Droid Sans',
  39.  ];
  40.  // 生成字体选择列表模板
  42.  let tpl = '<div class="editor-dialog-fontfamily">';
  44.  tpl += '<ul>';
  46.  for (let i = 0; i < fontFamilys.length; i++) {
  48.  tpl += `<li onclick="selectFontFamily('${fontFamilys[i]}')">${fontFamilys[i]}</li>`;
  50.  }
  52.  tpl+ '</ul>';
  54.  tpl += '</div>';
  56. // 将字体选择列表填充到通用弹窗内
  58.  let dialog = document.getElementById('editorDialog');
  60.  dialog.innerHTML = tpl;
  62. // 获取按钮的相对位置坐标
  64.  let target = e.target;
  66.  let left = target.offsetLeft;
  68.  let top = target.offsetTop;
  71. // 将弹窗放置在按钮下方位置并显示出来
  73.  dialog.style.left = left + 'px';
  75.  dialog.style.top = top + target.offsetHeight + 20 + 'px';
  77.  dialog.style.display = 'block';
  79. }

在HTML中，我们需要一个专门放弹出框的元素：

  1. <div class="editor">
  3.      <div id="editorBar" class="editor-toolbar">
  4.         //...
  6.      </div>
  8.      <div id="editorContent" class="editor-content" contenteditable="true"></div>
  10.      <div id="editorDialog"></div>  <!-- 专门放置弹出框 -->
  12.  </div>

在CSS中，给弹出框和字体选择列表一些简单的样式：

  2. .editor {
  4. // ...
  6.  position: relative;
  8. }
  10. #editorDialog {
  12.  position: absolute;
  14.  display: none;
  16.  border: 1px solid #e9e9e9;
  18.  z-index: 100;
  20. }
  24. .editor-dialog-fontfamily ul {
  26.  list-style: none;
  28.  padding: 0;
  30.  padding-right: 15px;
  32. }
  36. .editor-dialog-fontfamily ul li {
  38.  height: 30px;
  40.  line-height: 30px;
  42.  padding-left: 10px;
  44.  cursor: pointer;
  46. }
  50. .editor-dialog-fontfamily ul li:hover {
  52.  background-color: #cecece;
  54. }

看看效果：

富文本编辑器开发系列11——原生API编写简单富文本编辑器003 - 图1

然后我们实现选择具体字体后的方法：

  1. function selectFontFamily(fontName) {
  3.  const rs = document.execCommand('fontName', true, fontName);
  5.  console.log(rs);
  7. }

我们发现，当我们点击选择某个字体后，编辑区中所选的文字字体并没有改变，并且控制台输出执行结果，发现是false。

原因是，当我们点击某个字体的时候，浏览器就会取消编辑区内的选区，所以当我们执行命令时，并没有选区，所以会执行失败。

现在我们对上面的代码进行改造，将字体列表改造为一个下拉选框，当选择值变化时，设置字体

  1. let tpl = '<div class="editor-dialog-fontfamily">';
  3.  tpl += '<select id="fontNameSelect" onchange="selectFontFamily()">';
  5.  for (let i = 0; i < fontFamilys.length; i++) {
  7.  tpl += `<option value="${fontFamilys[i]}" style="font-family: '${fontFamilys[i]}'">${fontFamilys[i]}</option>`;
  9.  }
  11.  tpl+ '</select>';
  13.  tpl += '</div>';
  15. //...
  18. function selectFontFamily() {
  20.  const target = document.getElementById('fontNameSelect');
  22.  const rs = document.execCommand('fontName', true, target.value);
  24.  console.log(rs);
  26. }

这时我们再看：

富文本编辑器开发系列11——原生API编写简单富文本编辑器003 - 图2

到此，终于完成了字体的设置功能，接下来我们先对字体设置功能进行一定的优化——与其点击某个按钮才弹出下拉框选择，不如一开始就用下拉框替代按钮

  1. window.onload= function() {
  3.  const btns = document.getElementById('editorBar').getElementsByTagName('button');
  5.  for (let i=0; i<btns.length; i++) {
  7.  const btn = btns[i];
  9.  const command = btn.getAttribute('command');
  11.  if (command === 'fontName') {
  13.  showFontName(btn);
  15.  }
  17.  btn.onclick = function(e) {
  19.  document.execCommand(command, 'true', '');
  21.  };
  23.  }
  25. };
  28. function showFontName(btn) {
  30.  let tpl = getFontNameTpl();
  32.  const $li = btn.parentElement;
  34.  $li.innerHTML = tpl;
  36. }
  39. function getFontNameTpl() {
  41.  const fontFamilys = [
  43.  '仿宋',
  45.  '黑体',
  47.  '楷体',
  49.  '宋体',
  51.  '微软雅黑',
  53.  '新宋体',
  55.  'Calibri',
  57.  'Consolas',
  59.  'Droid Sans',
  61.  'Microsoft YaHei',
  63.  ];
  65.  let tpl = '';
  67.  tpl += '<select id="fontNameSelect" onchange="selectFontFamily()">';
  69.  for (let i = 0; i < fontFamilys.length; i++) {
  71.  tpl += `<option value="${fontFamilys[i]}" style="font-family: '${fontFamilys[i]}'">${fontFamilys[i]}</option>`;
  73.  }
  75.  tpl+ '</select>';
  77.  return tpl;
  79. }

还需要改一下CSS，取消按钮li的宽度限制，并给一个下边距：

  1. .editor-toolbar ul li {
  3.  height: 20px;
  5.  line-height: 20px;
  7.  display: inline-block;
  9.  cursor: pointer;
  11.  margin-left: 10px;
  13.  margin-bottom: 10px;
  15. }

看下最终效果：

富文本编辑器开发系列11——原生API编写简单富文本编辑器003 - 图3

字号

字号与字体是相同的作用机制，我们补充下代码：

  2. const command = btn.getAttribute('command');
  4.  if (command === 'fontName') {
  6.  showFontName(btn);
  8.  }
  10.  if (command === 'fontSize') {
  12.  showFontSize(btn);
  14.  }
  17. // ...
  19. function getFontSizeTpl() {
  21.  const fontSizes = [
  23.  '12',
  25.  '14',
  27.  '16',
  29.  '18',
  31.  '20',
  33.  '24',
  35.  '28',
  37.  '36',
  39.  '48',
  41.  '72',
  43.  ];
  45.  let tpl = '';
  47.  tpl += '<select id="fontSizeSelect" onchange="selectFontSize()">';
  49.  for (let i = 0; i < fontSizes.length; i++) {
  51.  tpl += `<option value="${fontSizes[i]}" style="font-size: '${fontSizes[i]}'">${fontSizes[i]}</option>`;
  53.  }
  55.  tpl+ '</select>';
  57.  return tpl;
  59. }
  63. function showFontSize(btn) {
  65.  let tpl = getFontSizeTpl();
  67.  const $li = btn.parentElement;
  69.  $li.innerHTML = tpl;
  71. }
  75. function selectFontSize() {
  77.  const target = document.getElementById('fontSizeSelect');
  79.  const rs = document.execCommand('fontSize', true, parseInt(target.value) + 'px');
  81. }

富文本编辑器开发系列11——原生API编写简单富文本编辑器003 - 图4

我们会发现，在下拉框中，我们未字体提供了若干以像素为单位的值，并且当用户选择时，我们会将这个像素值作为execCommand命令的参数，但是实际操作时，无论我们选择多少的字号，最后的字号始终是一样大的。

通过查看控制台元素面板，我们发现无论我们传入什么值，最终浏览器给文字加的控制字号的属性size 都是 7。

再仔细翻看文档，我们看到对fontSize 命令的说明：

fontSize : 在插入点或者选中文字部分修改字体大小. 需要提供一个HTML字体尺寸 (1-7) 作为参数

所以当我们传入超出范围的不合法参数时，它会始终将字体设置为最大尺寸7。

修改一下：

  1. const fontSizes = [
  3.  '1',
  5.  '2',
  7.  '3',
  9.  '4',
  11.  '5',
  13.  '6',
  15.  '7',
  17.  ];

富文本编辑器开发系列11——原生API编写简单富文本编辑器003 - 图5

这回就正常了，可是用户并不知道1-7代表的具体大小对应的是常见的文档软件（例如word）中的大小（通常以像素表示）,我们需要继续改造：

  1. function getFontSizeTpl() {
  3.  const fontSizes = [
  5.  {
  7.  key: 1,
  9.  value: '12',
  11.  },
  13.  {
  15.  key: 2,
  17.  value: '13',
  19.  },
  21.  {
  23.  key: 3,
  25.  value: '16',
  27.  },
  29.  {
  31.  key: 4,
  33.  value: '18',
  35.  },
  37.  {
  39.  key: 5,
  41.  value: '24',
  43.  },
  45.  {
  47.  key: 6,
  49.  value: '32',
  51.  },
  53.  {
  55.  key: 7,
  57.  value: '48',
  59.  },
  61.  ];
  63.  let tpl = '';
  65.  tpl += '<select id="fontSizeSelect" onchange="selectFontSize()">';
  67.  for (let i = 0; i < fontSizes.length; i++) {
  69.  tpl += `<option value="${fontSizes[i].key}" style="font-size: '${fontSizes[i].value}px'">${fontSizes[i].value}</option>`;
  71.  }
  73.  tpl+ '</select>';
  75.  return tpl;
  77. }

富文本编辑器开发系列11——原生API编写简单富文本编辑器003 - 图6

总算是正常了。

前景色

众所周知，要想随心所欲地设置富文本的颜色，必须提供一个颜色选择器，我们这里暂不考虑浏览器兼容性，直接使用HTML5中 type 为 color 的input 组件。

  1. function showColorPicker(btn, type) {
  3.  let tpl = getColorPickerTpl();
  5.  const $dialog = document.getElementById('editorDialog');
  7.  $dialog.innerHTML = tpl;
  9.  $dialog.style.top = (btn.offsetTop + btn.offsetHeight + 15) + 'px';
  11.  $dialog.style.left = btn.offsetLeft + 'px';
  13.  $dialog.style.display = 'block';
  15.  const colorPicker = document.getElementById('colorPicker');
  17.  colorPicker.addEventListener("input", setColor.bind(this, type), false);
  19.  colorPicker.addEventListener("change", setColor.bind(this, type), false);
  21. document.addEventListener("click", function(e) {
  23.  e.stopPropagation();
  25.  const $i = btn.firstChild;
  27.  if (e.target !== $i && e.target !==colorPicker) {
  29.  $dialog.style.display = 'none';
  31.  }
  33.  });
  35. }
  39. function getColorPickerTpl(type) {
  41.  const tpl = `
  43.  <input type="color" id="colorPicker" />
  45.  `;
  47.  return tpl;
  49. }
  53. function setColor(type, event) {
  55.  const $dialog = document.getElementById('editorDialog');
  57.  document.execCommand(type, 'false', event.target.value);
  59.  $dialog.style.display = 'none';
  63. }

富文本编辑器开发系列11——原生API编写简单富文本编辑器003 - 图7

背景色

背景色的逻辑与前景色一样，所以其逻辑可以复用，只需要传入不同参数即可：

  1.  btn.onclick = function(e) {
  3.  document.execCommand(command, 'true', '');
  5.  if (command === 'fontColor') {
  7.  showColorPicker(btn, 'foreColor');
  9.  }
  11.  if (command === 'backColor') {
  13.  showColorPicker(btn, 'backColor');
  15.  }
  17.  };

富文本编辑器开发系列11——原生API编写简单富文本编辑器003 - 图8

但是，这里有一个问题，我们为文档对象和调色板绑定了事件监听，但却没有在任何地方进行解绑。

为了完善解绑功能，我们需要定义两个全局变量来分别存储设置富文本内容字体的监听函数和解绑监听隐藏调色板的函数。因为两个监听函数使用了bind 方法已便传参，但bind的问题是，它会产生一个新的函数，所以我们需要将这个新产生的函数缓存下来，以便在移除监听时传入与绑定时相同的函数。

  1. var hideColorPickerFun;
  3. var setColorFun;
  5. function showColorPicker(btn, type) {
  7.     //...
  8.     hideColorPickerFun = hideColorPicker.bind(document, colorPicker, $dialog, btn, type);
  10.      setColorFun = setColor.bind(this, type, $dialog, colorPicker, btn);
  12.      colorPicker.addEventListener("input", setColorFun, false);
  14.      colorPicker.addEventListener("change", setColorFun, false);
  16.      document.addEventListener("click", hideColorPickerFun, false);
  17. }
  19. function hideColorPicker(colorPicker, $dialog, btn, type, e) {
  21.  e.stopPropagation();
  23.  const $i = btn.firstChild;
  25.  if (e.target !== $i && e.target !==colorPicker) {
  27.  $dialog.style.display = 'none';
  29.  document.removeEventListener('click', hideColorPickerFun, false);
  31.  colorPicker.removeEventListener('input', setColorFun, false);
  33.  colorPicker.removeEventListener('change', setColorFun, false);
  35.  $dialog.innerHTML = '';
  37.  }
  39. }
  43. function setColor(type, $dialog, colorPicker, btn, event) {
  45.  document.execCommand(type, 'false', event.target.value);
  47.  $dialog.style.display = 'none';
  49.  document.removeEventListener('click', hideColorPickerFun, false);
  51.  colorPicker.removeEventListener('input', setColorFun, false);
  53.  colorPicker.removeEventListener('change', setColorFun, false);
  55.  $dialog.innerHTML = '';
  57. }

另外，在给功能按钮绑定事件时，我们将条件判断改为分支判断，方便扩展：

  1.  btn.onclick = function(e) {
  3.  switch (command) {
  5.  case 'fontColor':
  7.  showColorPicker(btn, 'foreColor');
  9.  break;
  11.  case 'backColor':
  13.  showColorPicker(btn, 'backColor');
  15.  break;
  17.  default:
  19.  document.execCommand(command, 'true', '');
  21.  }
  23.  };

插入链接

插入链接的流程是当点击插入链接按钮的时候，弹出一个填写链接的输入框和一个确定按钮，点击确定按钮，为选中的文字增加链接。

直接上代码：

  1. switch (command) {
  3.  case 'fontColor':
  5.  showColorPicker(btn, 'foreColor');
  7.  break;
  9.  case 'backColor':
  11.  showColorPicker(btn, 'backColor');
  13.  break;
  15.  case 'createLink':
  17.  showLinkDialog(btn);
  19.  break;
  21.  default:
  23.  document.execCommand(command, 'true', '');
  25.  }
  29. function showLinkDialog(btn) {
  31.  const tpl = getLinkDialogTpl();
  33.  const $dialog = document.getElementById('editorDialog');
  35.  $dialog.innerHTML = tpl;
  37.  $dialog.style.top = (btn.offsetTop + btn.offsetHeight + 15) + 'px';
  39.  $dialog.style.left = btn.offsetLeft + 'px';
  41.  $dialog.style.display = 'block';
  43.  const linkDialog = document.getElementById('linkDialog');
  45.  linkDialog.focus();
  47.  const createLinkBtn = document.getElementById('createLinkBtn');
  49.  createLinkBtn.addEventListener('click', createLink, false);
  51. }
  55. function getLinkDialogTpl() {
  57.  const tpl = `
  59.  <input type="text" id="linkDialog" />
  61.  <button id="createLinkBtn">确定</button>
  63.  `;
  65.  return tpl;
  67. }
  71. function createLink() {
  73.  const linkDialog = document.getElementById('linkDialog');
  75.  document.execCommand('createLink', 'false', linkDialog.value);
  76. const createLinkBtn = document.getElementById('createLinkBtn');
  78.  createLinkBtn.removeEventListener('click', createLink, false);
  80.  const $dialog = document.getElementById('editorDialog');
  82.  $dialog.innerHTML = '';
  84.  $dialog.style.display = 'none';
  86. }

富文本编辑器开发系列11——原生API编写简单富文本编辑器003 - 图9

但是这里还有一个问题，当我们的焦点转移到链接输入框时，编辑器中的选区就被取消了，需要我们重新选择文本后再点击确定按钮，才能添加成功。

这个问题的原因和解决方法我们先暂时搁置，后面再细讲。

取消链接

之前插入链接不起作用是因为我们的编辑器没有插入链接功能，无法插入链接，就无法验证取消链接功能，现在我们给编辑器加上了插入链接功能，插入链接后，选中链接，直接点击取消链接按钮，链接就能被取消了。

插入图片

插入图片的原理与插入链接一样。

直接上代码：

  1. switch (command) {
  3.  case 'fontColor':
  5.  showColorPicker(btn, 'foreColor');
  7.  break;
  9.  case 'backColor':
  11.  showColorPicker(btn, 'backColor');
  13.  break;
  15.  case 'createLink':
  17.  showLinkDialog(btn);
  19.  break;
  21.  case 'insertImage':
  23.  showImageDialog(btn);
  25.  break;
  27.  default:
  29.  document.execCommand(command, 'true', '');
  31.  }
  34. function showImageDialog(btn) {
  36.  const tpl = getImageDialogTpl();
  38.  const $dialog = document.getElementById('editorDialog');
  40.  $dialog.innerHTML = tpl;
  42.  $dialog.style.top = (btn.offsetTop + btn.offsetHeight + 15) + 'px';
  44.  $dialog.style.left = btn.offsetLeft + 'px';
  46.  $dialog.style.display = 'block';
  48.  const imageDialog = document.getElementById('imageDialog');
  50.  imageDialog.focus();
  52.  const createIamgeBtn = document.getElementById('createIamgeBtn');
  54.  createIamgeBtn.addEventListener('click', createImage, false);
  56. }
  60. function getImageDialogTpl() {
  62.  const tpl = `
  64.  <input type="text" id="imageDialog" />
  66.  <button id="createIamgeBtn">确定</button>
  68.  `;
  70.  return tpl;
  72. }
  76. function createImage() {
  78.  const imageDialog = document.getElementById('imageDialog');
  80.  document.execCommand('insertImage', 'false', imageDialog.value);
  82.  const createLinkBtn = document.getElementById('createIamgeBtn');
  84.  createIamgeBtn.removeEventListener('click', createImage, false);
  86.  const $dialog = document.getElementById('editorDialog');
  88.  $dialog.innerHTML = '';
  90.  $dialog.style.display = 'none';
  92. }

富文本编辑器开发系列11——原生API编写简单富文本编辑器003 - 图10
富文本编辑器开发系列11——原生API编写简单富文本编辑器003 - 图11

至此，我们已经实现了所有浏览器API提供的编辑功能。

当然，现在看代码，有很多冗余，不够优雅，而且功能上也还有很多问题，比如：

  1. 设置的字体是使用 font属性，而非CSS
  2. 设置的字号只接受1-7, 并且是以 size 属性而非 CSS控制，超出大小无法设置。
  3. color使用HTML的input时，始终有一个input框在那里，并且如果手动触发click显示调色板，则调色板的位置无法自动跟随
  4. link 只能创建或取消，无法修改，无法指定是以何种方式打开
  5. link和image填写框聚焦时编辑器选区会被取消

当然，这只是肉眼可见的一些问题，还有更多问题，我们下一讲统一再将。

本节所有代码可在分支 1.0.4 上找到。