Skip to content

富文本详情(切片图无缝) ​

一句话

两种模式:可视化(像 Word 一样编辑)和 HTML 源码(贴整段代码)。 切片长图之间不会有缝,这个已经处理好了。

它在哪 ​

商品编辑 → 详情与 SEO → 商品详情

单页 CMS、邮件模板用的也是同一个编辑器。

两种模式 ​

模式什么时候用
可视化日常写详情:插图、加粗、列表、表格
HTML 源码整段贴进来的模板(带 <style>、<script> 的落地页)

贴模板一定要用源码模式

可视化编辑器会把 HTML 重新解析再序列化一遍 —— <script>、<style>、表格属性统统被吃掉,而且是静默的。 你点开看一眼、保存一下,模板就毁了。

系统会看内容像不像模板(含 <style>/<script>/<table> 之类), 像的话初始就给源码模式。

右上角可以切换。切换前系统会保住内容,不会丢。

插图的三种方式 ​

  1. 工具栏的「图片空间」 —— 打开图片空间,可以一次挑多张,按勾选顺序插入
  2. 直接粘贴 —— 截图后 Ctrl + V,自动上传并插到光标处
  3. 拖进来 —— 从文件夹拖一张图到编辑区

都是插到光标处,不是末尾

追加到末尾的话,想在两段文字中间放图还得自己剪切粘贴,等于没做。

⭐ 切片长图之间的缝 ​

这是电商详情页最常见的一个视觉事故

详情通常是一整张长图切成好几段上传。如果每两张之间露出一条白缝, 整个画面就被"撕"成一段段。

这个已经处理好了 —— 系统会让"整段只有一张图"的段落没有外边距, 所以切片是严丝合缝的。文字和图之间的间距仍然保留。

你需要配合的:

  • 切片图宽度要一致(比如都是 750px),不然会左右错开
  • 不要给这些图加圆角(自定义 CSS 里也别加)—— 接缝处会露出四个缺口

邮件里也处理了

邮件客户端不支持 :has() 选择器,很多连 <style> 都剥掉 —— 所以发信前系统会把这些段落改写成内联样式。你不用做任何事。

图片的 alt 文字 ​

系统会自动用商品名填 alt。

为什么这很重要

电商详情页的实际形态就是一摞图,而搜索引擎读不到图里的字。

alt 全空的话,这一页可索引的文本几乎只剩标题和副标题,正文对 Google 是一片空白。

自己写 HTML 的话记得带 alt。

全屏编辑 ​

工具栏最右边有全屏按钮。详情内容长的时候很有用 —— 编辑区太矮, 插一张图要滚半天才看得到上一张,根本判断不了整体排版。

常见问题 ​

编辑器一直显示"加载中"

刷新页面。如果反复出现,浏览器控制台(F12)里会有具体报错。

切换到源码模式再切回来,格式变了

正常的。 可视化编辑器会把 HTML 规范化一遍。 如果你的内容是贴进来的模板,就一直待在源码模式,别来回切。

图片之间还是有缝

  1. 确认那些图是各自独立的一张,中间没有夹空段落(源码模式下看一眼, 应该是连着的 <p><img ...></p>)
  2. 自定义 CSS 里有没有给 img 加 margin 或 border-radius

详情页在手机上左右能滑动

详情里有比屏幕宽的东西 —— 通常是一张固定宽度的表格,或者写死了 width: 900px 的图。 源码模式里搜一下 width: 找出来。

贴进来的落地页,按钮没反应 / 倒计时不走

<script> 在 HTML 里不会自动执行(浏览器规范如此)。 系统对单页 CMS 做了处理(会重新创建 script 节点执行)。

如果是商品详情里贴的脚本,建议改成用单页 CMS做落地页。

这份文档只讲后台怎么用,不含任何真实密钥