【14】单元格显示常规HTML富文本字符串

收藏

1、现在外部的一个常规富文本编辑器得到的富文本字符串，想在SpreadJS单元格渲染这任意的富文本HTML字符串的方案，除了之前的将HTML字符串转为图片，再把图片作为单元格背景图片，还有别的方案吗？
你们新版的富文本编辑器跟常规的HTML富文本编辑器不互通
image.png330191039.png

2、生成图片并作为背景图片的痛点：
无法设置水平/垂直居中等对齐方式
字体字号无法跟随字号下拉框选择而动，指定CSS font-size属性才能控制生成的图片中字号，但往往和相邻的单元格常规文本设置字号有大小差异

生成PDF后，背景图片相对文本更模糊

如果有别的更方便的在单元格渲染HTML富文本字符串麻烦说下，如果没有别的方式，痛点有无解决办法或改善优化建议

Joestar.Xu · Joestar.Xu

您好，您说的“常规HTML富文本字符串”可以给一个参考的示例吗？

此外，您第二点中的问题，是说想让SpreadJS支持背景图片可以设置水平/垂直居中等对其方式以及想要通过字号下拉框来控制图片中的字号吗？

背景图片相对文本更模糊的这种情况也请您提供一个可以复现这个问题的Demo，我们这边好进一步调研。

nobt · nobt

Joestar.Xu 发表于 2023-7-25 12:15
您好，您说的“常规HTML富文本字符串”可以给一个参考的示例吗？

此外，您第二点中的问题，是说想让Spre ...

就是如图的方法，以前也是你们提供的，随便就找个市面上的富文本编辑器，比如ckeditor编辑后得到的富文本字符串
把这个富文本字符串传入帖子图片中的方法

function _html2img(value, style, cell){
var svgPattern = '<svg xmlns="http://www.w3.org/2000/svg" width="{0}" height="{1}">' +
'<foreignObject width="100%" height="100%"><div xmlns="http://www.w3.org/1999/xhtml" style="font:{2}">{3}</div></foreignObject></svg>';
var w = cell.sheet.getCellRect(cell.row, cell.col).width;
var h = cell.sheet.getCellRect(cell.row, cell.col).height;
var data = svgPattern.replace("{0}", w).replace("{1}", h).replace("{2}", style.font).replace("{3}", value);
var doc = document.implementation.createHTMLDocument("");
doc.write(data);
// Get well-formed markup
data = (new XMLSerializer()).serializeToString(doc.body.children[0]);
img = new Image();
img.src = 'data:image/svg+xml;base64,'+window.btoa(unescape(encodeURIComponent(data))); // 涉及中文时的转码
cell.tag(img);
img.onload = (function (cell, value, img) {
return () => {
cell.cellType(new RenderHTMLTagCellType());
cell.value(value);
cell.backgroundImageLayout(GC.Spread.Sheets.ImageLayout.center);
cell.backgroundImage(img.src);
}
})(cell, value, img)
}

复制代码

nobt · nobt

Joestar.Xu 发表于 2023-7-25 12:15
您好，您说的“常规HTML富文本字符串”可以给一个参考的示例吗？

此外，您第二点中的问题，是说想让Spre ...

比如用如下富文本编辑后得到的HTML字符串，直接放入这个_html2img，指定一个style和cell

<sub>┌1 2┐</sub><br />
<sup>└3 4┘</sup>

复制代码

_html2img('<sub>┌1 2┐</sub><br />
<sup>└3 4┘</sup>', sheet.getActualStyle(0, 0), sheet.getCell(0, 0));

复制代码

nobt · nobt

Joestar.Xu 发表于 2023-7-25 12:15
您好，您说的“常规HTML富文本字符串”可以给一个参考的示例吗？

此外，您第二点中的问题，是说想让Spre ...

Joestar.Xu · Joestar.Xu

我大概明白您的意思了，您是说在使用_html2img这个方式来将富文本显示到SpreadJS的单元格中会出现很多痛点，所以想要让SpreadJS支持常规HTML富文本字符串，是这个意思吗？

nobt · nobt

Joestar.Xu 发表于 2023-7-25 17:30
我大概明白您的意思了，您是说在使用_html2img这个方式来将富文本显示到SpreadJS的单元格中会出现很多痛点 ...

是的，有没有别的方案，如果没别的方案这些痛点有没有办法改造，重点是对齐样式这种

AlexZ · AlexZ

自定义单元格，在自定义单元格的 Dom 中实现在自己的富文本编辑

同时，可以根据需要，重新定义富文本的展现

AlexZ · AlexZ

去看官网学习指南里面的，自定义单元格

		自动登录	找回密码
密码			立即注册

[已处理] 【14】单元格显示常规HTML富文本字符串

8 个回复

微信认证勋章

SpreadJS 认证

SpreadJS 高级认证

活字格认证

讲师达人

悬赏达人

元老葡萄