+
80
-

js有没有可视化编辑json配置文件的插件?

请问js有没有可视化编辑json配置文件的插件?

网友回复

+
0
-

可以试试json-editor

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Basic JSON Editor Example</title>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jsoneditor.min.js"></script>
</head>

<body>
    <h1>Basic JSON Editor Example</h1>

    <div id='editor_holder'></div>
    <button id='submit'>Submit (console.log)</button>

    <script>
        // Initialize the editor with a JSON schema
          var editor = new JSONEditor(document.getElementById('editor_holder'),{
            schema: {
              type: "object",
              title: "Car",
              properties: {
                make: {
                  type: "string",
                  enum: [
                    "Toyota",
                    "BMW",
                    "Honda",
                    "Ford",
                    "Chevy",
                    "VW"
                  ]
                },
                model: {
                  type: "string"
                },
                year: {
                  type: "integer",
                  enum: [
                    1995,1996,1997,1998,1999,
                    2000,2001,2002,2003,2004,
                    2005,2006,2007,2008,2009,
                    2010,2011,2012,2013,2014
                  ],
                  default: 2008
                }
              }
            }
          });
          
          // Hook up the submit button to log to the console
          document.getElementById('submit').addEventListener('click',function() {
            // Get the value from the editor
            console.log(editor.getValue());
          });
    </script>
</body>

</html>

+
0
-

还有一个vue-json-schema-form,github地址https://github.com/lljj-x/vue-json-schema-form

我知道答案,我要回答