【前端】编辑器相关思考

阅读数: 2023-12-15

前言

记录部分关于富文本编辑器相关功能的实现思考

实现富文本编辑的方法

文档属性 document.designMode = 'on'

将整个文档设置为可编辑，几乎所有浏览器均支持
元素属性 contenteditable = 'true'

支持所有HTML标签元素，IE8+支持
CSS属性 -webkit-user-modify: read-write

支持所有HTML标签元素，仅Chrome支持

编辑器@联系人

这里完全可以看做是普通的搜索，只是差别是需要获取选区位置和判断激活搜索的时机

兼容方面请参考：https://juejin.cn/post/7143397823432622093

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>At Contact</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
  <style>
    .highlight { background-color: #ffff99; display: inline; }
    .selected { background-color: #ebebeb }
  </style>
</head>
<body>
  <!-- 内容编辑区域 -->
  <div contenteditable="true" id="inputField" style="min-height: 300px; height: 100vh; padding: 10px; border: 1px solid #ccc;"></div>

  <script>
    /* contenteditable编辑区内输入 @ 时联想联系人，点击联想结果插入联系人到编辑区内 */
    $(document).ready(function() {
      const $input = $('#inputField');
      const highlightCls = 'highlight'; // tag类名, 用于定制样式
      const selectedCls = 'selected'; // 菜单选中类名，用于定制样式
      const atChar = '@'; // 触发联想词

      /** 忽略竞态请求（更加通用）
       * @param {() => promise} fn
       * @return {*}
      */
      function getResolveLastByIgnore(fn) {
        let globalId = 0;
        return function () {
          return new Promise((resolve, reject) => {
            const id = ++globalId;
            fn.apply(this, arguments)
              .then(res => {
                // 只处理最新请求的返回
                id === globalId && resolve(res);
              }).catch(err => {
                // 只处理最后一次请求的异常
                id === globalId && reject(err);
              })
          })
        }
      }

      // 防抖
      function debounce(fn, delay, options = {}) {
          let timer = null
          return function() {
              // 指定在延迟开始前调用
              if (options.leading) {
                  timer ? clearTimeout(timer) : fn.apply(this, arguments)
                  timer = setTimeout(_ => {
                      timer = null
                  }, delay)
              } else {
                  timer && clearTimeout(timer)
                  timer = setTimeout(_ => {
                      fn.apply(this, arguments)
                      timer = null
                  }, delay)
              }
          }
      }

      let globalData = {}
      let menu = null, isProd = false, timer = null, isComposition = false;
      resetGlobalData();

      $input[0].focus();
      $input.on('compositionstart', _ => { isComposition = true; })
      $input.on('compositionend', e => { isComposition = false; })
      $input.on('input', debounce(handleInputEvent, 200))

      function resetGlobalData() {
        globalData = { 
          active: false, // 是否激活搜索
          keyword: '',  // 搜索词
          maxKeyword: '', // 最大搜索词（防止不可能存在结果的情况也向服务器请求）
          textNode: null, // 当前 atChar 所在的textNode，用于比较光标是否移动到其他textNode
          atCharOffset: null, // atChar 在textNode中的位置
          range: null, // 记录选中选项之前的range用于更新textNode
          cache: {}, // 搜索的缓存数据
          reqStack: [], // 搜索记录，防止前面的搜索结果因为网络原因最后返回而显示前面搜索的结果（而不是后面的）
        };
        showMenu(false);
      }

      function showMenu(bol = true, options = {}) {
        $input.off('keydown', handleDirectionKey);
        menu && menu.remove()
        menu = null;

        if (bol) {
          menu = {}
          menu.options = options;
          menu.div = $('<div>').addClass('ke-menu-contact').css({
              'font-size': 12,
              'line-height': 1.5,
              'max-height': 300,
              overflow: 'auto',
              background: '#fff',
              border: '1px solid #646464',
              cursor: 'default',
              position: 'absolute',
              left: options.x,
              top: options.y,
          })
          menu.data = options.data || [];
          menu.remove = function() { this.div.remove() }
          $.each(menu.data, (i, item) => {
              const node = $('<div style="padding: 2px">')
                .append($('<span style="margin-right: 4px;">').text(item.true_name))
                .append($('<span style="margin-right: 4px;">').text('<' + item.email + '>').css('color', '#969696'))
                .append($('<span style="margin-right: 4px;">').text(item.location))
                .on('mouseover mouseout click', function(e) {
                    const $target = $(this);
                    const sIndex = $target.index();
                    e.type === 'mouseover' && !menu.div.data('sIndex') && $target.toggleClass(selectedCls);
                    e.type === 'mouseout' && !menu.div.data('sIndex') && $target.toggleClass(selectedCls);
                    e.type === 'click' && item.click && item.click(e, menu.data[sIndex]);
                });
              menu.div.append(node);
          });
          $(document.body).append(menu.div);
          $input.on('keydown', handleDirectionKey);
        }
      }

      function handleDirectionKey(e) {
          if (!menu) return;

          e.keyCode = e.keyCode || e.which;
          const $options = menu.div.children();
          let sIndex = parseInt(menu.div.data('sIndex') ?? -1);
          switch (e.keyCode) {
            case 38: /* Up Arrow */
                e.preventDefault();
                e.stopPropagation();
                sIndex = (sIndex - 1 + $options.length) % $options.length;
                menu.div.data('sIndex', sIndex);
                $options.removeClass(selectedCls).eq(sIndex).addClass(selectedCls)[0].scrollIntoViewIfNeeded();;
                break;
            case 40: /* Down Arrow */
                e.preventDefault();
                e.stopPropagation();
                sIndex = (sIndex + 1 + $options.length) % $options.length;
                menu.div.data('sIndex', sIndex);
                $options.removeClass(selectedCls).eq(sIndex).addClass(selectedCls)[0].scrollIntoViewIfNeeded();
                break;
            case 13: /* Enter */
                menu.data[sIndex] && handleItemClick(e, menu.data[sIndex]);
                break;
            }
      }

      const requestKeyword = getResolveLastByIgnore(keyword => {
        return new Promise((resolve, reject) => {
          const res = globalData.cache[keyword];
          if (res) return resolve(res); // 优先读取缓存

          if (isProd) { // 模拟向服务器请求数据
              JsBridege.call('autoMatch', {keyword: keyword});
              window.app.insertAtContacts = function(res = {}) {
                  const result = res.value || [];
                  if (!result.length) globalData.maxKeyword = keyword;
                  globalData.cache[keyword] = result;
                  resolve(res);
              }
          } else {
            setTimeout(_ => { // 模拟向服务器请求结果
              const result = [
                {true_name: 'zhangsan', email: '111@xxx.com', location: '美国/旧金山'}, {true_name: 'zhangsi', email: '222@xxx.com', location: '英国/伦敦'}, 
                {true_name: '张三', email: '333@xxx.com', location: '中国/北京'}, {true_name: '张四', email: '444@xxx.com', location: '新加坡/悉尼'}, 
                {true_name: '<zhang。三>， 四 ', email: '444@xxx.com', location: '？？？'}
              ].filter(item => {
                return item.true_name.toLowerCase().includes(keyword.toLowerCase()) ||
                  item.email.toLowerCase().includes(keyword.toLowerCase()) || 
                  item.location.toLowerCase().includes(keyword.toLowerCase())
              });
              !result.length && (globalData.maxKeyword = keyword);
              const cache = {keyword, value: result};
              globalData.cache[keyword] = cache;
              resolve(cache);
            }, keyword.length % 2 ? 1000 : 0); // 模拟错开请求时间
          }
        });
      })

      function handleInputEvent(e) {
        if (isComposition) return;

        const selection = window.getSelection();
        const range = selection.getRangeAt(0);
        const anchorNode = range.startContainer; // 光标所在节点
        const anchorOffset = range.startOffset; // 光标所在节点的位置
        globalData.range = range;

        // 这里检测输入@有以下方式：
        // 1. 通过 keyup 监听 => String.fromCharCode(e.keyCode || e.which) + e.shiftKey。缺点：在手机设备上不适用（手机不会带shiftKey，另外安卓手机会keyCode=229）
        // 2. 通过 keyup 监听 => e.key === '@' || e.keyCode = 50。 缺点：需要关心部分情况不能触发keyup去搜索，如menu显示时按上下方向选择
        // 3. 通过 input 监听 => range.startContainer.textContent[range.startOffset-1] 缺点：input 事件不兼容ie
        // 这里最终选取了方式3
        const inputChar = anchorNode.textContent[anchorOffset - 1];
        // 输入 atChar 激活搜索
        if (inputChar === atChar) {
          globalData.active = true;
          globalData.textNode = anchorNode;
          globalData.atCharOffset = anchorOffset;
          return;
        }
        // 未激活搜索退出
        if (!globalData.active) return;
        // 如果切换了光标位置，重置搜索
        if (globalData.textNode && globalData.textNode!== anchorNode) { return resetGlobalData() }
        // 如果光标位置移动到了激活前的位置，重置搜索
        if (typeof(globalData.atCharOffset) === 'number' && globalData.atCharOffset > anchorOffset) { return resetGlobalData() }

        // 获取 keyword
        let keyword = globalData.textNode.textContent.slice(globalData.atCharOffset, anchorOffset);
        console.log('get keyword', keyword);

        // keyword不存在
        if (!keyword) return showMenu(false);
        // keyword 超出了范围 （比如 123搜索不到结果，1234更搜索不到了，因此没有必要继续向服务器请求）
        if (globalData.maxKeyword && keyword.includes(globalData.maxKeyword)) return showMenu(false);
        console.log('start keyword', keyword);

        requestKeyword(keyword).then(res => {
          console.log('res', res)
          const data = res.value || [];
          data.forEach(item => { item.click = handleItemClick });
          // 显示并计算menu位置
          const inputRect = range.getBoundingClientRect();
          const x = inputRect.left + 'px';
          const y = inputRect.top + inputRect.height + 'px';
          showMenu(true, {x, y, data})
        })
      }

      function handleItemClick(e, item = {}) {
        // 删除用户输入的部分
        const newRange = globalData.range.cloneRange();
        newRange.setStart(globalData.textNode, globalData.atCharOffset - 1);
        newRange.setEnd(globalData.textNode, globalData.range.startOffset);
        newRange.deleteContents()

        // 在光标位置插入联系人
        const textContent = atChar + (item.true_name || item.email.split('@')[0]);
        const $at = $('<contact>').addClass(highlightCls).attr({
          contenteditable: false, address: item.email, title: `"${item.true_name}" <${item.email}>`
        }).css({
          display: 'inline',
          'background-color': '#057AB8', color: '#fff', padding: '2px' // Default style
        }).text(textContent);
        const whiteSpaceNode = document.createTextNode('\u00A0'); // &nbsp;
        globalData.range.insertNode($at[0]);
        globalData.range.setStartAfter($at[0]);
        globalData.range.setEndAfter($at[0]);
        globalData.range.insertNode(whiteSpaceNode);
        globalData.range.setStartAfter(whiteSpaceNode);
        globalData.range.setEndAfter(whiteSpaceNode);

        // 关闭menu
        resetGlobalData();
        if (e) {
            e.preventDefault()
            e.stopPropagation()
        }
      }

    })
  </script>
</body>
</html>

悬浮工具栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>根据选区位置显示浮动工具栏</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
  <style>
    * {box-sizing: border-box;}
    .toolbar {
      position: absolute;
      left: -9999px;
      top: -9999px;
      z-index: 99;
      width: 490px;
      height: 42px;
      background: #fff;
      box-shadow: 0px 4px 8px rgba( 31,35,41 ,0.1);
      border-radius: 6px;
      border: 1px solid #dee0e3;
      display: flex;
      justify-content: space-between;
      align-items: center;
      overflow: hidden;
      user-select: none;
    }
    .toolbar .ke-outline {
      cursor: pointer;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
    }
    .toolbar .ke-outline:hover { background-color: #e6e7e7; }
    .toolbar .ke-separator {
      width: 1px;
      height: 100%;
      background-color: #dee0e3;
    }
    .ke-menu .selected { background-color: #ebebeb }
  </style>
</head>
<body>
  <h1 style="display: none;">根据选区位置显示浮动工具栏</h1>
  <div id="inputArea" contenteditable="true" style="border: 1px solid #ccc; padding: 15px;">
    <h2>标题1</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque esse possimus deserunt tenetur veritatis voluptatibus commodi repudiandae, vitae autem accusantium soluta voluptates obcaecati explicabo omnis quidem sit! Itaque, sit. Tempora.</p>
    <h3>标题2</h3>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sint ex facilis temporibus aliquam explicabo ullam officia iure dolore excepturi unde dolorem magnam et alias nostrum recusandae adipisci, deleniti inventore doloremque?</p>
    <h4>标题3</h4>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus officia facilis suscipit sed aperiam similique nemo? Iure, optio adipisci consequuntur a commodi obcaecati, porro nemo, quidem harum praesentium repudiandae voluptatem.</p>
  </div>
  <script>
    let toolbar = null, menu = null, mouseupTimer = null, diffY = 0/* 用于计算显示在上方还是下方的悬浮框 */;
    $(document.body).on('click', removeToolbar);
    $('#inputArea').on('mousedown mouseup keydown', e => {
        mouseupTimer && clearTimeout(mouseupTimer); // 防止双击
        if (e.type === 'mousedown' || e.type === 'keydown') { diffY = e.clientY; removeToolbar(); }
        if (e.type === 'mouseup' && e.which === /* left */1) {
            diffY = e.clientY - diffY;
            mouseupTimer = setTimeout(_ => { window.getSelection().toString() && createToolbar(e); }, 300);
        }
    });

    function stopPropagation(e) { e.stopPropagation(); e.preventDefault(); }

    function showMenu(bol = true, options = {}) {
        menu && menu.remove()
        menu = null;

        if (bol) {
          const offset = $(options.node).offset();
          menu = {}
          menu.options = options;
          menu.div = $('<div>').addClass('ke-menu').css({
              'font-size': 12,
              'line-height': 1.5,
              'max-height': 300,
              overflow: 'auto',
              background: '#fff',
              border: '1px solid #646464',
              cursor: 'default',
              position: 'absolute',
              left: offset.left,
              top: offset.top + $(options.node).outerHeight(),
          })
          menu.data = options.data || [];
          menu.remove = function() { this.div.remove() }
          $.each(menu.data, (i, item) => {
              const node = $('<div style="padding: 2px">')
                .append($('<span style="margin-right: 4px;">').text(item.title))
                .on('mouseover mouseout click', function(e) {
                    const $target = $(this), sIndex = $target.index();
                    e.type === 'mouseover' && $target.toggleClass('selected');
                    e.type === 'mouseout' && $target.toggleClass('selected');
                    e.type === 'click' && item.click && item.click(e, menu.data[sIndex]);
                });
              menu.div.append(node);
          });
          // TODO: 待补充menu自适应显示
          $(document.body).append(menu.div);
        }
      }

    function createToolbar(e) {
      removeToolbar();
      const html = `<div class="ke-outline" data-name="formatblock" title="段落" unselectable="on">
                      <svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" data-icon="H3Outlined"><path d="M2 3a1 1 0 0 0-1 1v16a1 1 0 1 0 2 0v-7h9v7a1 1 0 1 0 2 0V4a1 1 0 1 0-2 0v7H3V4a1 1 0 0 0-1-1Zm21 14.296c0-.51-.108-.998-.324-1.461a2.923 2.923 0 0 0-.877-1.044c.377-.297.65-.63.816-1.001.17-.44.252-.886.252-1.348a3.48 3.48 0 0 0-.943-2.385C21.274 9.363 20.398 9.01 19.31 9a3.179 3.179 0 0 0-2.251.932c-.349.336-.848.879-.848 1.384a1 1 0 0 0 1 1c.482 0 .767-.352 1.043-.692l.09-.11c.057-.07.121-.132.192-.185.256-.2.53-.296.834-.296.431.01.779.144 1.049.405.267.267.406.61.415 1.04 0 .417-.133.75-.4 1.008-.335.335-.766.387-1.212.387a.958.958 0 1 0 0 1.917h.088c.452-.002.824-.003 1.205.353.29.277.442.674.452 1.201-.01.51-.16.894-.451 1.162-.296.296-.65.44-1.076.44-.4 0-.712-.107-.944-.316l-.008-.008a8.055 8.055 0 0 1-.213-.207c-.1-.099-.178-.207-.254-.31-.193-.264-.366-.5-.81-.5a1 1 0 0 0-1 1c0 .574.543 1.19.954 1.533.635.53 1.35.84 2.174.84 1.057-.01 1.93-.35 2.609-1.018.69-.651 1.04-1.545 1.052-2.664Z" fill="currentColor"></path></svg>
                    </div>
                    <div class="ke-inline-block ke-separator"></div>
                    <div class="ke-outline" data-name="bold" title="粗体" unselectable="on">
                      <svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" data-icon="BoldOutlined"><path d="M5 2.709C5 2.317 5.317 2 5.709 2h6.734a5.317 5.317 0 0 1 3.686 9.148 5.671 5.671 0 0 1-2.623 10.7H5.71a.709.709 0 0 1-.71-.707V2.71Zm2 7.798h5.443a3.19 3.19 0 0 0 3.19-3.19c0-1.762-1.428-3.317-3.19-3.317H7v6.507Zm0 2.126v7.09h6.507a3.544 3.544 0 0 0 0-7.09H7Z" fill="currentColor"></path></svg>
                    </div>`;
      toolbar = { div: $(`<div class="toolbar">${ html }</div>`) };
      $('[data-name]', toolbar.div).on('click', function(e) {
        stopPropagation(e);
        const name = $(this).attr('data-name');
        switch(name) {
          case 'formatblock':
            showMenu(true, {node: this, data: [
              {title: '标题1', click: e => {stopPropagation(e);document.execCommand('formatBlock', false, 'h1');showMenu(false);}},
              {title: '标题2', click: e => {stopPropagation(e);document.execCommand('formatBlock', false, 'h2');showMenu(false);}},
              {title: '标题3', click: e => {stopPropagation(e);document.execCommand('formatBlock', false, 'h3');showMenu(false);}},
            ]});
            break;
          case 'bold':
            document.execCommand('bold', false);
            break;
        }
      })
      $(document.body).append(toolbar.div);
      

      // update position
      toolbar.div.css({visibility: 'hidden'});
      const factor = 10; // 预留空隙
      const threshold = 20; // 阈值控制显示在上方还是下方
      const pointRect = {left: e.clientX, top: e.clientY}; // 鼠标位置
      const barWidth = Math.min(toolbar.div.width(), window.innerWidth);
      const barHeight = Math.min(toolbar.div.height(), window.innerHeight);
      // 防止宽高超出视口
      toolbar.div.css({width: barWidth, height: barHeight});
      // 左右超出视口自动贴边
      let left = Math.min(Math.max(pointRect.left - barWidth / 2, 0), window.innerWidth - barWidth / 2);
      // 上下超出视口反向放置（不支持range.getBoundingClientRect的情况以鼠标位置辅助）
      let top = null, _top = {};
      try {
          const rangeRect = window.getSelection().getRangeAt(0).getBoundingClientRect();
          _top = { top: rangeRect.top - barHeight - factor, bottom: rangeRect.top + rangeRect.height + factor };
      } catch(e) {
          // 不支持range.getBoundingClientRect的情况以鼠标位置为准
          _top = { top: pointRect.top - barHeight - factor * 2, bottom: pointRect.top + factor * 2 };
      }
      // 大于阈值认为选中多行，反之选中单行
      if (Math.abs(diffY) > threshold) {
        const direction = diffY < 0 ? 'top' : 'bottom';
        top = _top[direction];
        if (direction === 'top' && top < 0) top = 0;
        if (direction === 'bottom' && top > window.innerHeight - barHeight) top = window.innerHeight - barHeight;
      } else {
        top = _top.top < 0 ? _top.bottom : _top.top;
      }
      // absolute定位需要转换top，left
      const parentRect = toolbar.div.offsetParent()[0].getBoundingClientRect();
      top -= parentRect.top; left -= parentRect.left;
      toolbar.div.css({top, left, visibility: ''});
    }

    function removeToolbar() {
      toolbar && toolbar.div.remove();
      toolbar = null;
    }
  </script>
</body>
</html>

表格的resizable和selectable

编辑器的搜索替换

参考

JavaScript 获取输入时的光标位置及场景问题

本文作者： ionluo
本文链接： http://www.ionluo.cn/blog/posts/668f6684.html
版权声明： 本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。转载请注明出处！