• 富文本编辑器--获取JSON


    获取 JSON 格式的内容

    可以通过editor.txt.getJSON获取 JSON 格式的编辑器的内容,v3.0.14开始支持,示例如下

    <div id="div1">
        <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
        <img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_ca79a146.png" style="max-width:100%;"/>
    </div>
    <button id="btn1">getJSON</button>
    
    <script type="text/javascript" src="/wangEditor.js"></script>
    <script type="text/javascript">
        var E = window.wangEditor
        var editor = new E('#div1')
        editor.create()
    
        document.getElementById('btn1').addEventListener('click', function () {
            var json = editor.txt.getJSON()  // 获取 JSON 格式的内容
            var jsonStr = JSON.stringify(json)
            console.log(json)
            console.log(jsonStr)
        })
    </script>
    

    如果编辑器区域的 html 内容是如下:

    <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
    <img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_ca79a146.png" style="max-width:100%;"/>
    

    那么获取的 JSON 格式就如下:

    [
        {
            "tag": "p",
            "attrs": [],
            "children": [
                "欢迎使用 ",
                {
                    "tag": "b",
                    "attrs": [],
                    "children": [
                        "wangEditor"
                    ]
                },
                " 富文本编辑器"
            ]
        },
        {
            "tag": "img",
            "attrs": [
                {
                    "name": "src",
                    "value": "https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_ca79a146.png"
                },
                {
                    "name": "style",
                    "value": "max-100%;"
                }
            ],
            "children": []
        },
        {
            "tag": "p",
            "attrs": [],
            "children": [
                {
                    "tag": "br",
                    "attrs": [],
                    "children": []
                }
            ]
        }
    ]

    实例:
     

    本文仅提供参考,是本人闲时所写笔记,如有错误,还请赐教,作者:阿蒙不萌,大家可以随意转载

  • 相关阅读:
    用网线连接Windows和Linux台式机,并实现Linux共享Windows的WiFi网络
    设计模式之建造者设计模式
    Mob之社会化分享集成ShareSDK
    Mob 之 短信验证集成 SMSSDK
    天地图值之添加覆盖物
    天地图之定位信息详解
    Material Design 组件之NavigationView
    Material Design 组件之 CollapsingToolbarLayout
    Material Design 组件之 AppBarLayout
    Material Design 组件之 FloatingActionButton
  • 原文地址:https://www.cnblogs.com/huchong-bk/p/11512735.html
Copyright © 2020-2023  润新知