关于 X5 编辑器粘贴多级列表异常的澄清与建议 New

xiao9469 · 发表于昨天 15:18

马上注册，免费下载更多dz插件网资源。

您需要登录才可以下载或查看，没有账号？立即注册

×

各位好，

看到此前关于“粘贴多级列表出现重复和序号错乱”的讨论中，有观点认为这是“Word 兼容性问题”或“JSON 编辑器天然不支持 HTML 粘贴”。我想就此稍作澄清，以便更准确地定位问题：

问题来源并非 Word，而是从任意标准网页（包括 Discuz! X3.5 自身帖子页面）复制的普通 HTML 列表（如 <ul><li><ul><li>…</li></ul></li></ul>）。这类结构是 Web 通用规范，不应因编辑器内部采用 JSON 存储而无法正确解析。
核心诉求不是“完美还原格式”，而是内容不被篡改——当前出现的子项重复、层级丢失、无序变有序等问题，已属于语义错误，影响基本可用性。
主流 JSON 区块编辑器（如 WordPress Gutenberg、Notion 等）均能正确处理此类 HTML 粘贴，说明这并非架构限制，而是解析逻辑可优化的空间。
我们理解 X5 强调扩展性与生态开放，但默认编辑器仍需保障基础发帖体验。若连标准 HTML 列表都无法可靠处理，普通站长将难以顺利过渡到新版本。

建议官方能否将此场景纳入编辑器粘贴解析的测试用例？哪怕后续通过插件优化，也希望能先确认这是一个可复现的解析缺陷，而非“预期行为”。

感谢团队对 X5 的投入，也期待产品在现代化的同时，继续守护 Discuz! 一贯的实用性和稳定性。

©DZ插件网所发布的一切资源仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站内容为站长个人技术研究记录或网络，不提供用户交互功能，所有内容版权归原作者所有。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，得到更好的正版服务。
您在本站任何的赞助购买、下载、查阅、回复等行为等均表示接受并同意签订《DZ插件网免责声明协议》。
如有侵权请邮件与我们联系处理: discuzaddons@vip.qq.com 并出示相关证明以便删除。敬请谅解！

婷姐 · 发表于昨天 15:19

如果需要把Word的内容比较方便的进入编辑器，推荐使用我们的这个插件~~
https://addon.dismall.com/plugins/hl_wordimport.html

独家记忆 · 发表于昨天 15:19

注意，我并不是为自己的网站寻求解决方案，而是给官网的X5编辑器寻找BUG。

我的X3.5运行正常，发帖也正常，详见此帖的比较图：https://www.dismall.com/thread-27399-1-1.html

IT618发布 · 发表于昨天 15:19

看到了关键词word,仅为推荐插件，如不需要，请忽略

独家记忆 · 发表于昨天 15:20

没完没了的有意义吗？技术上的事情，跟你说了你又不懂也不听，这样钻牛角尖一直发帖多让人讨厌呀。

我从豆包这些AI生成的内容，复制粘贴到wps里都经常是混乱的，更别说一个在线编辑器了。

新的json编辑器属于区块编辑器，技术上完全不同了，老的HTML内容粘贴进去，比如有序列表无序李彪，不是解析的事情，而是需要变成单独一个内容块，本身就存在格式屏障。纠结于这个问题毫无意义，你可以选择继续用bbcode编辑器，就不存在这些问题了

婷姐 · 发表于昨天 15:20

这是用豆包生成的无序列表、有序列表标准代码样式，全文粘贴过来没有发现问题，要区分是否为  ul li、ol li，很多网站包括discuz老编辑器列表都是 ul li，通过css样式指定的是有序还是无序，这粘贴过来都是ul li，怎么区分？

到此为止吧，能优化的官方肯定会尽力优化，编辑器是个复杂问题，要一直揪着一个细节不放，就没完了，市面上各种编辑器都有各种不完美的地方。


            关于 X5 编辑器粘贴多级列表异常的澄清与建议
New
编辑器,粘贴,列表,X5,HTML

         豆包生成的代码预览截图1



            关于 X5 编辑器粘贴多级列表异常的澄清与建议
New
编辑器,粘贴,列表,X5,HTML

            豆包生成的代码预览截图2



            关于 X5 编辑器粘贴多级列表异常的澄清与建议
New
编辑器,粘贴,列表,X5,HTML

         粘贴后

            粘贴后


.ce-block { margin-bottom: 20px;}.ce-block__content,.ce-toolbar__content { /* max-width:calc(100% - 50px) */ margin-left: auto; margin-right: auto;}.ce-paragraph { line-height: 1.6em; outline: none; text-indent: 2em; font-size: 16px;}.ce-paragraph--right { text-align: right;}.ce-paragraph--center { text-align: center;}.ce-paragraph--left { text-align: left;}.ce-paragraph--justify { text-align: justify;}.ce-paragraph-text-indent { text-align: justify;}.ce-paragraph[data-placeholder]:empty::before{  content: attr(data-placeholder);  color: #707684;  font-weight: normal;  opacity: 0;}/** Show placeholder at the first paragraph if Editor is empty */.codex-editor--empty .ce-block:first-child .ce-paragraph[data-placeholder]:empty::before {  opacity: 1;}.codex-editor--toolbox-opened .ce-block:first-child .ce-paragraph[data-placeholder]:empty::before,.codex-editor--empty .ce-block:first-child .ce-paragraph[data-placeholder]:empty:focus::before {  opacity: 0;}.ce-paragraph p:first-of-type{ margin-top: 0;}.ce-paragraph p:last-of-type{ margin-bottom: 0;}.svg-icon { width: 1em; height: 1em;}.svg-icon path,.svg-icon polygon,.svg-icon rect { fill: #4691f6;}.svg-icon circle { stroke: #4691f6; stroke-width: 1;}.ce-block { margin-bottom: 20px;}.ce-block__content,.ce-toolbar__content { /* max-width:calc(100% - 50px) */ margin-left: auto; margin-right: auto;}.image-tool {  --bg-color: #cdd1e0;  --front-color: #388ae5;  --border-color: #e8e8eb;}  .image-tool__image { border-radius: 3px; overflow: hidden; margin-bottom: 10px;  }  .image-tool__image-picture {    max-width: 100%;    vertical-align: bottom;    display: block;    margin-left: auto;    margin-right: auto; }  .image-tool__image-preloader {    width: 50px;    height: 50px;    border-radius: 50%;    background-size: cover;    margin: auto;    position: relative;    background-color: var(--bg-color);    background-position: center center; }  .image-tool__image-preloader::after {       content: "";       position: absolute;       z-index: 3;       width: 60px;       height: 60px;       border-radius: 50%;       border: 2px solid var(--bg-color);       border-top-color: var(--front-color);       left: 50%;       top: 50%;       margin-top: -30px;       margin-left: -30px;       animation: image-preloader-spin 2s infinite linear;       box-sizing: border-box;    }  .image-tool__caption[contentEditable="true"][data-placeholder]::before {    position: absolute !important;    content: attr(data-placeholder);    color: #707684;    font-weight: normal;    display: none; }  .image-tool__caption[contentEditable="true"][data-placeholder]:empty::before {       display: block;    }  .image-tool__caption[contentEditable="true"][data-placeholder]:empty:focus::before {       display: none;    }  .image-tool--empty .image-tool__image {    display: none; }  .image-tool--empty .image-tool__caption, .image-tool--loading .image-tool__caption {    display: none; }  .image-tool .cdx-button { display: flex; align-items: center; justify-content: center;  }  .image-tool .cdx-button svg {    height: auto;    margin: 0 6px 0 0; }  .image-tool--filled .cdx-button {    display: none; }  .image-tool--filled .image-tool__image-preloader {       display: none;    }  .image-tool--loading .image-tool__image {    min-height: 200px;    display: flex;    border: 1px solid var(--border-color);    background-color: #fff; }  .image-tool--loading .image-tool__image-picture {       display: none;    }  .image-tool--loading .cdx-button {    display: none; }  /** * Tunes * ---------------- */  .image-tool--withBorder .image-tool__image {    border: 1px solid var(--border-color); }  .image-tool--withBackground .image-tool__image {    padding: 15px;    background: var(--bg-color); }  .image-tool--withBackground .image-tool__image-picture {       max-width: 60%;       margin: 0 auto;    }  .image-tool--stretched .image-tool__image-picture {       width: 100%;    }  .image-tool__caption { text-align: center; font-size: 14px; color: #a3a3a3; }@keyframes image-preloader-spin {  0% { transform: rotate(0deg);  }  100% { transform: rotate(360deg);  }}.inline-code {  background: rgba(250, 239, 240, 0.78);  color: #b44437;  padding: 3px 4px;  border-radius: 5px;  margin: 0 1px;  font-family: inherit;  font-size: 0.86em;  font-weight: 500;  letter-spacing: 0.3px;}

TyCoding · 发表于昨天 15:21

再看个图，discuz老编辑器发的有序列表、无序列表复制粘贴到 wps 的 word 里，你看下效果。问题在于复制的原内容都是ul li，没有区别。

关于 X5 编辑器粘贴多级列表异常的澄清与建议
New
编辑器,粘贴,列表,X5,HTML

         discuz老编辑器发的有序列表、无序列表



            关于 X5 编辑器粘贴多级列表异常的澄清与建议
New
编辑器,粘贴,列表,X5,HTML

            复制粘贴到 wps 的 word 里


.ce-block { margin-bottom: 20px;}.ce-block__content,.ce-toolbar__content { /* max-width:calc(100% - 50px) */ margin-left: auto; margin-right: auto;}.ce-paragraph { line-height: 1.6em; outline: none; text-indent: 2em; font-size: 16px;}.ce-paragraph--right { text-align: right;}.ce-paragraph--center { text-align: center;}.ce-paragraph--left { text-align: left;}.ce-paragraph--justify { text-align: justify;}.ce-paragraph-text-indent { text-align: justify;}.ce-paragraph[data-placeholder]:empty::before{  content: attr(data-placeholder);  color: #707684;  font-weight: normal;  opacity: 0;}/** Show placeholder at the first paragraph if Editor is empty */.codex-editor--empty .ce-block:first-child .ce-paragraph[data-placeholder]:empty::before {  opacity: 1;}.codex-editor--toolbox-opened .ce-block:first-child .ce-paragraph[data-placeholder]:empty::before,.codex-editor--empty .ce-block:first-child .ce-paragraph[data-placeholder]:empty:focus::before {  opacity: 0;}.ce-paragraph p:first-of-type{ margin-top: 0;}.ce-paragraph p:last-of-type{ margin-bottom: 0;}.svg-icon { width: 1em; height: 1em;}.svg-icon path,.svg-icon polygon,.svg-icon rect { fill: #4691f6;}.svg-icon circle { stroke: #4691f6; stroke-width: 1;}.ce-block { margin-bottom: 20px;}.ce-block__content,.ce-toolbar__content { /* max-width:calc(100% - 50px) */ margin-left: auto; margin-right: auto;}.image-tool {  --bg-color: #cdd1e0;  --front-color: #388ae5;  --border-color: #e8e8eb;}  .image-tool__image { border-radius: 3px; overflow: hidden; margin-bottom: 10px;  }  .image-tool__image-picture {    max-width: 100%;    vertical-align: bottom;    display: block;    margin-left: auto;    margin-right: auto; }  .image-tool__image-preloader {    width: 50px;    height: 50px;    border-radius: 50%;    background-size: cover;    margin: auto;    position: relative;    background-color: var(--bg-color);    background-position: center center; }  .image-tool__image-preloader::after {       content: "";       position: absolute;       z-index: 3;       width: 60px;       height: 60px;       border-radius: 50%;       border: 2px solid var(--bg-color);       border-top-color: var(--front-color);       left: 50%;       top: 50%;       margin-top: -30px;       margin-left: -30px;       animation: image-preloader-spin 2s infinite linear;       box-sizing: border-box;    }  .image-tool__caption[contentEditable="true"][data-placeholder]::before {    position: absolute !important;    content: attr(data-placeholder);    color: #707684;    font-weight: normal;    display: none; }  .image-tool__caption[contentEditable="true"][data-placeholder]:empty::before {       display: block;    }  .image-tool__caption[contentEditable="true"][data-placeholder]:empty:focus::before {       display: none;    }  .image-tool--empty .image-tool__image {    display: none; }  .image-tool--empty .image-tool__caption, .image-tool--loading .image-tool__caption {    display: none; }  .image-tool .cdx-button { display: flex; align-items: center; justify-content: center;  }  .image-tool .cdx-button svg {    height: auto;    margin: 0 6px 0 0; }  .image-tool--filled .cdx-button {    display: none; }  .image-tool--filled .image-tool__image-preloader {       display: none;    }  .image-tool--loading .image-tool__image {    min-height: 200px;    display: flex;    border: 1px solid var(--border-color);    background-color: #fff; }  .image-tool--loading .image-tool__image-picture {       display: none;    }  .image-tool--loading .cdx-button {    display: none; }  /** * Tunes * ---------------- */  .image-tool--withBorder .image-tool__image {    border: 1px solid var(--border-color); }  .image-tool--withBackground .image-tool__image {    padding: 15px;    background: var(--bg-color); }  .image-tool--withBackground .image-tool__image-picture {       max-width: 60%;       margin: 0 auto;    }  .image-tool--stretched .image-tool__image-picture {       width: 100%;    }  .image-tool__caption { text-align: center; font-size: 14px; color: #a3a3a3; }@keyframes image-preloader-spin {  0% { transform: rotate(0deg);  }  100% { transform: rotate(360deg);  }}.inline-code {  background: rgba(250, 239, 240, 0.78);  color: #b44437;  padding: 3px 4px;  border-radius: 5px;  margin: 0 1px;  font-family: inherit;  font-size: 0.86em;  font-weight: 500;  letter-spacing: 0.3px;}