2019-02-21 22:32:20 +08:00
|
|
|
<!DOCTYPE HTML>
|
2020-09-23 16:23:38 +08:00
|
|
|
<html lang="en">
|
2019-02-21 22:32:20 +08:00
|
|
|
<head>
|
2020-09-23 16:23:38 +08:00
|
|
|
<meta charset="utf-8">
|
|
|
|
|
|
2019-02-21 22:32:20 +08:00
|
|
|
<title>JSONEditor | Basic usage</title>
|
|
|
|
|
|
|
|
|
|
<link href="../dist/jsoneditor.css" rel="stylesheet" type="text/css">
|
|
|
|
|
<script src="../dist/jsoneditor.js"></script>
|
|
|
|
|
|
|
|
|
|
<style type="text/css">
|
2019-08-29 21:45:32 +08:00
|
|
|
#jsoneditor {
|
|
|
|
|
width: 500px;
|
|
|
|
|
height: 500px;
|
|
|
|
|
}
|
2019-02-21 22:32:20 +08:00
|
|
|
|
2019-08-29 21:45:32 +08:00
|
|
|
.submenu-highlight {
|
|
|
|
|
background-color: yellow !important;
|
|
|
|
|
}
|
2019-02-21 22:32:20 +08:00
|
|
|
|
2019-08-29 21:45:32 +08:00
|
|
|
.rainbow {
|
|
|
|
|
background: linear-gradient(to right, cyan, yellow, violet, green, orange, blue) !important;
|
|
|
|
|
}
|
2019-02-21 22:32:20 +08:00
|
|
|
|
2019-08-29 21:45:32 +08:00
|
|
|
.example-class > .jsoneditor-icon {
|
|
|
|
|
background-position: -168px -48px; /* warning triangle */
|
|
|
|
|
}
|
2019-02-21 22:32:20 +08:00
|
|
|
|
2019-08-29 21:45:32 +08:00
|
|
|
.dotty {
|
|
|
|
|
border-top : 1px dotted #e5e5e5 !important;
|
|
|
|
|
}
|
2019-02-21 22:32:20 +08:00
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
2019-08-29 21:45:32 +08:00
|
|
|
<h1>Context Menu Customization</h1>
|
|
|
|
|
<p>
|
|
|
|
|
This example demonstrates the use of the onCreateMenu callback option, which
|
|
|
|
|
allows you to customise context menus after they are created but before they
|
|
|
|
|
are shown to the user. You can alter/delete existing items as well as
|
|
|
|
|
adding new menu items. See the source code for this example for more
|
|
|
|
|
information.
|
|
|
|
|
</p>
|
|
|
|
|
<div id="jsoneditor"></div>
|
|
|
|
|
|
|
|
|
|
<script>
|
2019-02-21 22:32:20 +08:00
|
|
|
// create the editor
|
2019-08-29 21:45:32 +08:00
|
|
|
const container = document.getElementById('jsoneditor')
|
2019-02-21 22:32:20 +08:00
|
|
|
|
2019-08-29 21:45:32 +08:00
|
|
|
const options = {
|
2019-02-21 22:32:20 +08:00
|
|
|
// onCreateMenu allows us to register a call back function to customise
|
|
|
|
|
// the context menu. The callback accpets two parameters, items and path.
|
|
|
|
|
// Items is an array containing the current menu items, and path
|
|
|
|
|
// (if present) contains the path of the current node (as an array).
|
|
|
|
|
// The callback should return the modified (or unmodified) list of menu
|
|
|
|
|
// items.
|
|
|
|
|
|
|
|
|
|
// Every time the user clicks on a context menu button, the menu
|
|
|
|
|
// is created from scratch and this callback is called.
|
|
|
|
|
|
2019-08-29 21:45:32 +08:00
|
|
|
onCreateMenu: function (items, node) {
|
|
|
|
|
const path = node.path
|
2019-02-21 22:32:20 +08:00
|
|
|
|
2019-05-29 22:29:29 +08:00
|
|
|
// log the current items and node for inspection
|
2019-08-29 21:45:32 +08:00
|
|
|
console.log('items:', items, 'node:', node)
|
2019-02-21 22:32:20 +08:00
|
|
|
|
|
|
|
|
// We are going to add a menu item which returns the current node path
|
|
|
|
|
// as a jq path selector ( https://stedolan.github.io/jq/ ). First we
|
|
|
|
|
// will create a function, and then We will connect this function to
|
|
|
|
|
// the menu item click property in a moment.
|
|
|
|
|
|
|
|
|
|
function pathTojq() {
|
2019-08-29 21:45:32 +08:00
|
|
|
let pathString = ''
|
2019-02-21 22:32:20 +08:00
|
|
|
|
|
|
|
|
path.forEach(function (segment, index) { // path is an array, loop through it
|
2019-08-29 21:45:32 +08:00
|
|
|
if (typeof segment == 'number') { // format the selector for array indexs ...
|
|
|
|
|
pathString += '[' + segment + ']'
|
2019-02-21 22:32:20 +08:00
|
|
|
} else { // ... or object keys
|
2019-08-29 21:45:32 +08:00
|
|
|
pathString += '."' + segment + '"'
|
2019-02-21 22:32:20 +08:00
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
|
2019-08-29 21:45:32 +08:00
|
|
|
alert(pathString) // show it to the user.
|
|
|
|
|
}
|
2019-02-21 22:32:20 +08:00
|
|
|
|
|
|
|
|
// Create a new menu item. For our example, we only want to do this
|
|
|
|
|
// if there is a path (in the case of appendnodes (for new objects)
|
|
|
|
|
// path is null until a node is created)
|
|
|
|
|
if (path) {
|
|
|
|
|
// Each item in the items array represents a menu item,
|
|
|
|
|
// and requires the following details :
|
|
|
|
|
|
2019-08-29 21:45:32 +08:00
|
|
|
items.push({
|
|
|
|
|
text: 'jq Path', // the text for the menu item
|
|
|
|
|
title: 'Show the jq path for this node', // the HTML title attribute
|
|
|
|
|
className: 'example-class', // the css class name(s) for the menu item
|
|
|
|
|
click: pathTojq // the function to call when the menu item is clicked
|
|
|
|
|
})
|
|
|
|
|
}
|
2019-02-21 22:32:20 +08:00
|
|
|
|
|
|
|
|
|
|
|
|
|
// Now we will iterate through the menu items, which includes the items
|
|
|
|
|
// created by jsoneditor, and the new item we added above. In this
|
|
|
|
|
// example we will just alter the className property for the items, but
|
|
|
|
|
// you can alter any property (e.g. the click callback, text property etc.)
|
|
|
|
|
// for any item, or even delete the whole menu item.
|
2019-03-02 17:26:39 +08:00
|
|
|
items.forEach(function (item, index, items) {
|
2019-08-29 21:45:32 +08:00
|
|
|
if ("submenu" in item) {
|
2019-02-21 22:32:20 +08:00
|
|
|
// if the item has a submenu property, it is a submenu heading
|
|
|
|
|
// and contains another array of menu items. Let's colour
|
|
|
|
|
// that yellow...
|
2019-08-29 21:45:32 +08:00
|
|
|
items[index].className += ' submenu-highlight'
|
2019-02-21 22:32:20 +08:00
|
|
|
} else {
|
|
|
|
|
// if it's not a submenu heading, let's make it colorful
|
2019-08-29 21:45:32 +08:00
|
|
|
items[index].className += ' rainbow'
|
2019-02-21 22:32:20 +08:00
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
// note that the above loop isn't recursive, so it only alters the classes
|
|
|
|
|
// on the top-level menu items. To also process menu items in submenus
|
|
|
|
|
// you should iterate through any "submenu" arrays of items if the item has one.
|
|
|
|
|
|
|
|
|
|
// next, just for fun, let's remove any menu separators (again just at the
|
|
|
|
|
// top level menu). A menu separator is an item with a type : 'separator'
|
|
|
|
|
// property
|
2019-03-02 17:26:39 +08:00
|
|
|
items = items.filter(function (item) {
|
2019-08-29 21:45:32 +08:00
|
|
|
return item.type !== 'separator'
|
|
|
|
|
})
|
2019-02-21 22:32:20 +08:00
|
|
|
|
|
|
|
|
// finally we need to return the items array. If we don't, the menu
|
|
|
|
|
// will be empty.
|
2019-08-29 21:45:32 +08:00
|
|
|
return items
|
2019-02-21 22:32:20 +08:00
|
|
|
}
|
2019-08-29 21:45:32 +08:00
|
|
|
}
|
2019-02-21 22:32:20 +08:00
|
|
|
|
2019-08-29 21:45:32 +08:00
|
|
|
const json = {
|
2019-03-02 17:26:39 +08:00
|
|
|
'array': [1, 2, 3],
|
|
|
|
|
'boolean': true,
|
|
|
|
|
'color': '#82b92c',
|
|
|
|
|
'null': null,
|
|
|
|
|
'number': 123,
|
|
|
|
|
'object': {'a': 'b', 'c': 'd'},
|
|
|
|
|
'string': 'Hello World'
|
2019-08-29 21:45:32 +08:00
|
|
|
}
|
2019-02-21 22:32:20 +08:00
|
|
|
|
2019-08-29 21:45:32 +08:00
|
|
|
const editor = new JSONEditor(container, options, json)
|
2019-02-21 22:32:20 +08:00
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
