05月13, 2021

记一个网页端文本编辑器的演进过程

背景

前端项目开发中,为用户输入内容提供一个编辑框是非常常见的基础交互需求。 比如博客文章下面的评论区、可视化富文本编辑、在线代码编辑器...

根据不同的业务场景,我们应该做怎么样的调研?怎么决定选型?相关技术点又有哪些?

基础效果

比如某个历史项目里,有下图这么一个编辑器。

alt

通过示意可以看到,大致功能:

  1. 可以输入文本。
  2. 编辑器外点击表情图,插入类似“[微笑]”的方括号定界描述符。
  3. 编辑器外点击人名,可以插入“@xxx ”。

历史问题

通过读源码,发现这个项目编辑器的选型是基于开源的Slate、以及依赖的一些模块 slate-reactslate-plug-xxx等实现的。

继续读代码发现,原来除了需要 insertText 到目标光标位置,并且输入“@xx”后,还需要按照光标在文档流中坐标位置,展示备选菜单。

alt

基于Slate的API和插件,确实可以很方便的实现插入内容到光标位置、光标坐标获取,但也很明显带来了新的问题:

  1. 三方依赖包体量过大。
  2. 对中文输入法兼容不友好:会意外多出现类似“zhong'wen'xxx”的内容。
  3. 编辑器自带个别能力与上下文环境冲突,会导致JS崩溃、React渲染空白等。
  4. ...

参考前文功能需求描述,这选型无疑是高射炮打蚊子了。 而且带来的问题确实不能容忍。

精简提效

相对Slate来说更换成原生HTML元素 <textarea>,是更轻量级、更稳妥可靠的一个方案。这里就不具体赘述了,一个简化的实现效果可到 https://lab.pyzy.net/txt_editor.html 查看。

隐含功能

除了直观上看到的纯文本编辑,额外还有看不到的能力:

  1. 被@人员列表数据。
  2. 草稿存储。
  3. 消息撤回重新编辑。

除了(1),只能用额外数据列表记录,2和3基于纯文本都比较好实现,2直接存储String到localStorage,3直接insertText(String)全文就可以了。

新需求-“图文混发”

"需求文档":

alt

最终实现效果

alt

相对前面的纯文本编辑,区别也很明显,这里@、表情是所见即所得了,同时另外支持了插入图片(图文混排)。

“图文混发”关键技术环节

  1. 技术选型
  2. insertText 改造。
  3. 富文本与正文数据互转。
  4. 光标位置。
  5. 草稿存储改造(含插入图片存储)。
  6. 兼容性。

技术选型

基于前文考虑,如果我们使用现成的开源编辑器,自然开发成本最低,但稳定性和维护成本无法估量。

这里,最终选择了基于原生的 <div contenteditable="true" /> 为业务量身打造一个编辑器。

insert 方法改造

在基于<textarea>实现编辑时,insertText的实现我们基于 textareaHTMLElement.valuetextareaHTMLElement.selectionStarttextareaHTMLElement.selectionEnd便可以得到输入的完整文本内容、选中区间,然后进行替换、重写,基于textareaHTMLElement.setSelectionRange(sta, end)重新设置选中内容区间。(详见示例源码 )

基于<div contenteditable="true" />时,insertText的实现,需要转换为 insertNodes,对应到基础层各Nodes类型的insert方法代码片段如下:

// 注意:下面代码仅是示意,包含缺少定义的环境变量

// 创建一个文本节点
function createTextNode(text) {
  // 这里的replace用于替换普通空格为&nbsp;
  const txt = String(text).replace(/ /g, '\u00A0');
  return document.createTextNode(txt);
}
function createBrEl() {
  return document.createElement('br');
}
// 创建一个 At El
function createAtEl(uid, name) {
  const atEl = document.createElement('span');
  atEl.className = atCls;
  atEl.innerText = '@' + name + _atSuffix;
  setAttributes(atEl, {
    'data-uid': uid,
    'data-name': name,
    contenteditable: false, // 不可编辑修改Span内容
  });
  return atEl;
}

// 创建一个表情图 El
function createEmojiEl(tips, src) {
  const emojiEl = document.createElement('img');
  emojiEl.className = emojiCls;
  setAttributes(emojiEl, {
    src,
    alt: `[${tips}]`,
    'data-tips': tips,
  });
  return emojiEl;
}
// 创建一个插图 El
function createImgEl(file, width, height) {
  let src = '';
  let title = '';
  let draftFid = '';
  if (file) {
    draftFid = getDraftFidByFile(file);
    title = file.name;
    try {
      src = URL.createObjectURL(file);
    } catch (err) {}
  }
  const imgEl = document.createElement('img');
  imgEl.className = picCls;
  setAttributes(imgEl, {
    src,
    title,
    alt: '[图片]',
    'data-width': width,
    'data-height': height,
    'data-draft-fid': draftFid,
  });
  /*
  这里的图片产品需求中要支持双击打开图片查看器预览,
  但用户是否预览、是否多图、什么时机预览不确定的,
  所以不可以 revokeObjectURL 掉。
  if (src) {
    imgEl.onload = () => {
      try {
        URL.revokeObjectURL(src);
      } catch (err) {}
    };
  }*/
  return imgEl;
}

富文本与正文数据互转

首先,看信息字串转为富文本节点数组。

归根核心,也就是怎么将类似"测试文本 [微笑] @xxx 等等等"的消息字串,转为能使用insertNodes插入富文本编辑器的节点数组。

具体实现,依赖一个名为 rich2nodeRegExp 的正则变量,将文本中内容按定界符提取并替换为对应HTMLNode。

// 注意:下面代码仅是示意,包含缺少定义的环境变量
function richText2Nodes(richText) {
    const rtelNodes = [];
    const rtelTexts = String(richText)
      .replace(rich2nodeRegExp, (str, br, atName, emojiTips) => {
        if (br) {
          rtelNodes.push(createBrEl());
          return rtelSplitter;
        } else if (atName) {
          const atUser = at && _.find(at, ({ name }) => name === atName);
          if (atUser) {
            const { uid, name } = atUser;
            rtelNodes.push(createAtEl(uid, name));
            return rtelSplitter;
          }
        } else if (emojiTips) {
          const emojiItem = emojiMaps[emojiTips];
          if (emojiItem) {
            rtelNodes.push(createEmojiEl(emojiTips, emojiItem.url));
            return rtelSplitter;
          }
        }
        return str;
      })
      .split(rtelSplitter);
    _.forEach(rtelTexts, (txt, i) => {
      rtelNodes.push(createTextNode(txt));
    });
    return rtelNodes;
}

接下来,再看怎么将富文本编辑器内,用户输入的内容转为消息JSON数据。

// 注意:下面代码仅是示意,包含缺少定义的环境变量

function richTextNodes2MsgData(richTextEl) {
  const ret = {
    txt: '', // 用于纯文本展示需求
    at: [], // 用于记录at人员名单 [{ uid, name }]
    msgs: [], // 用于支持图文混排 [{ key: 'txt', val: '' }, { key: 'img', width: 123, height: 456, file: File }]
  };
  if (!_.get(richTextEl, 'childNodes.length')) {
    // 输入框是空的,直接返回空消息体内容
    return ret;
  }
  /* 图、文(含At文本)、表情提取 sta */
  const picEls = richTextEl.getElementsByClassName(picCls);
  // 生成图文混排中的图片定界符
  const picSplitter = `[IMG:${getUuid()}]`;
  const tmpEl = getTransCodeEl();
  // 用定界符替换用户插入图片产生的DOM元素
  tmpEl.innerHTML = richTextEl.innerHTML
    // 去除用来便于光标移动的0宽字符
    .replace(blankRegExp, '')
    // 插图转为定界符
    .replace(picTagRegExp, picSplitter)
    // 表情图转未文本标记符如“[微笑]”
    .replace(emojiTagRegExp, (str) => (emojiTipsRegExp.exec(str) || '')[1]);

  const { msgs } = ret;
  // 格式化消息内容(这里的replace用于替换 &nbsp; 为普通空格)
  const txts = tmpEl.innerText.replace(/\u00A0/g, ' ').split(picSplitter);
  const maxI = txts.length - 1;
  _.forEach(txts, (val, i) => {
    const picEl = picEls[i];
    if (val) {
      if (i === 0) {
        // 对第一条文本消息的前面换行符进行过滤; 不可以做trim处理
        val = val.replace(/^[\r\n]+/, '');
      }
      if (i === maxI && !picEl) {
        // 对最后一条文本消息的末尾换行符进行过滤; 不可以做trim处理
        val = val.replace(/[\r\n]+$/, '');
      }
      if (val) {
        ret.txt += val;
        msgs.push({ key: 'txt', val });
      }
    }
    if (picEl) {
      ret.txt += '[图片]';
      const {
        'data-width': width,
        'data-height': height,
        'data-draft-fid': draftFid,
      } = getAttributes(picEl, ['data-width', 'data-height', 'data-draft-fid']);
      msgs.push({
        key: 'img',
        height,
        width,
        file: getFileByDraftfId(draftFid),
      });
    }
  });
  /* 图、文(含At文本)、表情提取 end */

  /* At列表提取 sta */
  const { at } = ret;
  const atEls = richTextEl.getElementsByClassName(atCls);
  _.forEach(atEls, (el) => {
    const { 'data-uid': uid, 'data-name': name } = getAttributes(el, [
      'data-uid',
      'data-name',
    ]);
    at.push({ uid, name });
  });
  /* At列表提取 end */
  tmpEl.innerHTML = '';
  return ret;
}
`

富文本内容转消息JSON,后便可以进行草稿存储、提交服务端了,大体格式如下:

 {
    txt: '', // 用于纯文本展示需求
    at: [], // 用于记录at人员名单 [{ uid, name }]
    msgs: [], // 用于支持图文混排 [{ key: 'txt', val: '' }, { key: 'img', width: 123, height: 456, file: File }]
  }

光标位置读写

这里按基础能力需要,也需要拆分多个核心基础方法。

首先,需要最基本的光标选取读写能力。

function getSel() {
  return (window.getSelection && window.getSelection()) || {};
}

// 更换选中内容
function replaceRange(opts) {
  try {
    const { staNode, staOffset, endNode, endOffset } = opts;
    if (!staNode.parentNode || !endNode.parentNode) {
      return;
    }
    const ra = document.createRange();
    ra.setStart(staNode, amendChildOffset(staNode, staOffset));
    ra.setEnd(endNode, amendChildOffset(endNode, endOffset));
    const sel = getSel();
    sel.removeAllRanges();
    sel.addRange(ra);
  } catch (err) {
    console.log('[Errror] replaceRange', opts, err);
  }
}
// 修正子元素定位下标值
function amendChildOffset(pEl, childOffset) {
  return Math.min(
    childOffset,
    _.get(pEl, 'childNodes.length') || _.get(pEl, 'length') || 0
  );
}
// 移动光标到目标元素的第几个子内容后面
function moveOffset(targetNode, idx = 0) {
  if (!targetNode) return;
  replaceRange({
    staNode: targetNode,
    staOffset: idx,
    endNode: targetNode,
    endOffset: idx,
  });
}
// 移动光标到目标节点前后 @isAfter 是否定位到目标后面
function moveOffset2Node(nodeEl, isAfter = false) {
  try {
    const parentNd = nodeEl.parentNode;
    if (parentNd) {
      const idx = _.indexOf(parentNd.childNodes, nodeEl) + (isAfter ? 1 : 0);
      moveOffset(parentNd, idx);
    }
  } catch (err) {
    console.log('[Errror] moveOffset2Node:', nodeEl, isAfter, err);
  }
}

按光标所在位置获取左侧文本内容及文本节点对象。

getCursorLeftObj = () => {
  this.focus(); // 先保证光标在输入框里
  const sel = getSel();
  const ret = { sel };
  const { anchorNode, focusNode, anchorOffset, focusOffset } = sel;
  // 光标不在一个独立的文本节点内,或者用户有在主动选取文本内容,则不做At文案提取
  if (
    focusNode &&
    anchorNode === focusNode &&
    isTxtNode(focusNode) &&
    !isNaN(focusOffset) &&
    anchorOffset === focusOffset
  ) {
    const { data } = focusNode;
    if (data) {
      ret.node = focusNode;
      ret.offset = focusOffset;
      // 光标左侧文本内容
      ret.txt = data.substring(0, focusOffset);
    }
  }
  return ret;
};

获取光标在文档流中的坐标位置。

getRangePosition = () => {
  this.focus(); // 先保证光标在输入框里
  const sel = getSel();
  let ret = {};
  if (sel.getRangeAt) {
    const ra = sel.getRangeAt(0);
    if (ra && ra.getBoundingClientRect) {
      ret = ra.getBoundingClientRect();
    }
  }
  return ret;
};

草稿存储改造(含插入图片存储)

原有草稿存储,是基于本地存储的 localStorage.set localStorage.get;如果要进行图片文件存储,肯定是不合适的,所以这里又引入了 indexedDB,写了一个 ttIndexedDb 操作对象。

const ttIndexedDb = ((win) => {
  let { _ttIndexedDb } = win;
  if (_ttIndexedDb) return _ttIndexedDb;

  win._hzj_idx_db_log = 0;

  idxDbPolyfill(win);

  // 打开并连接的 database 对象
  let db = null;

  // 草稿文件存储对象名称
  const draftFilesStoreName = 'draft_files';
  _ttIndexedDb = win._ttIndexedDb = {
    /* 读草稿文件从本地数据存储
     * @sid 会话ID
     * 返回 Promise
     */
    async readDraftFiles(sid) {
      return await this.readwriteStore({
        storeName: draftFilesStoreName,
        action: 'get',
        data: sid,
      });
    },
    /* 写草稿文件到本地数据存储
     * @data 草稿数据,示例: {
        sid: '123', 
        files: {
         'b456': new File(['123333'], 'test33.txt'),
         'b4563': new File(['123333'], 'test33.txt'),
        }
      }
     * 返回 Promise
     */
    async writeDraftFiles(data) {
      return await this.readwriteStore({
        storeName: draftFilesStoreName,
        action: 'put',
        data,
      });
      // if (req.error) console.log('写草稿文件失败!');
    },
    /* 删除草稿文件从本地数据存储
     * @sid 会话ID
     * 返回 Promise
     */
    async delDraftFiles(sid) {
      return await this.readwriteStore({
        storeName: draftFilesStoreName,
        action: 'delete',
        data: sid,
      });
    },
    /* 按名称、行为、参数,读写存储对象中对应数据
     * @storeName 存储对象名称
     * @action    操作行为,可选值:get、put、...
     * @data    行为对应的参数们
     * 返回 Promise
     */
    readwriteStore({ storeName, action = 'get', data }) {
      return new Promise(async (resolve) => {
        const isRead = action === 'get';
        const { db, error } = await this.openDb();
        if (error) {
          return resolve({ error });
        }
        try {
          const store = db
            .transaction(storeName, isRead ? 'readonly' : 'readwrite')
            .objectStore(storeName);
          const req = store[action](data);
          req.onsuccess = () => resolve(req);
          req.onerror = (error) => resolve({ error });
        } catch (error) {
          win._hzj_idx_db_log &&
            console.log('[Error] indexedDB.readwriteStore', error);
          resolve({ error });
        }
      });
    },
    // 打开数据库
    openDb() {
      return new Promise((resolve) => {
        if (db) {
          resolve({ db });
          return;
        }
        const { indexedDB } = win;
        if (!indexedDB) {
          win._hzj_idx_db_log &&
            console.log('[OpenError] Does not support with indexedDB!');
          resolve({ error: '[OpenError] Does not support with indexedDB!' });
        }
        const req = indexedDB.open('TX_IM', 1);
        req.onupgradeneeded = (e) => {
          win._hzj_idx_db_log &&
            console.log('[onupgradeneeded] indexedDB.open', e);
          // 创建草稿文件存储对象
          db = e.target.result;
          const store = db.createObjectStore(
            draftFilesStoreName, // 草稿文件存储对象
            // 按会话ID作为主键
            { keyPath: 'sid', autoIncrement: false }
          );
          // 支持按会话ID去索引
          store.createIndex('sid', 'sid', { unique: true });
        };
        req.onerror = (e) => {
          db = null;
          win._hzj_idx_db_log && console.log('[Error] indexedDB.open', e);
          resolve({ error: '[OpenError]' + req.error });
        };
        req.onsuccess = (e) => {
          win._hzj_idx_db_log && console.log('[onsuccess] indexedDB.open', e);
          db = e.target.result;
          db.onerror = (e) => {
            win._hzj_idx_db_log &&
              console.log('[onerror] creating/accessing IndexedDB database', e);
          };
          db.onclose = (e) => {
            win._hzj_idx_db_log && console.log('[onclose] indexedDB.open', e);
            db = null;
          };
          // 数据库版本变化,则关闭之(下次调用再开启)
          db.onversionchange = (e) => {
            win._hzj_idx_db_log &&
              console.log('[onversionchange] indexedDB.open', e);
            db.close();
          };
          resolve({ db });
        };
      });
    },
  };
  return _ttIndexedDb;
})(window);

// API兼容抹平问题
function idxDbPolyfill(win) {
  if (!win.indexedDB) {
    win.indexedDB =
      win.webkitIndexedDB ||
      win.mozIndexedDB ||
      win.OIndexedDB ||
      win.msIndexedDB;
  }
  if (
    win.indexedDB &&
    IDBObjectStore &&
    IDBObjectStore.prototype &&
    typeof IDBObjectStore.prototype.getAll !== 'function'
  ) {
    IDBObjectStore.prototype.getAll = (...args) => {
      const ret = {};
      const req = this.openCursor(...args);
      req.onerror = (...errArgs) => {
        const { onerror } = ret;
        if (typeof onerror == 'function') {
          onerror(...errArgs);
        }
      };
      const retArr = [];
      req.onsuccess = (...sucArgs) => {
        const { onsuccess } = ret;
        if (typeof onsuccess == 'function') {
          const { target } = sucArgs[0] || {};
          const cursor = target.result;
          if (cursor) {
            retArr.push(cursor.value);
            cursor.continue();
          } else {
            ret.result = retArr;
            target.result = retArr;
            onsuccess(...sucArgs);
          }
        }
      };
      return ret;
    };
  }
}

export default ttIndexedDb;

兼容性

细节问题很多,先记录两个。

在Safari浏览器端,contenteditable的元素可能还是无法获取光标的不可编辑状态,一定记得添加CSS:

[contenteditable]{
    -webkit-user-select: text;
    user-select: text;
}

兼容性方面还要特别注意,focus到DIV并不能保证保持之前的光标选中状态,所以这里要自己做光标状态记录、和恢复。

onSelectionChange = () => {
    // 进一步保证focus方法无效的问题
    const { richTextEl } = this.refs;
    const {
      focusNode: staNode,
      focusOffset: staOffset,
      anchorNode: endNode,
      anchorOffset: endOffset,
    } = getSel();
    if (
      (endNode === richTextEl || richTextEl.contains(endNode)) &&
      (staNode === richTextEl || richTextEl.contains(staNode))
    ) {
      this._selCache = { staNode, staOffset, endNode, endOffset };
      // console.log('记录光标状态!', this._selCache)
    }
  };
  // 设置输入框为焦点元素
  focus = () => {
    if (this.state.draftReading) return;
    const { richTextEl } = this.refs;
    // 恢复光标选中状态
    const { focusNode } = getSel();
    if (
      !focusNode ||
      (focusNode !== richTextEl && !richTextEl.contains(focusNode))
    ) {
      const staOffset = richTextEl.childNodes.length;
      const rangeOpts = this._selCache || {
        staNode: richTextEl,
        staOffset,
        endNode: richTextEl,
        endOffset: staOffset,
      };
      // console.log('恢复光标状态', rangeOpts)
      replaceRange(rangeOpts);
    }
    richTextEl.focus();
  };

后记

相关细节点还有很多,暂不逐一赘述了,以上先仅做流水记录,如果有所帮助、或拓展问题,欢迎沟通。

本文链接:http://blog.pyzy.net/post/editor.html

-- EOF --

Comments