评论

uniapp 富文本 rich-text 在iosApp展示粗体及不支持video标签

解决uniapp项目中实际遇到的富文本兼容问题

1.首先使用了htmlParse转为array类型 循环添加了font-family:PingFangSc-Regular,PingFang S 解决了在iOS上面字体变粗的问题。

//循环往nodes array 添加 字体样式(ios兼容处理,需要设置字体样式)
export const loopAddAttr = (obj) => {
  if (obj.attrs && obj.attrs.style && obj.attrs.style.includes('font-family')) {
    //判断是否设置了字体
  } else {
    if (!obj.attrs) {
      obj.attrs = {};
    }
    obj.attrs.style = 'font-family:PingFangSc-Regular,PingFang SC';
  }
  if (obj.children && obj.children.length > 0) {
    for (const k in obj.children) {
      loopAddAttr(obj.children[k]);
    }
  }
};

2.发现rich-text不支持video标签后更换了组件为u-parse

3.使用u-parse时未找到uParse如何修改每个标签的font-family,所以首先沿用了第一步的操作进行属性添加,然后也未找到uparse支持解析node array类型的html,所以进行了转换为string html的操作。转换完成直接使用赋值到uparse的content属性,已成功解决问题。

//将nodes HTML 数组转为 String HTML
export const getStringHTML = (nodesArr) => {
  const singleTag = ['br''hr''img''input''param''meta''link']; //单标签集合
  //循环遍历标签及子标签并拿到相关string类型html
  function loopNodes(nodes{
    let html = '';
    for (const k in nodes) {
      html = html + transHTML(nodes[k]);
    }
    return html;
  }
  function transHTML(node{
    if (node.type === 'text') {
      //文本类型直接返回
      return node.text;
    }
    const leftTag = `<${node.name}`;
    let rightTag = ``;
    let attr = '';
    let childrenStr = '';
    const middleChar = singleTag.includes(node.name) ? '/>' : '>';
    //处理前后标签
    if (singleTag.includes(node.name)) {
      //是否是单标签
      rightTag = ``;
    } else {
      rightTag = `</${node.name}>`;
    }
    //处理标签属性
    for (const i in node.attrs) {
      attr = attr + ${i}="${node.attrs[i]}"`;
    }
    //处理子标签数据
    if (node.children) {
      childrenStr = loopNodes(node.children);
    }
    return `${leftTag}${attr}${middleChar}${childrenStr}${rightTag}`;
  }
  return loopNodes(nodesArr);
};
最后一次编辑于  2021-07-03  
点赞 0
收藏
评论
登录 后发表内容