为什么marked.js解析复选框会在外面包裹一层
  • 标签?有办法去掉这个
  • 包裹吗?
  • 在同一时空相遇 2020-07-14 10:36:05
    在前端用了marked.js来解析markdown语句,

    但是我发现解析复选框时会在clickbox外面包一层<li>标签,

    就导致原本的复选框布局变得非常难看。

    我认为是marked.js先将 "- [ ]" 里的 "-" 解析成了<li>标签

    然后又接着解析成复选框

    但是我看不懂marked.js的源码

    有没有办法让他不解析出<li>标签?

    或者有没有比 marked.js 更好用的插件呢?

    感谢!!!

    ---

    markdown语句:


     
    - [x] 132
    - [ ] 2r
     


    解析效果如图:



    生成的结构:


     
    <ul>
    <li>
    <input checked="" disabled="" type="checkbox"> 132
    </li>
    <li>
    <input disabled="" type="checkbox"> 2r
    </li>
    </ul>
     
    ...全文
    2447 5 打赏 收藏 转发到动态 举报
    写回复
    用AI写文章
    5 条回复
    切换为时间正序
    请发表友善的回复…
    发表回复
    jio可 2020-07-15
    • 打赏
    • 举报
    回复
    vue 项目可以看看mavon-editor
    • 打赏
    • 举报
    回复
    谢谢,但是ul标签是clickbox的父级元素,要做到这点看来只能不停地用js遍历加样式了。因为markedjs解析出来的元素是没有任何类名的。可以看我发的原帖,里面有解析出来的dom结构。
    jio可 2020-07-14
    • 打赏
    • 举报
    回复
    写个样式去掉就可以了list-style:none; ul{ list-style:none; } 写在解析的markdown dom上面,其实写全局应该也可以。一般都不会需要list-style
    jio可 2020-07-14
    • 打赏
    • 举报
    回复
    找到解析后的复选框dom查看class名是什么然后针对这个class下面的ul添加样式 ps class="checkbox-panel" .checkbox-panel ul {list-style:none;}
    • 打赏
    • 举报
    回复
    谢谢,复选框前面的小圆点是没有了。 不过这样做的话,正常的无序列表的小圆点标记也没了
    
     
    - [ ] 复选框1
    - [x] 复选框2
    
    - 1
    - 2
     
    

    87,919

    社区成员

    发帖
    与我相关
    我的任务
    社区描述
    Web 开发 JavaScript
    社区管理员
    • JavaScript
    • 无·法
    加入社区
    • 近7日
    • 近30日
    • 至今
    社区公告
    暂无公告

    试试用AI创作助手写篇文章吧