chameleon的富文本不支持HTML格式和小程序节点形式

xxhby3vn  于 5个月前  发布在  其他
关注(0)|答案(4)|浏览(74)

微信小程序和支付宝小程序(通过mini-html-parser2插件转节点数据)目前都是支持以下形式

我是<span style="color: red;">高亮</span>

但是chameleon是文字分段描述,
有望支持吗

iklwldmw

iklwldmw1#

经过渲染结果对比,发现是chameleon对尖括号等特殊字符进行了转义操作

&lt;span style="color:#FC3C3C"&gt;三&lt;/span&gt;联&lt;span style="color:#FC3C3C"&gt;公&lt;/span&gt;&lt;span style="color:#FC3C3C"&gt;园&lt;/span&gt;

是否有api属性取消对内容的转义

<view c-text="{{content}}"></view>
6yoyoihd

6yoyoihd2#

目前的方案,将被转义的内容(innerHTML)通过innerText或者textContent读出,但是直接操作DOM有些难受,

const richTextNodes = document.querySelectorAll(".hight-light-desc");
let node = null;
for (let i = 0; i < richTextNodes.length; i += 1) {
  node = richTextNodes[i];
  node.innerHTML = node.innerText || node.textContent;
}
8yparm6h

8yparm6h3#

在编译模板的阶段对这些特殊符号进行了处理。
另外可否在贴上详细的代码描述你的需求,我们调研下可行性

omhiaaxx

omhiaaxx4#

在编译模板的阶段对这些特殊符号进行了处理。
另外可否在贴上详细的代码描述你的

@jimwmg
问题不是说在于有没有对特殊符号处理,

变色龙的rich-text对于主流平台的富文本支持度为0

在接口返回数据已经固定为HTML String或者节点列表的情况下,

变色龙组件库的rich-text无法实现兼容,这是迁移阻碍,

更好的方式是rich-text支持多种格式的富文本方案,

关于使用代码去描述需求,这个不太方便,而且必要性也不大
| 富文本支持情况 | 微信小程序 | 支付宝小程序 | 变色龙 |
| ------------ | ------------ | ------------ | ------------ |
| HTML String | 支持 | 原生不支持,可通过mini-html-parse插件转换成节点列表形式进行兼容 | 不支持 |
| 节点列表 | 支持 | 支持 | 不支持 |
| 文字+样式描述 | 不支持 | 不支持 | 支持 |

举例:

// HTML String形式的数据
{
  keyWord: '北京',
  hightLightText: '<span style="color: red;">北京</span>机场',
}
// 节点列表形式的数据
{
  keyWord: '北京',
  hightLightText: [
   {
    name: "span",
    children: [
      { 
        type: "text", 
        text: "北京" 
      }
    ],
    attrs: { style: "color: red;" } 
   }, 
   { 
    type: "text",
    text: "机场" 
   }
  ]
}

chameleon是为了多平台,所以兼容多种类型是很重要的

相关问题