uniapp 富文本 rich-text 在iosApp展示粗体及不支持video标签
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);
};