wangEditor
wangEditor copied to clipboard
Published
20 hours ago •
wangeditor-team
wangeditor-team
使用初始化的数据，发现渲染后的顺序乱了
bug 描述
初始化时异步请求接口获得了微信公众号发布的文章结构。然后进行setHtml。结果发现页面顺序不对。
你预期的样子是？
正常。正确的渲染
系统和浏览器及版本号
- Win 10
- Chrome 版本 127.0.6533.89（正式版本）
wangEditor 版本
"@wangeditor/editor": "^5.1.23", "@wangeditor/editor-for-vue": "^5.1.12",
demo 能否复现该 bug ？
不能
- 中文 demo https://www.wangeditor.com/demo/
- English demo https://www.wangeditor.com/demo/?lang=en
最小成本的复现步骤
（请告诉我们，如何最快的复现该 bug）
- 将下边这段代码复制。然后给初始化v-model="valueHtml"进行赋值。就会复现
<p><img src='https://images.tmtpost.com/uploads/images/wx/2024/08/20240802174506939664.jpg'></img></p><span>出品｜虎嗅智库</span><span>作者 | 于向南</span><span><br style=\"outline: 0px;\"></span><span></span><p><br style=\"outline: 0px;\"></p><svg viewbox=\"0 0 1 1\" style=\"float:left;line-height:0;width:0;vertical-align:top;\"></svg><p><span><strong>柔性供应链首先要知道单子从哪里来?</strong></span></p><strong><span>中国鞋服行业的库存压力依然很大。</span></strong><span></span><br style=\"outline: 0px;\"><span><span>以运动头部品牌为例，安踏的</span><span>存货周转天数</span><span><span>为1233天(2023年)，存货价值高达65亿元;李宁的存货周转天数为63天(2023年)，存货价值为21.2亿元；特步的</span><span>库存周转天数</span><span>约为4.5个月，存货价值为17.94亿元。</span></span></span><br style=\"outline: 0px;\"><span>同时，电商渠道上超高的退货率/退款率更是让鞋服行业雪上加霜。<br style=\"outline: 0px;\"></span><br style=\"outline: 0px;\"><span>大大小小的商家纷纷采取库存管理、优化生产计划、加强销售预测等措施，但仍难以缓解库存压力。</span><br style=\"outline: 0px;\"><span>鞋服行业当下的核心挑战，我们可以从以下维度进行剖析。</span><br style=\"outline: 0px;\"><span>首先，从行业结构来看，服装行业的上下游产业链现在呈现出较为<strong>明显的分散状态</strong>。这主要是由于零售渠道的多元化和线上化趋势所带来的影响。以前，传统品牌的零售主要通过连锁门店实现，而现在除了实体门店，电商、直播、私域等新兴渠道层出不穷，为服装品牌提供了更多的销售机会。</span><br style=\"outline: 0px;\"><span>然而，这种多元化的销售模式也带来了一个问题，那就是销售通路增多，<strong>上下游之间缺乏紧密的合作关系</strong>。品牌方和供应商往往基于单个商品进行决策，而忽视了整体产业链的协同效应,导致了资源匹配的困难和效率的低下。对于主播等零售端来说，他们往往难以找到与自己风格或定位相匹配的货源；而对于供应商来说,他们也很难准确地知道哪些货品更适合哪些销售渠道。</span><br style=\"outline: 0px;\"><span>其次，服装的个性化趋势也日益明显。在消费升级和个性化需求增长的背景下，消费者对服装的款式、材质、颜色等方面的要求越来越高。</span><br style=\"outline: 0px;\"><span>这导致了对SKU(stock keeping unit，库存量单位)数量的巨大需求，同时也要求服装品牌具备强大的上新能力。以前一款衣服可能可以卖出几十万件，但现在即使是爆款，销量也往往只有几千件到上万件。这对上游生产和供应链管理能力提出了更高的要求。一旦预测不准，就可能导致大量的库存积压，给品牌带来严重的财务压力。</span><br style=\"outline: 0px;\"><span>再者，服装的销售周期也在逐渐缩短。这主要得益于快时尚品牌的兴起和市场竞争的加剧。像ZARA这样的快时尚品牌，以快速响应市场变化和满足消费者需求为特点，其销售周期往往只有两周左右。而女装品牌更是将销售周期缩短到了15到到20天，男装品牌也基本在30天左右。这种快速的销售周期要求品牌必须具备强大的供应链响应能力和灵活的库存管理策略。否则，一旦销量预测失误或库存管理不当，就可能导致销售中断或库存积压。</span><br style=\"outline: 0px;\"><span>因此，鞋服行业对柔性供应链的需求越来越重。</span><br style=\"outline: 0px;\"><span>柔性供应链是一种能够适应市场需求快速变化、灵活调整生产和库存的供应链管理模式。它强调以<strong>产能支撑销售</strong>而不是以库存支撑销售的理念，通过提高供应链的灵活性和响应速度来降低库存风险和提高销售效率。</span><br style=\"outline: 0px;\"><span>小单快反是柔性供应链的重要表现之一，其逻辑在于提前预测市场需求,快速准备产能,通过小批量订单快速响应市场变化,实现销售与生产的无缝对接。然而，在中国,许多企业难以实现小单快反,原因在于上下游信息分散,工厂通常只能被动接单生产,缺乏对市场需求的主动感知和预测能力。</span><br style=\"outline: 0px;\"><span>究其原因是要实现小单快反(柔性)，首先需要解决的是订单来源问题，<strong>即单从哪里来</strong>。</span><br style=\"outline: 0px;\"><span>典型企业当属shein，由于shein自己掌握销售渠道和大量出口订单，能够清晰地知道订单的来源和需求变化，同时又掌握了上游的产能，且基本都是能做小批量的小工厂，从而有效地实现了小单快反。</span><br style=\"outline: 0px;\"><span>而国内其他企业主要分两类，第一类大品牌都是大工厂出货模式；另一类是中小的零售品牌或工厂，不具备资源整合能力，这两类企业短期内很难将柔性落地。</span><br style=\"outline: 0px;\"><span>所以在实际操作中，柔性的实现十分困难。</span><span><br style=\"outline: 0px;\"></span><p><img src='https://images.tmtpost.com/uploads/images/wx/2024/08/20240802174507028408.jpg'></img></p><span></span><span>大鲸案例火热征集中，欢迎AI先锋们报名参与。</span><span>案例库也已陆续上新，前往智库官网即可阅览（点击文末“原文链接”）。</span><span><br style=\"outline: 0px;\"></span><p><br style=\"outline: 0px;\"></p><svg viewbox=\"0 0 1 1\" style=\"float:left;line-height:0;width:0;vertical-align:top;\"></svg><p><span><strong>Al能否解决鞋服行业柔性的问题?</strong></span></p><span>首先，库存产生的核心因素是设计、生产阶段对市场的不了解，从而产生错误判断。</span><br style=\"outline: 0px;\"><span><span>在设计端，目前的解决方式有\"数据驱动服装设计\"，运用Al人工智能与时装消费大数据,可以让复杂的时装消费者心理变得有迹可寻。智能化和数据化的市场大盘报表、深层次的商品爆款分析等技术手段赋能风格、年龄段、价格带等维度，提高企业的选款、选品能力，并促使企业数据部门的日常数据分析工作进一步提升效率，助于提高爆款率和</span><span>动销率</span><span>。</span></span><br style=\"outline: 0px;\"><span>此外，结合大数据、图像识别、机器学习等人工智能技术的\"智能试衣\"，支持自定义搭配样衣模板和图案，在制衣打样的前期工作中，为设计师提供样衣最终的上身效果，帮助设计师直观地判断是否需要进行下一步的样衣制作。能够快速过滤不合理的搭配，在打样环节节约一定成本。</span><br style=\"outline: 0px;\"><span>在现代服装行业中，3D技术已经实现了从服装设计到生产的全流程数字化,极大地提升了行业的生产效率和质量。然而，这一过程中也伴随着一系列挑战,如高昂的技术成本、专业人才的稀缺以及与现有工作流程的深度融合问题。</span><br style=\"outline: 0px;\"><span>另外，Al在服装设计的多个环节中都展现出了强大的应用潜力。</span><br style=\"outline: 0px;\"><span>在版型制作方面，Al可以通过学习大量版型数据,快速生成符合设计要求的版型，大大提高了设计效率。在面料设计方面，Al能够根据设计师的创意,生成多种面料纹理和图案,为设计提供更多可能性。在物理仿真和渲染环节，Al能够模拟真实面料在光线下的表现,使设计作品更加逼真生动。</span><br style=\"outline: 0px;\"><img src='https://images.tmtpost.com/uploads/images/wx/2024/08/20240802174507134706.jpg'></img><br style=\"outline: 0px;\"><span>然而，Al也存在一些局限性，如结果的不可靠性和不可控性、生成效果的逼真度。相比之下，3D技术虽然需要人工操作，耗时耗力，但人在这一过程中的可靠性和可控性更高。因此，将AI与3D技术相结合,可以充分发挥两者的优势，实现更高效、更可靠的交互和创作过程。3D与Al的深度融合将是服装时尚行业未来发展的关键所在。</span><br style=\"outline: 0px;\"><span>在生产端，国内比较主流的做法是将工厂改造、提升生产效率。</span><br style=\"outline: 0px;\"><strong><span>但本质上这些做法都不能解决企业柔性的问题</span></strong><span>。</span><br style=\"outline: 0px;\"><p><br style=\"outline: 0px;\"></p><svg viewbox=\"0 0 1 1\" style=\"float:left;line-height:0;width:0;vertical-align:top;\"></svg><p><span><strong>重新拾起产业互联网，打造服装生态体系?</strong></span></p><span>虎嗅智库观察到，多数相关技术商重新提起打造\"产业互联网平台\"，并作为核心战略方向，例如建以鞋服产业互联网发展为核心的供应链体系，打通鞋服产业上下游的关键环节，形成高效协同、价值共创的产业生态。</span><br style=\"outline: 0px;\"><img src='https://images.tmtpost.com/uploads/images/wx/2024/08/20240802174507205574.jpg'></img><br style=\"outline: 0px;\"><span>产业互联网概念于2015年首次提出并于2018年快速兴起，并不新鲜。但为何在当下节点，技术商为何要以此为战略目标。</span><br style=\"outline: 0px;\"><span>究其原因，是国内企业要想实现与shein相似的运营模式,关键在于确保数据完全掌控在自己手中，构建一个跨企业的数字化平台作为支撑。这样的平台能够使供应端实时了解销售状态，并基于销售数据即时感知生产需求，从而进行精确的预测和生产规划。</span><br style=\"outline: 0px;\"><span>生产完成后，将产品备货至仓库，同时确保库存水平既满足销售需求又不会形成积压。根据销售趋势，持续且有序地补充库存,确保供应链的灵活性和高效性。</span><br style=\"outline: 0px;\"><span>衫数科技CEO向清华对虎嗅智库表示，要实现这样的柔性供应链，单一的工厂或品牌难以独自构建跨企业的数字化基座。这需要多个相关企业之间的紧密合作与数据共享，<strong>共同构建一个高效、协同的数字化生态系统</strong>。</span><br style=\"outline: 0px;\"><span>关于产业互联网的理解与实践，有几点需要澄清和强调:</span><br style=\"outline: 0px;\"><span>首先，许多服务企业提及产业互联网时,往往未能深入其核心要点。产业互联网本质上是一个生态体系，涵盖了从销售、工厂、设计到物流、供应链金融及IP等外部资源的全面整合。这种整合旨在实现各环节在线协同，但实际操作中,难度极大。目前，无论是服装还是其他行业，多数产业互联网实践仍局限于单体企业，难以形成真正的生态模式。这些实践往往更偏向于贸易行为，而非构建一个完整的生态系统。</span><br style=\"outline: 0px;\"><span>真正的产业生态结构是去中心化的，强调资源的精准匹配。当需求产生时，无论是生产资源还是零售资源，都能迅速找到对应的对接方。基于精准匹配，产业互联网还能利用销售市场数据反向拉动生产，实现数据化分发和决策。然而，在产业互联网发展的初期，由于它面向的是整个产业而非单一企业，因此在收费和盈利模式上存在挑战。</span><br style=\"outline: 0px;\"><span>其次，产业互联网的成功与否还取决于交易体系的规模和资源整合能力。如果产业互联网无法创造足够的交易规模，或者无法有效整合零售商和供应商的资源，那么这种资源的匹配将变得困难重重。因此，扩大交易规模、提高资源整合能力是实现产业互联网成功的关键。</span><br style=\"outline: 0px;\"><span>综上所述，产业互联网的发展需要深入理解其生态本质，强调去中心化的资源匹配和精准的数据化决策。同时，还需要在交易规模和资源整合能力上取得突破,以实现真正的产业生态构建。</span><img src='https://images.tmtpost.com/uploads/images/wx/2024/08/20240802174507402169.jpg'></img><img src='https://images.tmtpost.com/uploads/images/wx/2024/08/20240802174507513749.jpg'></img><img src='https://images.tmtpost.com/uploads/images/wx/2024/08/20240802174507628736.jpg'></img><span><strong>扫码报名 申请加入</strong></span><span><strong>虎嗅智库数字化/AI落地创新实践交流群</strong></span><svg viewbox=\"0 0 1 1\" style=\"float:left;line-height:0;width:0;vertical-align:top;\"></svg><img src='https://images.tmtpost.com/uploads/images/wx/2024/08/20240802174507693579.jpg'></img><p><span><strong>关于虎嗅智库</strong></span></p><p><span>虎嗅智库是一家聚焦企业数字化、AI创新实践的新型研究服务机构，为产业智能化进程中的甲乙双方，提供有洞察性的研究报告、案例评选、以及线上会议、线下活动与参访服务，以支持企业高管在智能化、数字化方面的明智决策。</span></p><p><br style=\"outline: 0px;\"></p><svg viewbox=\"0 0 1 1\" style=\"float:left;line-height:0;width:0;vertical-align:top;\"></svg><p><br style=\"outline: 0px;\"></p><img src='https://images.tmtpost.com/uploads/images/wx/2024/08/20240802174507745141.jpg'></img><p><span><strong>我们提供的核心价值</strong></span></p><p><span>及时与优质的洞察，了解技术、了解行业、了解同行与对手；</span></p><p><span>为决策者技术与产品战略决策、产业规划、解决方案选型提供重要参考；<br style=\"outline: 0px;\">帮助市场全面了解前沿科技及所影响产业的发展状况，还有未来趋势；</span></p><p><br style=\"outline: 0px;\"></p><p><span>虎嗅智库官网：hri.huxiu.com</span></p><p><mp-style-type data-value=\"3\"></mp-style-type></p>
代码如下。就可以复现。
<template>
<client-only>
<div class="editor_part">
<Toolbar style="border-bottom: 1px solid #e2e2e2" :editor="editorRef" :defaultConfig="toolbarConfig"
mode="simple" />
<Editor style="height: 320px; overflow-y: hidden"
v-model="valueHtml"
:defaultConfig="editorConfig"
mode="simple" @onCreated="handleCreated" @onBlur="handleBlur" />
</div>
</client-only>
</template>
<script setup>
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import "@wangeditor/editor/dist/css/style.css";
const editorRef = shallowRef(); // 编辑器实例，必须用 shallowRef
const valueHtml = ref(``); // 内容 HTML
const emits = defineEmits(['blurTextarea']);
const toolbarConfig = {
}
const editorConfig = {
placeholder: "请输入内容...",
autoFocus: false,
};
/**
* 输入框失去焦点
* @param {*} editor
*/
const handleBlur = (editor) => {
emits('blurTextarea', { value: valueHtml.value })
}
/**
* 创建实例
* @param {*} editor
*/
const handleCreated = (editor) => {
editorRef.value = editor; // 记录 editor 实例，重要！
}
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
const editor = editorRef.value;
if (editor == null) return;
editor.destroy();
});
// 模拟 ajax 异步获取内容
onMounted(() => {
nextTick(() => {
valueHtml.value = `<p><img src='https://images.tmtpost.com/uploads/images/wx/2024/08/20240802174506939664.jpg'></img></p><span>出品｜虎嗅智库</span><span>作者 | 于向南</span><span><br style=\"outline: 0px;\"></span><span></span><p><br style=\"outline: 0px;\"></p><svg viewbox=\"0 0 1 1\" style=\"float:left;line-height:0;width:0;vertical-align:top;\"></svg><p><span><strong>柔性供应链首先要知道单子从哪里来?</strong></span></p><strong><span>中国鞋服行业的库存压力依然很大。</span></strong><span></span><br style=\"outline: 0px;\"><span><span>以运动头部品牌为例，安踏的</span><span>存货周转天数</span><span><span>为1233天(2023年)，存货价值高达65亿元;李宁的存货周转天数为63天(2023年)，存货价值为21.2亿元；特步的</span><span>库存周转天数</span><span>约为4.5个月，存货价值为17.94亿元。</span></span></span><br style=\"outline: 0px;\"><span>同时，电商渠道上超高的退货率/退款率更是让鞋服行业雪上加霜。<br style=\"outline: 0px;\"></span><br style=\"outline: 0px;\"><span>大大小小的商家纷纷采取库存管理、优化生产计划、加强销售预测等措施，但仍难以缓解库存压力。</span><br style=\"outline: 0px;\"><span>鞋服行业当下的核心挑战，我们可以从以下维度进行剖析。</span><br style=\"outline: 0px;\"><span>首先，从行业结构来看，服装行业的上下游产业链现在呈现出较为<strong>明显的分散状态</strong>。这主要是由于零售渠道的多元化和线上化趋势所带来的影响。以前，传统品牌的零售主要通过连锁门店实现，而现在除了实体门店，电商、直播、私域等新兴渠道层出不穷，为服装品牌提供了更多的销售机会。</span><br style=\"outline: 0px;\"><span>然而，这种多元化的销售模式也带来了一个问题，那就是销售通路增多，<strong>上下游之间缺乏紧密的合作关系</strong>。品牌方和供应商往往基于单个商品进行决策，而忽视了整体产业链的协同效应,导致了资源匹配的困难和效率的低下。对于主播等零售端来说，他们往往难以找到与自己风格或定位相匹配的货源；而对于供应商来说,他们也很难准确地知道哪些货品更适合哪些销售渠道。</span><br style=\"outline: 0px;\"><span>其次，服装的个性化趋势也日益明显。在消费升级和个性化需求增长的背景下，消费者对服装的款式、材质、颜色等方面的要求越来越高。</span><br style=\"outline: 0px;\"><span>这导致了对SKU(stock keeping unit，库存量单位)数量的巨大需求，同时也要求服装品牌具备强大的上新能力。以前一款衣服可能可以卖出几十万件，但现在即使是爆款，销量也往往只有几千件到上万件。这对上游生产和供应链管理能力提出了更高的要求。一旦预测不准，就可能导致大量的库存积压，给品牌带来严重的财务压力。</span><br style=\"outline: 0px;\"><span>再者，服装的销售周期也在逐渐缩短。这主要得益于快时尚品牌的兴起和市场竞争的加剧。像ZARA这样的快时尚品牌，以快速响应市场变化和满足消费者需求为特点，其销售周期往往只有两周左右。而女装品牌更是将销售周期缩短到了15到到20天，男装品牌也基本在30天左右。这种快速的销售周期要求品牌必须具备强大的供应链响应能力和灵活的库存管理策略。否则，一旦销量预测失误或库存管理不当，就可能导致销售中断或库存积压。</span><br style=\"outline: 0px;\"><span>因此，鞋服行业对柔性供应链的需求越来越重。</span><br style=\"outline: 0px;\"><span>柔性供应链是一种能够适应市场需求快速变化、灵活调整生产和库存的供应链管理模式。它强调以<strong>产能支撑销售</strong>而不是以库存支撑销售的理念，通过提高供应链的灵活性和响应速度来降低库存风险和提高销售效率。</span><br style=\"outline: 0px;\"><span>小单快反是柔性供应链的重要表现之一，其逻辑在于提前预测市场需求,快速准备产能,通过小批量订单快速响应市场变化,实现销售与生产的无缝对接。然而，在中国,许多企业难以实现小单快反,原因在于上下游信息分散,工厂通常只能被动接单生产,缺乏对市场需求的主动感知和预测能力。</span><br style=\"outline: 0px;\"><span>究其原因是要实现小单快反(柔性)，首先需要解决的是订单来源问题，<strong>即单从哪里来</strong>。</span><br style=\"outline: 0px;\"><span>典型企业当属shein，由于shein自己掌握销售渠道和大量出口订单，能够清晰地知道订单的来源和需求变化，同时又掌握了上游的产能，且基本都是能做小批量的小工厂，从而有效地实现了小单快反。</span><br style=\"outline: 0px;\"><span>而国内其他企业主要分两类，第一类大品牌都是大工厂出货模式；另一类是中小的零售品牌或工厂，不具备资源整合能力，这两类企业短期内很难将柔性落地。</span><br style=\"outline: 0px;\"><span>所以在实际操作中，柔性的实现十分困难。</span><span><br style=\"outline: 0px;\"></span><p><img src='https://images.tmtpost.com/uploads/images/wx/2024/08/20240802174507028408.jpg'></img></p><span></span><span>大鲸案例火热征集中，欢迎AI先锋们报名参与。</span><span>案例库也已陆续上新，前往智库官网即可阅览（点击文末“原文链接”）。</span><span><br style=\"outline: 0px;\"></span><p><br style=\"outline: 0px;\"></p><svg viewbox=\"0 0 1 1\" style=\"float:left;line-height:0;width:0;vertical-align:top;\"></svg><p><span><strong>Al能否解决鞋服行业柔性的问题?</strong></span></p><span>首先，库存产生的核心因素是设计、生产阶段对市场的不了解，从而产生错误判断。</span><br style=\"outline: 0px;\"><span><span>在设计端，目前的解决方式有\"数据驱动服装设计\"，运用Al人工智能与时装消费大数据,可以让复杂的时装消费者心理变得有迹可寻。智能化和数据化的市场大盘报表、深层次的商品爆款分析等技术手段赋能风格、年龄段、价格带等维度，提高企业的选款、选品能力，并促使企业数据部门的日常数据分析工作进一步提升效率，助于提高爆款率和</span><span>动销率</span><span>。</span></span><br style=\"outline: 0px;\"><span>此外，结合大数据、图像识别、机器学习等人工智能技术的\"智能试衣\"，支持自定义搭配样衣模板和图案，在制衣打样的前期工作中，为设计师提供样衣最终的上身效果，帮助设计师直观地判断是否需要进行下一步的样衣制作。能够快速过滤不合理的搭配，在打样环节节约一定成本。</span><br style=\"outline: 0px;\"><span>在现代服装行业中，3D技术已经实现了从服装设计到生产的全流程数字化,极大地提升了行业的生产效率和质量。然而，这一过程中也伴随着一系列挑战,如高昂的技术成本、专业人才的稀缺以及与现有工作流程的深度融合问题。</span><br style=\"outline: 0px;\"><span>另外，Al在服装设计的多个环节中都展现出了强大的应用潜力。</span><br style=\"outline: 0px;\"><span>在版型制作方面，Al可以通过学习大量版型数据,快速生成符合设计要求的版型，大大提高了设计效率。在面料设计方面，Al能够根据设计师的创意,生成多种面料纹理和图案,为设计提供更多可能性。在物理仿真和渲染环节，Al能够模拟真实面料在光线下的表现,使设计作品更加逼真生动。</span><br style=\"outline: 0px;\"><img src='https://images.tmtpost.com/uploads/images/wx/2024/08/20240802174507134706.jpg'></img><br style=\"outline: 0px;\"><span>然而，Al也存在一些局限性，如结果的不可靠性和不可控性、生成效果的逼真度。相比之下，3D技术虽然需要人工操作，耗时耗力，但人在这一过程中的可靠性和可控性更高。因此，将AI与3D技术相结合,可以充分发挥两者的优势，实现更高效、更可靠的交互和创作过程。3D与Al的深度融合将是服装时尚行业未来发展的关键所在。</span><br style=\"outline: 0px;\"><span>在生产端，国内比较主流的做法是将工厂改造、提升生产效率。</span><br style=\"outline: 0px;\"><strong><span>但本质上这些做法都不能解决企业柔性的问题</span></strong><span>。</span><br style=\"outline: 0px;\"><p><br style=\"outline: 0px;\"></p><svg viewbox=\"0 0 1 1\" style=\"float:left;line-height:0;width:0;vertical-align:top;\"></svg><p><span><strong>重新拾起产业互联网，打造服装生态体系?</strong></span></p><span>虎嗅智库观察到，多数相关技术商重新提起打造\"产业互联网平台\"，并作为核心战略方向，例如建以鞋服产业互联网发展为核心的供应链体系，打通鞋服产业上下游的关键环节，形成高效协同、价值共创的产业生态。</span><br style=\"outline: 0px;\"><img src='https://images.tmtpost.com/uploads/images/wx/2024/08/20240802174507205574.jpg'></img><br style=\"outline: 0px;\"><span>产业互联网概念于2015年首次提出并于2018年快速兴起，并不新鲜。但为何在当下节点，技术商为何要以此为战略目标。</span><br style=\"outline: 0px;\"><span>究其原因，是国内企业要想实现与shein相似的运营模式,关键在于确保数据完全掌控在自己手中，构建一个跨企业的数字化平台作为支撑。这样的平台能够使供应端实时了解销售状态，并基于销售数据即时感知生产需求，从而进行精确的预测和生产规划。</span><br style=\"outline: 0px;\"><span>生产完成后，将产品备货至仓库，同时确保库存水平既满足销售需求又不会形成积压。根据销售趋势，持续且有序地补充库存,确保供应链的灵活性和高效性。</span><br style=\"outline: 0px;\"><span>衫数科技CEO向清华对虎嗅智库表示，要实现这样的柔性供应链，单一的工厂或品牌难以独自构建跨企业的数字化基座。这需要多个相关企业之间的紧密合作与数据共享，<strong>共同构建一个高效、协同的数字化生态系统</strong>。</span><br style=\"outline: 0px;\"><span>关于产业互联网的理解与实践，有几点需要澄清和强调:</span><br style=\"outline: 0px;\"><span>首先，许多服务企业提及产业互联网时,往往未能深入其核心要点。产业互联网本质上是一个生态体系，涵盖了从销售、工厂、设计到物流、供应链金融及IP等外部资源的全面整合。这种整合旨在实现各环节在线协同，但实际操作中,难度极大。目前，无论是服装还是其他行业，多数产业互联网实践仍局限于单体企业，难以形成真正的生态模式。这些实践往往更偏向于贸易行为，而非构建一个完整的生态系统。</span><br style=\"outline: 0px;\"><span>真正的产业生态结构是去中心化的，强调资源的精准匹配。当需求产生时，无论是生产资源还是零售资源，都能迅速找到对应的对接方。基于精准匹配，产业互联网还能利用销售市场数据反向拉动生产，实现数据化分发和决策。然而，在产业互联网发展的初期，由于它面向的是整个产业而非单一企业，因此在收费和盈利模式上存在挑战。</span><br style=\"outline: 0px;\"><span>其次，产业互联网的成功与否还取决于交易体系的规模和资源整合能力。如果产业互联网无法创造足够的交易规模，或者无法有效整合零售商和供应商的资源，那么这种资源的匹配将变得困难重重。因此，扩大交易规模、提高资源整合能力是实现产业互联网成功的关键。</span><br style=\"outline: 0px;\"><span>综上所述，产业互联网的发展需要深入理解其生态本质，强调去中心化的资源匹配和精准的数据化决策。同时，还需要在交易规模和资源整合能力上取得突破,以实现真正的产业生态构建。</span><img src='https://images.tmtpost.com/uploads/images/wx/2024/08/20240802174507402169.jpg'></img><img src='https://images.tmtpost.com/uploads/images/wx/2024/08/20240802174507513749.jpg'></img><img src='https://images.tmtpost.com/uploads/images/wx/2024/08/20240802174507628736.jpg'></img><span><strong>扫码报名 申请加入</strong></span><span><strong>虎嗅智库数字化/AI落地创新实践交流群</strong></span><svg viewbox=\"0 0 1 1\" style=\"float:left;line-height:0;width:0;vertical-align:top;\"></svg><img src='https://images.tmtpost.com/uploads/images/wx/2024/08/20240802174507693579.jpg'></img><p><span><strong>关于虎嗅智库</strong></span></p><p><span>虎嗅智库是一家聚焦企业数字化、AI创新实践的新型研究服务机构，为产业智能化进程中的甲乙双方，提供有洞察性的研究报告、案例评选、以及线上会议、线下活动与参访服务，以支持企业高管在智能化、数字化方面的明智决策。</span></p><p><br style=\"outline: 0px;\"></p><svg viewbox=\"0 0 1 1\" style=\"float:left;line-height:0;width:0;vertical-align:top;\"></svg><p><br style=\"outline: 0px;\"></p><img src='https://images.tmtpost.com/uploads/images/wx/2024/08/20240802174507745141.jpg'></img><p><span><strong>我们提供的核心价值</strong></span></p><p><span>及时与优质的洞察，了解技术、了解行业、了解同行与对手；</span></p><p><span>为决策者技术与产品战略决策、产业规划、解决方案选型提供重要参考；<br style=\"outline: 0px;\">帮助市场全面了解前沿科技及所影响产业的发展状况，还有未来趋势；</span></p><p><br style=\"outline: 0px;\"></p><p><span>虎嗅智库官网：hri.huxiu.com</span></p><p><mp-style-type data-value=\"3\"></mp-style-type></p>`;
})
});
</script>
<style lang="scss" scoped>
.editor_part {
width: 100%;
z-index: 1000;
border: 1px solid #ccc;
}
</style>
尝试复现了下
- wangEditor 现在还没有对 svg 解析的支持具体看报错信息，
- 是尝试在设置值之前将 span 标签都包上一层 p 标签，wangEditor 内部的解析会将所有文本字段都包一层 p标签，解析过程可能涉及了异步导致格式错乱。
另外发现了你的内容在 wangeditor-next setHtml 中会报 no slate 的错，这是涉及 wangeditor-next 的部分，我记录在 wangeditor-next 里去。
跑了个脚本试了下，应该没问题了
function wrapSpansInParagraphs(html) {
// 创建一个 DOM 解析器
const parser = new DOMParser();
const doc = parser.parseFromString(html, 'text/html');
// 获取所有的 span 标签
const spans = doc.querySelectorAll('span');
spans.forEach(span => {
// 检查 span 是否被 p 标签包裹
if (span.parentElement.tagName !== 'P') {
// 创建一个新的 p 标签
const p = doc.createElement('p');
// 将 span 移动到 p 标签中
span.replaceWith(p);
p.appendChild(span);
}
});
// 返回处理后的 HTML
return doc.body.innerHTML;
}
<p><img src="https://images.tmtpost.com/uploads/images/wx/2024/08/20240802174506939664.jpg"></p><p><span>出品｜虎嗅智库</span></p><p><span>作者 | 于向南</span></p><p><span><br style="outline: 0px;"></span></p><p><span></span></p><p><br style="outline: 0px;"></p><p><span><strong>柔性供应链首先要知道单子从哪里来?</strong></span></p><strong><p><span>中国鞋服行业的库存压力依然很大。</span></p></strong><p><span></span></p><br style="outline: 0px;"><p><span><p><span>以运动头部品牌为例，安踏的</span></p><p><span>存货周转天数</span></p><p><span><p><span>为1233天(2023年)，存货价值高达65亿元;李宁的存货周转天数为63天(2023年)，存货价值为21.2亿元；特步的</span></p><p><span>库存周转天数</span></p><p><span>约为4.5个月，存货价值为17.94亿元。</span></p></span></p></span></p><br style="outline: 0px;"><p><span>同时，电商渠道上超高的退货率/退款率更是让鞋服行业雪上加霜。<br style="outline: 0px;"></span></p><br style="outline: 0px;"><p><span>大大小小的商家纷纷采取库存管理、优化生产计划、加强销售预测等措施，但仍难以缓解库存压力。</span></p><br style="outline: 0px;"><p><span>鞋服行业当下的核心挑战，我们可以从以下维度进行剖析。</span></p><br style="outline: 0px;"><p><span>首先，从行业结构来看，服装行业的上下游产业链现在呈现出较为<strong>明显的分散状态</strong>。这主要是由于零售渠道的多元化和线上化趋势所带来的影响。以前，传统品牌的零售主要通过连锁门店实现，而现在除了实体门店，电商、直播、私域等新兴渠道层出不穷，为服装品牌提供了更多的销售机会。</span></p><br style="outline: 0px;"><p><span>然而，这种多元化的销售模式也带来了一个问题，那就是销售通路增多，<strong>上下游之间缺乏紧密的合作关系</strong>。品牌方和供应商往往基于单个商品进行决策，而忽视了整体产业链的协同效应,导致了资源匹配的困难和效率的低下。对于主播等零售端来说，他们往往难以找到与自己风格或定位相匹配的货源；而对于供应商来说,他们也很难准确地知道哪些货品更适合哪些销售渠道。</span></p><br style="outline: 0px;"><p><span>其次，服装的个性化趋势也日益明显。在消费升级和个性化需求增长的背景下，消费者对服装的款式、材质、颜色等方面的要求越来越高。</span></p><br style="outline: 0px;"><p><span>这导致了对SKU(stock keeping unit，库存量单位)数量的巨大需求，同时也要求服装品牌具备强大的上新能力。以前一款衣服可能可以卖出几十万件，但现在即使是爆款，销量也往往只有几千件到上万件。这对上游生产和供应链管理能力提出了更高的要求。一旦预测不准，就可能导致大量的库存积压，给品牌带来严重的财务压力。</span></p><br style="outline: 0px;"><p><span>再者，服装的销售周期也在逐渐缩短。这主要得益于快时尚品牌的兴起和市场竞争的加剧。像ZARA这样的快时尚品牌，以快速响应市场变化和满足消费者需求为特点，其销售周期往往只有两周左右。而女装品牌更是将销售周期缩短到了15到到20天，男装品牌也基本在30天左右。这种快速的销售周期要求品牌必须具备强大的供应链响应能力和灵活的库存管理策略。否则，一旦销量预测失误或库存管理不当，就可能导致销售中断或库存积压。</span></p><br style="outline: 0px;"><p><span>因此，鞋服行业对柔性供应链的需求越来越重。</span></p><br style="outline: 0px;"><p><span>柔性供应链是一种能够适应市场需求快速变化、灵活调整生产和库存的供应链管理模式。它强调以<strong>产能支撑销售</strong>而不是以库存支撑销售的理念，通过提高供应链的灵活性和响应速度来降低库存风险和提高销售效率。</span></p><br style="outline: 0px;"><p><span>小单快反是柔性供应链的重要表现之一，其逻辑在于提前预测市场需求,快速准备产能,通过小批量订单快速响应市场变化,实现销售与生产的无缝对接。然而，在中国,许多企业难以实现小单快反,原因在于上下游信息分散,工厂通常只能被动接单生产,缺乏对市场需求的主动感知和预测能力。</span></p><br style="outline: 0px;"><p><span>究其原因是要实现小单快反(柔性)，首先需要解决的是订单来源问题，<strong>即单从哪里来</strong>。</span></p><br style="outline: 0px;"><p><span>典型企业当属shein，由于shein自己掌握销售渠道和大量出口订单，能够清晰地知道订单的来源和需求变化，同时又掌握了上游的产能，且基本都是能做小批量的小工厂，从而有效地实现了小单快反。</span></p><br style="outline: 0px;"><p><span>而国内其他企业主要分两类，第一类大品牌都是大工厂出货模式；另一类是中小的零售品牌或工厂，不具备资源整合能力，这两类企业短期内很难将柔性落地。</span></p><br style="outline: 0px;"><p><span>所以在实际操作中，柔性的实现十分困难。</span></p><p><span><br style="outline: 0px;"></span></p><p><img src="https://images.tmtpost.com/uploads/images/wx/2024/08/20240802174507028408.jpg"></p><p><span></span></p><p><span>大鲸案例火热征集中，欢迎AI先锋们报名参与。</span></p><p><span>案例库也已陆续上新，前往智库官网即可阅览（点击文末“原文链接”）。</span></p><p><span><br style="outline: 0px;"></span></p><p><br style="outline: 0px;"></p><p><span><strong>Al能否解决鞋服行业柔性的问题?</strong></span></p><p><span>首先，库存产生的核心因素是设计、生产阶段对市场的不了解，从而产生错误判断。</span></p><br style="outline: 0px;"><p><span><p><span>在设计端，目前的解决方式有"数据驱动服装设计"，运用Al人工智能与时装消费大数据,可以让复杂的时装消费者心理变得有迹可寻。智能化和数据化的市场大盘报表、深层次的商品爆款分析等技术手段赋能风格、年龄段、价格带等维度，提高企业的选款、选品能力，并促使企业数据部门的日常数据分析工作进一步提升效率，助于提高爆款率和</span></p><p><span>动销率</span></p><p><span>。</span></p></span></p><br style="outline: 0px;"><p><span>此外，结合大数据、图像识别、机器学习等人工智能技术的"智能试衣"，支持自定义搭配样衣模板和图案，在制衣打样的前期工作中，为设计师提供样衣最终的上身效果，帮助设计师直观地判断是否需要进行下一步的样衣制作。能够快速过滤不合理的搭配，在打样环节节约一定成本。</span></p><br style="outline: 0px;"><p><span>在现代服装行业中，3D技术已经实现了从服装设计到生产的全流程数字化,极大地提升了行业的生产效率和质量。然而，这一过程中也伴随着一系列挑战,如高昂的技术成本、专业人才的稀缺以及与现有工作流程的深度融合问题。</span></p><br style="outline: 0px;"><p><span>另外，Al在服装设计的多个环节中都展现出了强大的应用潜力。</span></p><br style="outline: 0px;"><p><span>在版型制作方面，Al可以通过学习大量版型数据,快速生成符合设计要求的版型，大大提高了设计效率。在面料设计方面，Al能够根据设计师的创意,生成多种面料纹理和图案,为设计提供更多可能性。在物理仿真和渲染环节，Al能够模拟真实面料在光线下的表现,使设计作品更加逼真生动。</span></p><br style="outline: 0px;"><img src="https://images.tmtpost.com/uploads/images/wx/2024/08/20240802174507134706.jpg"><br style="outline: 0px;"><p><span>然而，Al也存在一些局限性，如结果的不可靠性和不可控性、生成效果的逼真度。相比之下，3D技术虽然需要人工操作，耗时耗力，但人在这一过程中的可靠性和可控性更高。因此，将AI与3D技术相结合,可以充分发挥两者的优势，实现更高效、更可靠的交互和创作过程。3D与Al的深度融合将是服装时尚行业未来发展的关键所在。</span></p><br style="outline: 0px;"><p><span>在生产端，国内比较主流的做法是将工厂改造、提升生产效率。</span></p><br style="outline: 0px;"><strong><p><span>但本质上这些做法都不能解决企业柔性的问题</span></p></strong><p><span>。</span></p><br style="outline: 0px;"><p><br style="outline: 0px;"></p><p><span><strong>重新拾起产业互联网，打造服装生态体系?</strong></span></p><p><span>虎嗅智库观察到，多数相关技术商重新提起打造"产业互联网平台"，并作为核心战略方向，例如建以鞋服产业互联网发展为核心的供应链体系，打通鞋服产业上下游的关键环节，形成高效协同、价值共创的产业生态。</span></p><br style="outline: 0px;"><img src="https://images.tmtpost.com/uploads/images/wx/2024/08/20240802174507205574.jpg"><br style="outline: 0px;"><p><span>产业互联网概念于2015年首次提出并于2018年快速兴起，并不新鲜。但为何在当下节点，技术商为何要以此为战略目标。</span></p><br style="outline: 0px;"><p><span>究其原因，是国内企业要想实现与shein相似的运营模式,关键在于确保数据完全掌控在自己手中，构建一个跨企业的数字化平台作为支撑。这样的平台能够使供应端实时了解销售状态，并基于销售数据即时感知生产需求，从而进行精确的预测和生产规划。</span></p><br style="outline: 0px;"><p><span>生产完成后，将产品备货至仓库，同时确保库存水平既满足销售需求又不会形成积压。根据销售趋势，持续且有序地补充库存,确保供应链的灵活性和高效性。</span></p><br style="outline: 0px;"><p><span>衫数科技CEO向清华对虎嗅智库表示，要实现这样的柔性供应链，单一的工厂或品牌难以独自构建跨企业的数字化基座。这需要多个相关企业之间的紧密合作与数据共享，<strong>共同构建一个高效、协同的数字化生态系统</strong>。</span></p><br style="outline: 0px;"><p><span>关于产业互联网的理解与实践，有几点需要澄清和强调:</span></p><br style="outline: 0px;"><p><span>首先，许多服务企业提及产业互联网时,往往未能深入其核心要点。产业互联网本质上是一个生态体系，涵盖了从销售、工厂、设计到物流、供应链金融及IP等外部资源的全面整合。这种整合旨在实现各环节在线协同，但实际操作中,难度极大。目前，无论是服装还是其他行业，多数产业互联网实践仍局限于单体企业，难以形成真正的生态模式。这些实践往往更偏向于贸易行为，而非构建一个完整的生态系统。</span></p><br style="outline: 0px;"><p><span>真正的产业生态结构是去中心化的，强调资源的精准匹配。当需求产生时，无论是生产资源还是零售资源，都能迅速找到对应的对接方。基于精准匹配，产业互联网还能利用销售市场数据反向拉动生产，实现数据化分发和决策。然而，在产业互联网发展的初期，由于它面向的是整个产业而非单一企业，因此在收费和盈利模式上存在挑战。</span></p><br style="outline: 0px;"><p><span>其次，产业互联网的成功与否还取决于交易体系的规模和资源整合能力。如果产业互联网无法创造足够的交易规模，或者无法有效整合零售商和供应商的资源，那么这种资源的匹配将变得困难重重。因此，扩大交易规模、提高资源整合能力是实现产业互联网成功的关键。</span></p><br style="outline: 0px;"><p><span>综上所述，产业互联网的发展需要深入理解其生态本质，强调去中心化的资源匹配和精准的数据化决策。同时，还需要在交易规模和资源整合能力上取得突破,以实现真正的产业生态构建。</span></p><img src="https://images.tmtpost.com/uploads/images/wx/2024/08/20240802174507402169.jpg"><img src="https://images.tmtpost.com/uploads/images/wx/2024/08/20240802174507513749.jpg"><img src="https://images.tmtpost.com/uploads/images/wx/2024/08/20240802174507628736.jpg"><p><span><strong>扫码报名 申请加入</strong></span></p><p><span><strong>虎嗅智库数字化/AI落地创新实践交流群</strong></span></p><img src="https://images.tmtpost.com/uploads/images/wx/2024/08/20240802174507693579.jpg"><p><span><strong>关于虎嗅智库</strong></span></p><p><span>虎嗅智库是一家聚焦企业数字化、AI创新实践的新型研究服务机构，为产业智能化进程中的甲乙双方，提供有洞察性的研究报告、案例评选、以及线上会议、线下活动与参访服务，以支持企业高管在智能化、数字化方面的明智决策。</span></p><p><br style="outline: 0px;"></p><p><br style="outline: 0px;"></p><img src="https://images.tmtpost.com/uploads/images/wx/2024/08/20240802174507745141.jpg"><p><span><strong>我们提供的核心价值</strong></span></p><p><span>及时与优质的洞察，了解技术、了解行业、了解同行与对手；</span></p><p><span>为决策者技术与产品战略决策、产业规划、解决方案选型提供重要参考；<br style="outline: 0px;">帮助市场全面了解前沿科技及所影响产业的发展状况，还有未来趋势；</span></p><p><br style="outline: 0px;"></p><p><span>虎嗅智库官网：hri.huxiu.com</span></p><p><mp-style-type data-value="3"></mp-style-type></p>
我这边也存在类似的问题，用下面的字符串，调用 editor.setHtml， p h1，以及 第2个div里的h2和div里面的内容，都会显示在同一行 "@wangeditor/editor": "^5.1.23", "@wangeditor/editor-for-vue": "^5.1.12", "vue": "^3.4.15",
<div class="header">
<p class="case-no">入库编号 2024-18-2-490-002</p>
<h1>**诉北京某科技公司劳动争议案</h1>
</div>
<div class="section">
<h2>关键词</h2>
<div class="keywords">
<p>民事/ 劳动争议/ 隐形加班/ 社交媒体/ 提供实质工作</p>
</div>
</div>
<template>
<el-button type="primary" size="default" @click="insertTxt">插入</el-button>
<div :style="{ border: '1px solid #ccc' }">
<Toolbar
style="border-bottom: 1px solid #ccc"
:editor="editorRef"
:defaultConfig="toolbarConfig"
:mode="mode"
/>
<Editor
style="height: 500px; overflow-y: hidden"
v-model="valueHtml"
:defaultConfig="editorConfig"
:mode="mode"
@onCreated="handleCreated"
@onChange="handleChange"
@onDestroyed="handleDestroyed"
@onFocus="handleFocus"
@onBlur="handleBlur"
@customAlert="customAlert"
@customPaste="customPaste"
/>
</div>
</template>
<script lang="ts" setup>
import "@wangeditor/editor/dist/css/style.css"; // 引入 css
import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
const insertTxt = () => {
const editor = editorRef.value; // 获取 editor ，必须等待它渲染完之后
if (editor == null) return;
editor.insertText("hello world"); // 执行 editor API
};
// 编辑器实例，必须用 shallowRef
const mode = ref("default");
const editorRef = shallowRef();
const editorWidth = ref("50%");
const editorHeight = ref("600px");
const contentWidth = ref("50%");
const contentHeight = ref("500px");
// 内容 HTML
const valueHtml = ref("<p>hello</p>");
// 模拟 ajax 异步获取内容
onMounted(() => {
setTimeout(() => {
let str=`
<div class="header">
<p class="case-no">入库编号 2024-18-2-490-002</p>
<h1>**诉北京某科技公司劳动争议案</h1>
</div>
<div class="section">
<h2>关键词</h2>
<div class="keywords">
<p>民事/ 劳动争议/ 隐形加班/ 社交媒体/ 提供实质工作</p>
</div>
</div>
`
valueHtml.value =str;
}, 1500);
});
const toolbarConfig = {};
const editorConfig = { placeholder: "请输入内容..." };
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
const editor = editorRef.value;
if (editor == null) return;
editor.destroy();
});
const handleCreated = (editor: any) => {
editorRef.value = editor; // 记录 editor 实例，重要！
};
const handleChange = (editor) => {
console.log("change:", editor.children);
};
const handleDestroyed = (editor) => {
console.log("destroyed", editor);
};
const handleFocus = (editor) => {
console.log("focus", editor);
};
const handleBlur = (editor) => {
console.log("blur", editor);
};
const customAlert = (info, type) => {
alert(`【自定义提示】${type} - ${info}`);
};
const customPaste = (editor, event, callback) => {
console.log("ClipboardEvent 粘贴事件对象", event);
// const html = event.clipboardData.getData('text/html') // 获取粘贴的 html
// const text = event.clipboardData.getData('text/plain') // 获取粘贴的纯文本
// const rtf = event.clipboardData.getData('text/rtf') // 获取 rtf 数据（如从 word wsp 复制粘贴）
// 自定义插入内容
editor.insertText("xxx");
// 返回 false ，阻止默认粘贴行为
event.preventDefault();
callback(false); // 返回值（注意，vue 事件的返回值，不能用 return）
// 返回 true ，继续默认的粘贴行为
// callback(true)
};
</script>
<style scoped></style>
这些标签是爬取的，想保持原页面的样式，所以不能删除。或者用下面的模版生成页面内容（只留body部分），再复制给editor.html，但这样做 editor显示样式变了，有解决办法吗
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>例18号</title>
<style>
/* 这里是样式 */
</style>
</head>
<body>
<div class="container">
<div class="header">
<p class="case-no">入库编号 #{cjq_no}</p>
<h1>#{cjq_title}</h1>
</div>
<div class="section">
<h2>关键词</h2>
<div class="keywords">
<p>#{cjq_keyword}</p>
</div>
</div>
</div>
</body>
</html>
@teemol168 div标签保留不了，富文本编辑器想要兼容性好就得进行必要的 normlize，把粘贴进来的内容格式化为自己内部的格式。不然不方便处理的。 class 样式也不会保留，只会保留必要的 style 及其它属性。
能否两种方式都支持，一是Editor自身的样式设置；另一个是 支持外部样式和布局，这个对自定义样式且有很多页面特别方便，因为不用再一个个重修修改页面样式。