Skip to content

李洋 / 消息系统

Go to a project
Find file
Normal viewHistoryPermalink
Switch branch/tag
JSON-Editor.html 66.8 KB
Initial commit
60b5dc25
 
李洋 committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701 702 703 704 705 706 707 708 709 710 711 712 713 714 715 716 717 718 719 720 721 722 723 724 725 726 727 728 729 730 731 732 733 734 735 736 737 738 739 740 741 742 743 744 745 746 747 748 749 750 751 752 753 754 755 756 757 758 759 760 761 762 763 764 765 766 767 768 769 770 771 772 773 774 775 776 777 778 779 780 781 782 783 784 785 786 787 788 789 790 791 792 793 794 795 796 797 798 799 800 801 802 803 804 805 806 807 808 809 810 811 812 813 814 815 816 817 818 819 820 821 822 823 824 825 826 827 828 829 830 831 832 833 834 835 836 837 838 839 840 841 842 843 844 845 846 847 848 849 850 851 852 853 854 855 856 857 858 859 860 861 862 863 864 865 866 867 868 869 870 871 872 873 874 875 876 877 878 879 880 881 882 883 884 885 886 887 888 889 890 891 892 893 894 895 896 897 898 899 900 901 902 903 904 905 906 907 908 909 910 911 912 913 914 915 916 917 918 919 920 921 922 923 924 925 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <link href="/css/bootstrap.min.css" rel="stylesheet">
  <link href="/font-awesome/css/font-awesome.css" rel="stylesheet">
  <link href="/css/style.css" rel="stylesheet">
  <title>JSON Editor 中文文档</title>
</head>
<body>
    <div class="gray-bg">
    <div class="wrapper wrapper-content  animated fadeInRight article">
    <div class="row wrapper border-bottom white-bg page-heading">
        <div class="col-sm-4">
            <h2> JSON Editor 中文文档</h2>
            <ol class="breadcrumb">
            <li>
                <a href="/home">Home</a>
            </li>
            <li class="active">
            <strong>Json Editor</strong>
            </li>
            </ol>
        </div>
    </div>
    <div class="row">
    <div class="col-lg-10 col-lg-offset-1">
    <div class="ibox">
    <div class="ibox-content">
    <h1>JSON Editor</h1>
<p><img src="./jsoneditor.png" alt="JSON Schema -&gt; HTML Editor -&gt; JSON"></p>
<p>JSON Editor 根据定义的JSON Schema 生成了一个Html 表单来对JSON进行编辑。它完整支持JSON Schema 的版本3和版本4，并且它集成了一些流行的CSS 框架，例如bootstrap, foundation, and jQueryUI等。<br>
JSON Editor 生成的编辑器支持输入框、下拉框、等几乎所有的html5输入元素</p>
<p>点击这里查看官网在线示例: <a href="http://jeremydorn.com/json-editor/" class="uri">http://jeremydorn.com/json-editor/</a></p>
<p>点击下面链接进行下载</p>
<h2>依赖项</h2>
<p>JSON Editor 不需要任何的依赖，仅仅需要一个现代浏览器支持即可。已在chrome 和firefox 测试通过。</p>
<h3>可选的选项</h3>
<p>下列内容不需要，但是如果配置的话，可以提升Json Editor 样式和可用性</p>
<ul>
<li>可兼容的JS模版年引擎 (例如 Mustache, Underscore, Hogan, Handlebars, Swig, Markup, or EJS)</li>
<li>一个兼容的CSS框架 (例如bootstrap 2/3, foundation 3/4/5, or jqueryui)</li>
<li>一个兼容的图标库(例如bootstrap 2/3 glyphicons, foundation icons 2/3, jqueryui, or font awesome 3/4)</li>
<li><a href="http://www.sceditor.com/">SCEditor</a> 一个所见即所得的html编辑工具</li>
<li><a href="http://epiceditor.com/">EpicEditor</a> 一个支持Markdown的编辑器</li>
<li><a href="http://ace.c9.io/">Ace Editor</a> 代码编辑器</li>
<li><a href="http://ivaynberg.github.io/select2/">Select2</a> 一个好看的下拉框组件</li>
</ul>
<h2>使用方法</h2>
<p>如果你学习Json Editor的用法，可以参看下面的例子</p>
<ul>
<li>基础用法 - <a href="http://rawgithub.com/jdorn/json-editor/master/examples/basic.html" class="uri">http://rawgithub.com/jdorn/json-editor/master/examples/basic.html</a></li>
<li>高级用法 - <a href="http://rawgithub.com/jdorn/json-editor/master/examples/advanced.html" class="uri">http://rawgithub.com/jdorn/json-editor/master/examples/advanced.html</a></li>
<li>集成CSS框架的用法 - <a href="http://rawgithub.com/jdorn/json-editor/master/examples/css_integration.html" class="uri">http://rawgithub.com/jdorn/json-editor/master/examples/css_integration.html</a></li>
</ul>
<p>本文档包含了JSON Editor的详细的用法，如果你想获取更多的有用信息，请访问wiki</p>
<h3>初始化</h3>
<pre class="js"><code class="hljs javascript"><span class="hljs-keyword">var</span> element = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'editor_holder'</span>);

<span class="hljs-keyword">var</span> editor = <span class="hljs-keyword">new</span> JSONEditor(element, options);</code></pre>
<h4>选项</h4>
<p>Options 可以在全局统一设置，也可以在每个实例初始话的时候单独设置</p>
<pre class="js"><code class="hljs javascript"><span class="hljs-comment">// 全局统一设置</span>
JSONEditor.defaults.options.theme = <span class="hljs-string">'bootstrap2'</span>;

<span class="hljs-comment">// 实例初始化的时候设置</span>
<span class="hljs-keyword">var</span> editor = <span class="hljs-keyword">new</span> JSONEditor(element, {
  <span class="hljs-comment">//...</span>
  theme: <span class="hljs-string">'bootstrap2'</span>
});</code></pre>
<p>下面是Json Editor 可用的一些选框</p>
<table>
  <thead>
  <tr>
    <th>选项</th>
    <th>描述</th>
    <th>默认值</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>ajax</td>
    <td>如果设置为 <code>true</code>, JSON Editor 将会用<code>$ref</code>扩展的URL去加载一个ajax请求.</td>
    <td><code>false</code></td>
  </tr>
  <tr>
    <td>disable_array_add</td>
    <td>如果设置 <code>true</code>, 数组对象将不显示增加按钮.</td>
    <td><code>false</code></td>
  </tr>
  <tr>
    <td>disable_array_delete</td>
    <td>如果设置为 <code>true</code>, 数组对象将不显示删除按钮.</td>
    <td><code>false</code></td>
  </tr>
  <tr>
    <td>disable_array_reorder</td>
    <td>如果设置为 <code>true</code>, 数组对象将不显示“向上”、“向下”移动按钮.</td>
    <td><code>false</code></td>
  </tr>
  <tr>
    <td>disable_collapse</td>
    <td>如果设置为 <code>true</code>, 对象和数组不再显示“折叠”按钮.</td>
    <td><code>false</code></td>
  </tr>
  <tr>
    <td>disable_edit_json</td>
    <td>如果设置为 <code>true</code>, 将隐藏 Edit JSON 按钮.</td>
    <td><code>false</code></td>
  </tr>
  <tr>
    <td>disable_properties</td>
    <td>如果设置为 <code>true</code>, 将隐藏编辑属性按钮.</td>
    <td><code>false</code></td>
  </tr>
  <tr>
    <td>form_name_root</td>
    <td>编辑器中输入框的name属性的开头部分，例如一个一个输入框的name 是 `root[person][name]` 其中 "root" 就是这个值.</td>
    <td>root</td>
  </tr>
  <tr>
    <td>iconlib</td>
    <td>编辑器使用的图标库.  可以在 <strong>CSS Integration</strong> 节点查看更多信息.</td>
    <td><code>null</code></td>
  </tr>
  <tr>
    <td>no_additional_properties</td>
    <td>如果设置为 <code>true</code>, 对象将只能包含被定义在 <code>properties</code> 中属性,设置为false 时，当有一个额外的不在<code>properties</code>的属性时，这个属性为自动附加到对象中去.</td>
    <td><code>false</code></td>
  </tr>
  <tr>
    <td>refs</td>
    <td>包含Schema定义对象的一个URL.  它允许你事先定义好一个JSON Schema供其他地方调用.</td>
    <td><code>{}</code></td>
  </tr>
  <tr>
    <td>required_by_default</td>
    <td>If <code>true</code>, all schemas that don't explicitly set the <code>required</code> property will be required.</td>
    <td><code>false</code></td>
  </tr>
  <tr>
    <td>keep_oneof_values</td>
    <td>如果设置为 <code>true</code>,当切换下拉框的时候它可以将<code>oneOf</code>中的属性拷贝到对象中去.</td>
    <td><code>true</code></td>
  </tr>
  <tr>
    <td>schema</td>
    <td>编辑器锁需要的JSON Schema . 目前支持 版本 3 和版本 4 </td>
    <td><code>{}</code></td>
  </tr>
  <tr>
    <td>show_errors</td>
    <td>是否显示错误信息，可用的值有<code>interaction</code>, <code>change</code>, <code>always</code>, and <code>never</code>.</td>
    <td><code>"interaction"</code></td>
  </tr>
  <tr>
    <td>startval</td>
    <td>Seed the editor with an initial value.  This should be valid against the editor's schema.</td>
    <td><code>null</code></td>
  </tr>
  <tr>
    <td>template</td>
    <td>要使用的js 模板引擎.  在此节<strong>模板和变量</strong>有更多信息 .</td>
    <td><code>default</code></td>
  </tr>
  <tr>
    <td>theme</td>
    <td>CSS 框架名.</td>
    <td><code>html</code></td>
  </tr>
  </tbody>
</table>
<p>__*Note__ 如果 <code>ajax</code> 属性被设置为 <code>true</code> 并且 JSON Editor 需要从扩展URL中获取数据, API中的一些方法不会马上被生效<br>
请在调用代码前监听 <code>ready</code> 事件</p>
<pre class="js"><code class="hljs javascript">editor.on(<span class="hljs-string">'ready'</span>,<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
  <span class="hljs-comment">// Now the api methods will be available</span>
  editor.validate();
});</code></pre>
<h3>取值和赋值</h3>
<pre class="js"><code class="hljs javascript">editor.setValue({name: <span class="hljs-string">"John Smith"</span>});

<span class="hljs-keyword">var</span> value = editor.getValue();
<span class="hljs-built_in">console</span>.log(value.name) <span class="hljs-comment">// Will log "John Smith"</span></code></pre>
<p>Instead of getting/setting the value of the entire editor, you can also work on individual parts of the schema:</p>
<pre class="js"><code class="hljs javascript"><span class="hljs-comment">// Get a reference to a node within the editor</span>
<span class="hljs-keyword">var</span> name = editor.getEditor(<span class="hljs-string">'root.name'</span>);

<span class="hljs-comment">// `getEditor` will return null if the path is invalid</span>
<span class="hljs-keyword">if</span>(name) {
  name.setValue(<span class="hljs-string">"John Smith"</span>);

  <span class="hljs-built_in">console</span>.log(name.getValue());
}</code></pre>
<h3>验证</h3>
<p>When feasible, JSON Editor won't let users enter invalid data. This is done by<br>
using input masks and intelligently enabling/disabling controls.</p>
<p>However, in some cases it is still possible to enter data that doesn't validate against the schema.</p>
<p>You can use the <code>validate</code> method to check if the data is valid or not.</p>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript hljs"><span class="co"><span class="hljs-comment">// Validate the editor's current value against the schema</span></span>
<span class="kw"><span class="hljs-keyword">var</span></span> errors <span class="op">=</span> <span class="va">editor</span>.<span class="at">validate</span>()<span class="op">;</span>

<span class="cf"><span class="hljs-keyword">if</span></span>(<span class="va">errors</span>.<span class="at">length</span>) <span class="op">{</span>
  <span class="co"><span class="hljs-comment">// errors is an array of objects, each with a `path`, `property`, and `message` parameter</span></span>
  <span class="co"><span class="hljs-comment">// `property` is the schema keyword that triggered the validation error (e.g. "minLength")</span></span>
  <span class="co"><span class="hljs-comment">// `path` is a dot separated path into the JSON object (e.g. "root.path.to.field")</span></span>
  <span class="va"><span class="hljs-built_in">console</span></span>.<span class="at">log</span>(errors)<span class="op">;</span>
<span class="op">}</span>
<span class="cf"><span class="hljs-keyword">else</span></span> <span class="op">{</span>
  <span class="co"><span class="hljs-comment">// It's valid!</span></span>
<span class="op">}</span></code></pre></div>
<p>By default, this will do the validation with the editor's current value.<br>
If you want to use a different value, you can pass it in as a parameter.</p>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript hljs"><span class="co"><span class="hljs-comment">// Validate an arbitrary value against the editor's schema</span></span>
<span class="kw"><span class="hljs-keyword">var</span></span> errors <span class="op">=</span> <span class="va">editor</span>.<span class="at">validate</span>(<span class="op">{</span>
  <span class="dt">value</span><span class="op">:</span> <span class="op">{</span>
    <span class="dt">to</span><span class="op">:</span> <span class="st"><span class="hljs-string">"test"</span></span>
  <span class="op">}</span>
<span class="op">}</span>)<span class="op">;</span></code></pre></div>
<h3 id="change">监听Change事件</h3>
<p>The <code>change</code> event is fired whenever the editor's value changes.</p>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript hljs"><span class="va">editor</span>.<span class="at">on</span>(<span class="st"><span class="hljs-string">'change'</span></span><span class="op">,</span><span class="kw"><span class="hljs-function"><span class="hljs-keyword">function</span></span></span><span class="hljs-function">(<span class="hljs-params"></span>) </span><span class="op">{</span>
  <span class="co"><span class="hljs-comment">// Do something</span></span>
<span class="op">}</span>)<span class="op">;</span>

<span class="va">editor</span>.<span class="at">off</span>(<span class="st"><span class="hljs-string">'change'</span></span><span class="op">,</span>function_reference)<span class="op">;</span></code></pre></div>
<p>You can also watch a specific field for changes:</p>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript hljs"><span class="va">editor</span>.<span class="at">watch</span>(<span class="st"><span class="hljs-string">'path.to.field'</span></span><span class="op">,</span><span class="kw"><span class="hljs-function"><span class="hljs-keyword">function</span></span></span><span class="hljs-function">(<span class="hljs-params"></span>) </span><span class="op">{</span>
  <span class="co"><span class="hljs-comment">// Do something</span></span>
<span class="op">}</span>)<span class="op">;</span>

<span class="va">editor</span>.<span class="at">unwatch</span>(<span class="st"><span class="hljs-string">'path.to.field'</span></span><span class="op">,</span>function_reference)<span class="op">;</span></code></pre></div>
<h3>禁用/可用编辑器</h3>
<p>This lets you disable editing for the entire form or part of the form.</p>
<pre class="js"><code class="hljs javascript"><span class="hljs-comment">// Disable entire form</span>
editor.disable();

<span class="hljs-comment">// Disable part of the form</span>
editor.getEditor(<span class="hljs-string">'root.location'</span>).disable();

<span class="hljs-comment">// Enable entire form</span>
editor.enable();

<span class="hljs-comment">// Enable part of the form</span>
editor.getEditor(<span class="hljs-string">'root.location'</span>).enable();

<span class="hljs-comment">// Check if form is currently enabled</span>
<span class="hljs-keyword">if</span>(editor.isEnabled()) alert(<span class="hljs-string">"It's editable!"</span>);</code></pre>
<h3>销毁</h3>
<p>This removes the editor HTML from the DOM and frees up resources.</p>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript hljs"><span class="va">editor</span>.<span class="at">destroy</span>()<span class="op">;</span></code></pre></div>
<h2 id="css">集成CSS</h2>
<p>JSON Editor 可以集成一些比较流行的CSS框架</p>
<p>目前支持以下框架:</p>
<ul>
<li>html (the default)</li>
<li>bootstrap2</li>
<li>bootstrap3</li>
<li>foundation3</li>
<li>foundation4</li>
<li>foundation5</li>
<li>jqueryui</li>
</ul>
<p>默认皮肤是 <code>html</code>, 使用这个选项的时候，没有任何的class 和样式.<br>
通过修改变量 <code>JSONEditor.defaults.options.theme</code> 的值，可以改变默认的CSS 框架</p>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript hljs"><span class="va">JSONEditor</span>.<span class="va">defaults</span>.<span class="va">options</span>.<span class="at">theme</span> <span class="op">=</span> <span class="st"><span class="hljs-string">'foundation5'</span></span><span class="op">;</span></code></pre></div>
<p>你也可以在实例化的时候覆盖默认值，通过如下方式</p>
<pre class="js"><code class="hljs javascript"><span class="hljs-keyword">var</span> editor = <span class="hljs-keyword">new</span> JSONEditor(element,{
  schema: schema,
  theme: <span class="hljs-string">'jqueryui'</span>
});</code></pre>
<h3>图标库</h3>
<p>JSON Editor 支持流行的图标库.</p>
<p>目前支持以下图标库:</p>
<ul>
<li>bootstrap2 (glyphicons)</li>
<li>bootstrap3 (glyphicons)</li>
<li>foundation2</li>
<li>foundation3</li>
<li>jqueryui</li>
<li>fontawesome3</li>
<li>fontawesome4</li>
</ul>
<p>默认情况下没有使用图标库，和设置CSS 皮肤一样，你可以全局设置或实例化的时候设置</p>
<pre class="js"><code class="hljs javascript"><span class="hljs-comment">// Set the global default</span>
JSONEditor.defaults.options.iconlib = <span class="hljs-string">"bootstrap2"</span>;

<span class="hljs-comment">// Set the icon lib during initialization</span>
<span class="hljs-keyword">var</span> editor = <span class="hljs-keyword">new</span> JSONEditor(element,{
  schema: schema,
  iconlib: <span class="hljs-string">"fontawesome4"</span>
});</code></pre>
<p>你也可以创建你自己的自定义的皮肤或图标库，你可以参考一些示例。</p>
<h2 id="json-schema-support">JSON Schema Support</h2>
<p>JSON Editor fully supports version 3 and 4 of the JSON Schema <a href="http://json-schema.org/latest/json-schema-core.html">core</a> and <a href="http://json-schema.org/latest/json-schema-validation.html">validation</a> specifications.<br>
Some of The <a href="http://json-schema.org/latest/json-schema-hypermedia.html">hyper-schema</a> specification is supported as well.</p>
<h3 id="ref-and-definitions">$ref and definitions</h3>
<p>JSON Editor supports schema references to external URLs and local definitions. Here's an example showing both:</p>
<div class="sourceCode"><pre class="sourceCode json"><code class="sourceCode json hljs"><span class="fu">{</span>
  <span class="dt">"<span class="hljs-attr">type</span>"</span><span class="fu">:</span> <span class="st"><span class="hljs-string">"object"</span></span><span class="fu">,</span>
  <span class="dt">"<span class="hljs-attr">properties</span>"</span><span class="fu">:</span> <span class="fu">{</span>
    <span class="dt">"<span class="hljs-attr">name</span>"</span><span class="fu">:</span> <span class="fu">{</span>
      <span class="dt">"<span class="hljs-attr">title</span>"</span><span class="fu">:</span> <span class="st"><span class="hljs-string">"Full Name"</span></span><span class="fu">,</span>
      <span class="dt">"<span class="hljs-attr">$ref</span>"</span><span class="fu">:</span> <span class="st"><span class="hljs-string">"#/definitions/name"</span></span>
    <span class="fu">},</span>
    <span class="dt">"<span class="hljs-attr">location</span>"</span><span class="fu">:</span> <span class="fu">{</span>
      <span class="dt">"<span class="hljs-attr">$ref</span>"</span><span class="fu">:</span> <span class="st"><span class="hljs-string">"http://mydomain.com/geo.json"</span></span>
    <span class="fu">}</span>
  <span class="fu">},</span>
  <span class="dt">"<span class="hljs-attr">definitions</span>"</span><span class="fu">:</span> <span class="fu">{</span>
    <span class="dt">"<span class="hljs-attr">name</span>"</span><span class="fu">:</span> <span class="fu">{</span>
      <span class="dt">"<span class="hljs-attr">type</span>"</span><span class="fu">:</span> <span class="st"><span class="hljs-string">"string"</span></span><span class="fu">,</span>
      <span class="dt">"<span class="hljs-attr">minLength</span>"</span><span class="fu">:</span> <span class="dv"><span class="hljs-number">5</span></span>
    <span class="fu">}</span>
  <span class="fu">}</span>
<span class="fu">}</span></code></pre></div>
<p>Local references must point to the <code>definitions</code> object of the root node of the schema.<br>
So, <code>#/customkey/name</code> will throw an exception.</p>
<p>If loading an external url via Ajax, the url must either be on the same domain or return the correct HTTP cross domain headers.<br>
If your URLs don't meet this requirement, you can pass in the references to JSON Editor during initialization (see Usage section above).</p>
<p>Self-referential $refs are supported. Check out <code>examples/recursive.html</code> for usage examples.</p>
<h3 id="hyper-schema-links">hyper-schema links</h3>
<p>The <code>links</code> keyword from the hyper-schema specification can be used to add links to related documents.</p>
<p>JSON Editor will use the <code>mediaType</code> property of the links to determine how best to display them.<br>
Image, audio, and video links will display the media inline as well as providing a text link.</p>
<p>Here are a couple examples:</p>
<p>Simple text link</p>
<pre class="js+jinja"><code class="hljs json">{
  "<span class="hljs-attr">title</span>": <span class="hljs-string">"Blog Post Id"</span>,
  "<span class="hljs-attr">type</span>": <span class="hljs-string">"integer"</span>,
  "<span class="hljs-attr">links</span>": [
    {
      "<span class="hljs-attr">rel</span>": <span class="hljs-string">"comments"</span>,
      "<span class="hljs-attr">href</span>": <span class="hljs-string">"/posts/{{self}}/comments/"</span>
    }
  ]
}</code></pre>
<p>Show a video preview (using HTML5 video)</p>
<pre class="js+jinja"><code class="hljs json">{
  "<span class="hljs-attr">title</span>": <span class="hljs-string">"Video filename"</span>,
  "<span class="hljs-attr">type</span>": <span class="hljs-string">"string"</span>,
  "<span class="hljs-attr">links</span>": [
    {
      "<span class="hljs-attr">href</span>": <span class="hljs-string">"/videos/{{self}}.mp4"</span>,
      "<span class="hljs-attr">mediaType</span>": <span class="hljs-string">"video/mp4"</span>
    }
  ]
}</code></pre>
<p>The <code>href</code> property is a template that gets re-evaluated every time the value changes.<br>
The variable <code>self</code> is always available. Look at the <strong>Dependencies</strong> section below for how to include other fields or use a custom template engine.</p>
<h3>属性排序</h3>
<p>There is no way to specify property ordering in JSON Schema (although this may change in v5 of the spec).</p>
<p>JSON Editor introduces a new keyword <code>propertyOrder</code> for this purpose. The default property order if unspecified is 1000. Properties with the same order will use normal JSON key ordering.</p>
<div class="sourceCode"><pre class="sourceCode json"><code class="sourceCode json hljs"><span class="fu">{</span>
  <span class="dt">"<span class="hljs-attr">type</span>"</span><span class="fu">:</span> <span class="st"><span class="hljs-string">"object"</span></span><span class="fu">,</span>
  <span class="dt">"<span class="hljs-attr">properties</span>"</span><span class="fu">:</span> <span class="fu">{</span>
    <span class="dt">"<span class="hljs-attr">prop1</span>"</span><span class="fu">:</span> <span class="fu">{</span>
      <span class="dt">"<span class="hljs-attr">type</span>"</span><span class="fu">:</span> <span class="st"><span class="hljs-string">"string"</span></span>
    <span class="fu">},</span>
    <span class="dt">"<span class="hljs-attr">prop2</span>"</span><span class="fu">:</span> <span class="fu">{</span>
      <span class="dt">"<span class="hljs-attr">type</span>"</span><span class="fu">:</span> <span class="st"><span class="hljs-string">"string"</span></span><span class="fu">,</span>
      <span class="dt">"<span class="hljs-attr">propertyOrder</span>"</span><span class="fu">:</span> <span class="dv"><span class="hljs-number">10</span></span>
    <span class="fu">},</span>
    <span class="dt">"<span class="hljs-attr">prop3</span>"</span><span class="fu">:</span> <span class="fu">{</span>
      <span class="dt">"<span class="hljs-attr">type</span>"</span><span class="fu">:</span> <span class="st"><span class="hljs-string">"string"</span></span><span class="fu">,</span>
      <span class="dt">"<span class="hljs-attr">propertyOrder</span>"</span><span class="fu">:</span> <span class="dv"><span class="hljs-number">1001</span></span>
    <span class="fu">},</span>
    <span class="dt">"<span class="hljs-attr">prop4</span>"</span><span class="fu">:</span> <span class="fu">{</span>
      <span class="dt">"<span class="hljs-attr">type</span>"</span><span class="fu">:</span> <span class="st"><span class="hljs-string">"string"</span></span><span class="fu">,</span>
      <span class="dt">"<span class="hljs-attr">propertyOrder</span>"</span><span class="fu">:</span> <span class="dv"><span class="hljs-number">1</span></span>
    <span class="fu">}</span>
  <span class="fu">}</span>
<span class="fu">}</span></code></pre></div>
<p>In the above example schema, <code>prop1</code> does not have an order specified, so it will default to 1000.<br>
So, the final order of properties in the form (and in returned JSON data) will be:</p>
<ol>
<li>prop4 (order 1)</li>
<li>prop2 (order 10)</li>
<li>prop1 (order 1000)</li>
<li>prop3 (order 1001)</li>
</ol>
<h3>默认属性</h3>
<p>The default behavior of JSON Editor is to include all object properties defined with the <code>properties</code> keyword.</p>
<p>To override this behaviour, you can use the keyword <code>defaultProperties</code> to set which ones are included:</p>
<div class="sourceCode"><pre class="sourceCode json"><code class="sourceCode json hljs"><span class="fu">{</span>
  <span class="dt">"<span class="hljs-attr">type</span>"</span><span class="fu">:</span> <span class="st"><span class="hljs-string">"object"</span></span><span class="fu">,</span>
  <span class="dt">"<span class="hljs-attr">properties</span>"</span><span class="fu">:</span> <span class="fu">{</span>
    <span class="dt">"<span class="hljs-attr">name</span>"</span><span class="fu">:</span> <span class="fu">{</span><span class="dt">"<span class="hljs-attr">type</span>"</span><span class="fu">:</span> <span class="st"><span class="hljs-string">"string"</span></span><span class="fu">},</span>
    <span class="dt">"<span class="hljs-attr">age</span>"</span><span class="fu">:</span> <span class="fu">{</span><span class="dt">"<span class="hljs-attr">type</span>"</span><span class="fu">:</span> <span class="st"><span class="hljs-string">"integer"</span></span><span class="fu">}</span>
  <span class="fu">},</span>
  <span class="dt">"<span class="hljs-attr">defaultProperties</span>"</span><span class="fu">:</span> <span class="ot">[</span><span class="st"><span class="hljs-string">"name"</span></span><span class="ot">]</span>
<span class="fu">}</span></code></pre></div>
<p>Now, only the <code>name</code> property above will be included by default. You can use the "Object Properties" button<br>
to add the "age" property back in.</p>
<h3>格式化</h3>
<p>JSON Editor supports many different formats for schemas of type <code>string</code>. They will work with schemas of type <code>integer</code> and <code>number</code> as well, but some formats may produce weird results.<br>
If the <code>enum</code> property is specified, <code>format</code> will be ignored.</p>
<p>JSON Editor uses HTML5 input types, so some of these may render as basic text input in older browsers:</p>
<ul>
<li>color</li>
<li>date</li>
<li>datetime</li>
<li>datetime-local</li>
<li>email</li>
<li>month</li>
<li>number</li>
<li>range</li>
<li>tel</li>
<li>text</li>
<li>textarea</li>
<li>time</li>
<li>url</li>
<li>week</li>
</ul>
<p>下面是一个用format格式化生成一个选择颜色控件的例子</p>
<div class="sourceCode"><pre class="sourceCode json"><code class="sourceCode json hljs"><span class="fu">{</span>
  <span class="dt">"<span class="hljs-attr">type</span>"</span><span class="fu">:</span> <span class="st"><span class="hljs-string">"object"</span></span><span class="fu">,</span>
  <span class="dt">"<span class="hljs-attr">properties</span>"</span><span class="fu">:</span> <span class="fu">{</span>
    <span class="dt">"<span class="hljs-attr">color</span>"</span><span class="fu">:</span> <span class="fu">{</span>
      <span class="dt">"<span class="hljs-attr">type</span>"</span><span class="fu">:</span> <span class="st"><span class="hljs-string">"string"</span></span><span class="fu">,</span>
      <span class="dt">"<span class="hljs-attr">format</span>"</span><span class="fu">:</span> <span class="st"><span class="hljs-string">"color"</span></span>
    <span class="fu">}</span>
  <span class="fu">}</span>
<span class="fu">}</span></code></pre></div>
<h4>一个特殊的字符串编辑器</h4>
<p>In addition to the standard HTML input formats, JSON Editor can also integrate with several 3rd party specialized editors. These libraries are not included in JSON Editor and you must load them on the page yourself.</p>
<p><strong>SCEditor</strong> provides WYSIWYG editing of HTML and BBCode. To use it, set the format to <code>html</code> or <code>bbcode</code> and set the <code>wysiwyg</code> option to <code>true</code>:</p>
<div class="sourceCode"><pre class="sourceCode json"><code class="sourceCode json hljs"><span class="fu">{</span>
  <span class="dt">"<span class="hljs-attr">type</span>"</span><span class="fu">:</span> <span class="st"><span class="hljs-string">"string"</span></span><span class="fu">,</span>
  <span class="dt">"<span class="hljs-attr">format</span>"</span><span class="fu">:</span> <span class="st"><span class="hljs-string">"html"</span></span><span class="fu">,</span>
  <span class="dt">"<span class="hljs-attr">options</span>"</span><span class="fu">:</span> <span class="fu">{</span>
    <span class="dt">"<span class="hljs-attr">wysiwyg</span>"</span><span class="fu">:</span> <span class="kw"><span class="hljs-literal">true</span></span>
  <span class="fu">}</span>
<span class="fu">}</span></code></pre></div>
<p>You can configure SCEditor by setting configuration options in <code>JSONEditor.plugins.sceditor</code>. Here's an example:</p>
<pre class="js"><code class="hljs javascript">JSONEditor.plugins.sceditor.emoticonsEnabled = <span class="hljs-literal">false</span>;</code></pre>
<p><strong>EpicEditor</strong> is a simple Markdown editor with live preview. To use it, set the format to <code>markdown</code>:</p>
<div class="sourceCode"><pre class="sourceCode json"><code class="sourceCode json hljs"><span class="fu">{</span>
  <span class="dt">"<span class="hljs-attr">type</span>"</span><span class="fu">:</span> <span class="st"><span class="hljs-string">"string"</span></span><span class="fu">,</span>
  <span class="dt">"<span class="hljs-attr">format</span>"</span><span class="fu">:</span> <span class="st"><span class="hljs-string">"markdown"</span></span>
<span class="fu">}</span></code></pre></div>
<p>You can configure EpicEditor by setting configuration options in <code>JSONEditor.plugins.epiceditor</code>. Here's an example:</p>
<pre class="js"><code class="hljs javascript">JSONEditor.plugins.epiceditor.basePath = <span class="hljs-string">'epiceditor'</span>;</code></pre>
<p><strong>Ace Editor</strong> is a syntax highlighting source code editor. You can use it by setting the format to any of the following:</p>
<ul>
<li>actionscript</li>
<li>batchfile</li>
<li>c</li>
<li>c++</li>
<li>cpp (alias for c++)</li>
<li>coffee</li>
<li>csharp</li>
<li>css</li>
<li>dart</li>
<li>django</li>
<li>ejs</li>
<li>erlang</li>
<li>golang</li>
<li>handlebars</li>
<li>haskell</li>
<li>haxe</li>
<li>html</li>
<li>ini</li>
<li>jade</li>
<li>java</li>
<li>javascript</li>
<li>json</li>
<li>less</li>
<li>lisp</li>
<li>lua</li>
<li>makefile</li>
<li>markdown</li>
<li>matlab</li>
<li>mysql</li>
<li>objectivec</li>
<li>pascal</li>
<li>perl</li>
<li>pgsql</li>
<li>php</li>
<li>python</li>
<li>r</li>
<li>ruby</li>
<li>sass</li>
<li>scala</li>
<li>scss</li>
<li>smarty</li>
<li>sql</li>
<li>stylus</li>
<li>svg</li>
<li>twig</li>
<li>vbscript</li>
<li>xml</li>
<li>yaml</li>
</ul>
<div class="sourceCode"><pre class="sourceCode json"><code class="sourceCode json hljs"><span class="fu">{</span>
  <span class="dt">"<span class="hljs-attr">type</span>"</span><span class="fu">:</span> <span class="st"><span class="hljs-string">"string"</span></span><span class="fu">,</span>
  <span class="dt">"<span class="hljs-attr">format</span>"</span><span class="fu">:</span> <span class="st"><span class="hljs-string">"yaml"</span></span>
<span class="fu">}</span></code></pre></div>
<p>You can use the hyper-schema keyword <code>media</code> instead of <code>format</code> too if you prefer for formats with a mime type:</p>
<div class="sourceCode"><pre class="sourceCode json"><code class="sourceCode json hljs"><span class="fu">{</span>
  <span class="dt">"<span class="hljs-attr">type</span>"</span><span class="fu">:</span> <span class="st"><span class="hljs-string">"string"</span></span><span class="fu">,</span>
  <span class="dt">"<span class="hljs-attr">media</span>"</span><span class="fu">:</span> <span class="fu">{</span>
    <span class="dt">"<span class="hljs-attr">type</span>"</span><span class="fu">:</span> <span class="st"><span class="hljs-string">"text/html"</span></span>
  <span class="fu">}</span>
<span class="fu">}</span></code></pre></div>
<p>You can override the default Ace theme by setting the <code>JSONEditor.plugins.ace.theme</code> variable.</p>
<pre class="js"><code class="hljs javascript">JSONEditor.plugins.ace.theme = <span class="hljs-string">'twilight'</span>;</code></pre>
<h4>布尔类型</h4>
<p>默认的布尔类型编辑器是一个包含true,false的下拉框,如果设置format=<code>checkbox</code>那么将以勾选框的形式展示</p>
<div class="sourceCode"><pre class="sourceCode json"><code class="sourceCode json hljs"><span class="fu">{</span>
  <span class="dt">"<span class="hljs-attr">type</span>"</span><span class="fu">:</span> <span class="st"><span class="hljs-string">"boolean"</span></span><span class="fu">,</span>
  <span class="dt">"<span class="hljs-attr">format</span>"</span><span class="fu">:</span> <span class="st"><span class="hljs-string">"checkbox"</span></span>
<span class="fu">}</span></code></pre></div>
<h4>数组类型</h4>
<p>默认的数组编辑器会占用比较大的屏幕空间. 使用 <code>table</code> and <code>tabs</code> 格式选项可以可以将界面变得紧凑些</p>
<p><code>table</code> 选项在数组的结构相同并且不复杂的时候用起来会比较好</p>
<p><code>tabs</code> 选项可以针对任何数组, 但是每次只能显示数组中的一项. 在每个数组项的左边会有一个页签开关.</p>
<p>下面是一个 <code>table</code> 选项的例子:</p>
<div class="sourceCode"><pre class="sourceCode json"><code class="sourceCode json hljs"><span class="fu">{</span>
  <span class="dt">"<span class="hljs-attr">type</span>"</span><span class="fu">:</span> <span class="st"><span class="hljs-string">"array"</span></span><span class="fu">,</span>
  <span class="dt">"<span class="hljs-attr">format</span>"</span><span class="fu">:</span> <span class="st"><span class="hljs-string">"table"</span></span><span class="fu">,</span>
  <span class="dt">"<span class="hljs-attr">items</span>"</span><span class="fu">:</span> <span class="fu">{</span>
    <span class="dt">"<span class="hljs-attr">type</span>"</span><span class="fu">:</span> <span class="st"><span class="hljs-string">"object"</span></span><span class="fu">,</span>
    <span class="dt">"<span class="hljs-attr">properties</span>"</span><span class="fu">:</span> <span class="fu">{</span>
      <span class="dt">"<span class="hljs-attr">name</span>"</span><span class="fu">:</span> <span class="fu">{</span>
        <span class="dt">"<span class="hljs-attr">type</span>"</span><span class="fu">:</span> <span class="st"><span class="hljs-string">"string"</span></span>
      <span class="fu">}</span>
    <span class="fu">}</span>
  <span class="fu">}</span>
<span class="fu">}</span></code></pre></div>
<p>对于数组中的枚举字符串，你可以使用<code>select</code> or <code>checkbox</code>选项，这两个选项需要一个类似如下的特殊结构才能工作</p>
<div class="sourceCode"><pre class="sourceCode json"><code class="sourceCode json hljs"><span class="fu">{</span>
  <span class="dt">"<span class="hljs-attr">type</span>"</span><span class="fu">:</span> <span class="st"><span class="hljs-string">"array"</span></span><span class="fu">,</span>
  <span class="dt">"<span class="hljs-attr">uniqueItems</span>"</span><span class="fu">:</span> <span class="kw"><span class="hljs-literal">true</span></span><span class="fu">,</span>
  <span class="dt">"<span class="hljs-attr">items</span>"</span><span class="fu">:</span> <span class="fu">{</span>
    <span class="dt">"<span class="hljs-attr">type</span>"</span><span class="fu">:</span> <span class="st"><span class="hljs-string">"string"</span></span><span class="fu">,</span>
    <span class="dt">"<span class="hljs-attr">enum</span>"</span><span class="fu">:</span> <span class="ot">[</span><span class="st"><span class="hljs-string">"value1"</span></span><span class="ot">,</span><span class="st"><span class="hljs-string">"value2"</span></span><span class="ot">]</span>
  <span class="fu">}</span>
<span class="fu">}</span></code></pre></div>
<p>默认情况下（不设置format的情况），如果枚举的选项少于8个的时候，将会启用<code>checkbox</code>编辑器，否则的话会启用select 编辑器</p>
<p>你可以通过下面的代码的方式来覆盖默认项</p>
<div class="sourceCode"><pre class="sourceCode json"><code class="sourceCode json hljs"><span class="fu">{</span>
  <span class="dt">"<span class="hljs-attr">type</span>"</span><span class="fu">:</span> <span class="st"><span class="hljs-string">"array"</span></span><span class="fu">,</span>
  <span class="dt">"<span class="hljs-attr">format</span>"</span><span class="fu">:</span> <span class="st"><span class="hljs-string">"select"</span></span><span class="fu">,</span>
  <span class="dt">"<span class="hljs-attr">uniqueItems</span>"</span><span class="fu">:</span> <span class="kw"><span class="hljs-literal">true</span></span><span class="fu">,</span>
  <span class="dt">"<span class="hljs-attr">items</span>"</span><span class="fu">:</span> <span class="fu">{</span>
    <span class="dt">"<span class="hljs-attr">type</span>"</span><span class="fu">:</span> <span class="st"><span class="hljs-string">"string"</span></span><span class="fu">,</span>
    <span class="dt">"<span class="hljs-attr">enum</span>"</span><span class="fu">:</span> <span class="ot">[</span><span class="st"><span class="hljs-string">"value1"</span></span><span class="ot">,</span><span class="st"><span class="hljs-string">"value2"</span></span><span class="ot">]</span>
  <span class="fu">}</span>
<span class="fu">}</span></code></pre></div>
<h4>对象</h4>
<p>默认情况下对象每个子对象会布局一行，format=<code>grid</code>的时候，每行可以放多个子对象编辑器</p>
<p>This can make the editor much more compact, but at a cost of not guaranteeing child editor order.</p>
<div class="sourceCode"><pre class="sourceCode json"><code class="sourceCode json hljs"><span class="fu">{</span>
  <span class="dt">"<span class="hljs-attr">type</span>"</span><span class="fu">:</span> <span class="st"><span class="hljs-string">"object"</span></span><span class="fu">,</span>
  <span class="dt">"<span class="hljs-attr">properties</span>"</span><span class="fu">:</span> <span class="fu">{</span>
    <span class="dt">"<span class="hljs-attr">name</span>"</span><span class="fu">:</span> <span class="fu">{</span> <span class="dt">"<span class="hljs-attr">type</span>"</span><span class="fu">:</span> <span class="st"><span class="hljs-string">"string"</span></span> <span class="fu">}</span>
  <span class="fu">},</span>
  <span class="dt">"<span class="hljs-attr">format</span>"</span><span class="fu">:</span> <span class="st"><span class="hljs-string">"grid"</span></span>
<span class="fu">}</span></code></pre></div>
<h2>编辑器选项</h2>
<p>Editors can accept options which alter the behavior in some way.</p>
<ul>
<li><code>collapsed</code> - 折叠</li>
<li><code>disable_array_add</code> - 禁用增加按钮</li>
<li><code>disable_array_delete</code> - 禁用删除按钮</li>
<li><code>disable_array_reorder</code> - 禁用移动on个按钮</li>
<li><code>disable_collapse</code> - 禁用折叠</li>
<li><code>disable_edit_json</code> - 禁用JSON编辑按钮</li>
<li><code>disable_properties</code> - 禁用属性按钮</li>
<li><code>enum_titles</code> - 枚举标题，对应 <code>enum</code> 属性。当使用select 的时候，将显示enum_titles的内容，但是值还是来自enum</li>
<li><code>expand_height</code> - If set to true, the input will auto expand/contract to fit the content. Works best with textareas.</li>
<li><code>grid_columns</code> - Explicitly set the number of grid columns (1-12) for the editor if it's within an object using a grid layout.</li>
<li><code>hidden</code> - 编辑器是否隐藏</li>
<li><code>input_height</code> - 编辑器的高度</li>
<li><code>input_width</code> - 编辑器的宽度</li>
<li><code>remove_empty_properties</code> - 移除空的对象属性</li>
</ul>
<div class="sourceCode"><pre class="sourceCode json"><code class="sourceCode json hljs"><span class="fu">{</span>
  <span class="dt">"<span class="hljs-attr">type</span>"</span><span class="fu">:</span> <span class="st"><span class="hljs-string">"object"</span></span><span class="fu">,</span>
  <span class="dt">"<span class="hljs-attr">options</span>"</span><span class="fu">:</span> <span class="fu">{</span>
    <span class="dt">"<span class="hljs-attr">collapsed</span>"</span><span class="fu">:</span> <span class="kw"><span class="hljs-literal">true</span></span>
  <span class="fu">},</span>
  <span class="dt">"<span class="hljs-attr">properties</span>"</span><span class="fu">:</span> <span class="fu">{</span>
    <span class="dt">"<span class="hljs-attr">name</span>"</span><span class="fu">:</span> <span class="fu">{</span>
      <span class="dt">"<span class="hljs-attr">type</span>"</span><span class="fu">:</span> <span class="st"><span class="hljs-string">"string"</span></span>
    <span class="fu">}</span>
  <span class="fu">}</span>
<span class="fu">}</span></code></pre></div>
<p>You can globally set the default options too if you want:</p>
<pre class="js"><code class="hljs javascript">JSONEditor.defaults.editors.object.options.collapsed = <span class="hljs-literal">true</span>;</code></pre>
<h2>依赖</h2>
<p>有的时候，一个字段的值依赖于另外一个字段，这是不可避免年遇到的问题</p>
<p>JSON Schema中 <code>dependencies</code> 选项 不能足够灵活的处理一些实例，因此 JSON Editor 引入了一个复合的自定义关键词来解决这个问题<br>
第一步，修改Schema增加一个watch 属性</p>
<div class="sourceCode"><pre class="sourceCode json"><code class="sourceCode json hljs"><span class="fu">{</span>
  <span class="dt">"<span class="hljs-attr">type</span>"</span><span class="fu">:</span> <span class="st"><span class="hljs-string">"object"</span></span><span class="fu">,</span>
  <span class="dt">"<span class="hljs-attr">properties</span>"</span><span class="fu">:</span> <span class="fu">{</span>
    <span class="dt">"<span class="hljs-attr">first_name</span>"</span><span class="fu">:</span> <span class="fu">{</span>
      <span class="dt">"<span class="hljs-attr">type</span>"</span><span class="fu">:</span> <span class="st"><span class="hljs-string">"string"</span></span>
    <span class="fu">},</span>
    <span class="dt">"<span class="hljs-attr">last_name</span>"</span><span class="fu">:</span> <span class="fu">{</span>
      <span class="dt">"<span class="hljs-attr">type</span>"</span><span class="fu">:</span> <span class="st"><span class="hljs-string">"string"</span></span>
    <span class="fu">},</span>
    <span class="dt">"<span class="hljs-attr">full_name</span>"</span><span class="fu">:</span> <span class="fu">{</span>
      <span class="dt">"<span class="hljs-attr">type</span>"</span><span class="fu">:</span> <span class="st"><span class="hljs-string">"string"</span></span><span class="fu">,</span>
      <span class="dt">"<span class="hljs-attr">watch</span>"</span><span class="fu">:</span> <span class="fu">{</span>
        <span class="dt">"<span class="hljs-attr">fname</span>"</span><span class="fu">:</span> <span class="st"><span class="hljs-string">"first_name"</span></span><span class="fu">,</span>
        <span class="dt">"<span class="hljs-attr">lname</span>"</span><span class="fu">:</span> <span class="st"><span class="hljs-string">"last_name"</span></span>
      <span class="fu">}</span>
    <span class="fu">}</span>
  <span class="fu">}</span>
<span class="fu">}</span></code></pre></div>
<p>关键词<code>watch</code>告诉JSON Editor 哪个字段被更改了</p>
<p>关键词 (<code>fname</code> and <code>lname</code> 例子中) 是这个属性的别名</p>
<p>两个属性的值 (<code>first_name</code> and <code>last_name</code>) 是一个属性的路径.(例如 "path.to.field").</p>
<p>默认路径是来从架构的根开始，但是你可以在架构中年创建一个id属性作为锚点，来创建一个相对路径.这在数组中相当的有用.<br>
下面是一个例子</p>
<div class="sourceCode"><pre class="sourceCode json"><code class="sourceCode json hljs"><span class="fu">{</span>
  <span class="dt">"<span class="hljs-attr">type</span>"</span><span class="fu">:</span> <span class="st"><span class="hljs-string">"array"</span></span><span class="fu">,</span>
  <span class="dt">"<span class="hljs-attr">items</span>"</span><span class="fu">:</span> <span class="fu">{</span>
    <span class="dt">"<span class="hljs-attr">type</span>"</span><span class="fu">:</span> <span class="st"><span class="hljs-string">"object"</span></span><span class="fu">,</span>
    <span class="dt">"<span class="hljs-attr">id</span>"</span><span class="fu">:</span> <span class="st"><span class="hljs-string">"arr_item"</span></span><span class="fu">,</span>
    <span class="dt">"<span class="hljs-attr">properties</span>"</span><span class="fu">:</span> <span class="fu">{</span>
      <span class="dt">"<span class="hljs-attr">first_name</span>"</span><span class="fu">:</span> <span class="fu">{</span>
        <span class="dt">"<span class="hljs-attr">type</span>"</span><span class="fu">:</span> <span class="st"><span class="hljs-string">"string"</span></span>
      <span class="fu">},</span>
      <span class="dt">"<span class="hljs-attr">last_name</span>"</span><span class="fu">:</span> <span class="fu">{</span>
        <span class="dt">"<span class="hljs-attr">type</span>"</span><span class="fu">:</span> <span class="st"><span class="hljs-string">"string"</span></span>
      <span class="fu">},</span>
      <span class="dt">"<span class="hljs-attr">full_name</span>"</span><span class="fu">:</span> <span class="fu">{</span>
        <span class="dt">"<span class="hljs-attr">type</span>"</span><span class="fu">:</span> <span class="st"><span class="hljs-string">"string"</span></span><span class="fu">,</span>
        <span class="dt">"<span class="hljs-attr">watch</span>"</span><span class="fu">:</span> <span class="fu">{</span>
          <span class="dt">"<span class="hljs-attr">fname</span>"</span><span class="fu">:</span> <span class="st"><span class="hljs-string">"arr_item.first_name"</span></span><span class="fu">,</span>
          <span class="dt">"<span class="hljs-attr">lname</span>"</span><span class="fu">:</span> <span class="st"><span class="hljs-string">"arr_item.last_name"</span></span>
        <span class="fu">}</span>
      <span class="fu">}</span>
    <span class="fu">}</span>
  <span class="fu">}</span>
<span class="fu">}</span></code></pre></div>
<p>那现在 <code>full_name</code> 在每个数组元素中将被 <code>first_name</code> and <code>last_name</code> 两个字段监控</p>
<h3>模板</h3>
<p>监控字段并不能做任何事情。拿上面的例子来说，你还需要告诉编辑器，<code>full_name</code> 的内容可能是类似这样的格式<code>fname [space] lname</code><br>
编辑器使用了一个js模版引擎去实现它。<br>
默认编辑器包含了一个简单的模板引擎，它仅仅只能替换类似<code>{{variable}}</code>这样的模板。你可以通过配置来是编辑器支持其他的一些比较流行的模版引擎。<br>
目前支持的模板引擎有</p>
<ul>
<li>ejs</li>
<li>handlebars</li>
<li>hogan</li>
<li>markup</li>
<li>mustache</li>
<li>swig</li>
<li>underscore</li>
</ul>
<p>你可以通过修改默认的配置项 <code>JSONEditor.defaults.options.template</code> 来支持模板引擎，如下</p>
<div class="sourceCode"><pre class="sourceCode javascript"><code class="sourceCode javascript hljs"><span class="va">JSONEditor</span>.<span class="va">defaults</span>.<span class="va">options</span>.<span class="at">template</span> <span class="op">=</span> <span class="st"><span class="hljs-string">'handlebars'</span></span><span class="op">;</span></code></pre></div>
<p>你也可以在实例初始化的时候来设置</p>
<pre class="js"><code class="hljs javascript"><span class="hljs-keyword">var</span> editor = <span class="hljs-keyword">new</span> JSONEditor(element,{
  schema: schema,
  template: <span class="hljs-string">'hogan'</span>
});</code></pre>
<p>这里有一个使用了模板引擎的完整的 <code>full_name</code> 的例子，供参考</p>
<pre class="js+jinja"><code class="hljs json">{
  "<span class="hljs-attr">type</span>": <span class="hljs-string">"object"</span>,
  "<span class="hljs-attr">properties</span>": {
    "<span class="hljs-attr">first_name</span>": {
      "<span class="hljs-attr">type</span>": <span class="hljs-string">"string"</span>
    },
    "<span class="hljs-attr">last_name</span>": {
      "<span class="hljs-attr">type</span>": <span class="hljs-string">"string"</span>
    },
    "<span class="hljs-attr">full_name</span>": {
      "<span class="hljs-attr">type</span>": <span class="hljs-string">"string"</span>,
      "<span class="hljs-attr">template</span>": <span class="hljs-string">"{{fname}} {{lname}}"</span>,
      "<span class="hljs-attr">watch</span>": {
        "<span class="hljs-attr">fname</span>": <span class="hljs-string">"first_name"</span>,
        "<span class="hljs-attr">lname</span>": <span class="hljs-string">"last_name"</span>
      }
    }
  }
}</code></pre>
<h3>枚举值</h3>
<p>另外一个常见的情况就是其他的字段的值依赖于下拉菜单的值参考下面的例子</p>
<div class="sourceCode"><pre class="sourceCode json"><code class="sourceCode json hljs"><span class="fu">{</span>
  <span class="dt">"<span class="hljs-attr">type</span>"</span><span class="fu">:</span> <span class="st"><span class="hljs-string">"object"</span></span><span class="fu">,</span>
  <span class="dt">"<span class="hljs-attr">properties</span>"</span><span class="fu">:</span> <span class="fu">{</span>
    <span class="dt">"<span class="hljs-attr">possible_colors</span>"</span><span class="fu">:</span> <span class="fu">{</span>
      <span class="dt">"<span class="hljs-attr">type</span>"</span><span class="fu">:</span> <span class="st"><span class="hljs-string">"array"</span></span><span class="fu">,</span>
      <span class="dt">"<span class="hljs-attr">items</span>"</span><span class="fu">:</span> <span class="fu">{</span>
        <span class="dt">"<span class="hljs-attr">type</span>"</span><span class="fu">:</span> <span class="st"><span class="hljs-string">"string"</span></span>
      <span class="fu">}</span>
    <span class="fu">},</span>
    <span class="dt">"<span class="hljs-attr">primary_color</span>"</span><span class="fu">:</span> <span class="fu">{</span>
      <span class="dt">"<span class="hljs-attr">type</span>"</span><span class="fu">:</span> <span class="st"><span class="hljs-string">"string"</span></span>
    <span class="fu">}</span>
  <span class="fu">}</span>
<span class="fu">}</span></code></pre></div>
<p>让我来告诉你，你想强制<code>primary_color</code>为一个<code>possible_colors</code> 数组中的一个。<br>
首先，我们必须告诉 <code>primary_color</code> 字段监控<code>possible_colors</code> 数组</p>
<div class="sourceCode"><pre class="sourceCode json"><code class="sourceCode json hljs"><span class="fu">{</span>
  <span class="dt">"<span class="hljs-attr">primary_color</span>"</span><span class="fu">:</span> <span class="fu">{</span>
    <span class="dt">"<span class="hljs-attr">type</span>"</span><span class="fu">:</span> <span class="st"><span class="hljs-string">"string"</span></span><span class="fu">,</span>
    <span class="dt">"<span class="hljs-attr">watch</span>"</span><span class="fu">:</span> <span class="fu">{</span>
      <span class="dt">"<span class="hljs-attr">colors</span>"</span><span class="fu">:</span> <span class="st"><span class="hljs-string">"possible_colors"</span></span>
    <span class="fu">}</span>
  <span class="fu">}</span>
<span class="fu">}</span></code></pre></div>
<p>接下来，我们使用一个特殊的关键词 <code>enumSource</code> 去告诉编辑器，我们想使用这个字段去填充下拉框</p>
<div class="sourceCode"><pre class="sourceCode json"><code class="sourceCode json hljs"><span class="fu">{</span>
  <span class="dt">"<span class="hljs-attr">primary_color</span>"</span><span class="fu">:</span> <span class="fu">{</span>
    <span class="dt">"<span class="hljs-attr">type</span>"</span><span class="fu">:</span> <span class="st"><span class="hljs-string">"string"</span></span><span class="fu">,</span>
    <span class="dt">"<span class="hljs-attr">watch</span>"</span><span class="fu">:</span> <span class="fu">{</span>
      <span class="dt">"<span class="hljs-attr">colors</span>"</span><span class="fu">:</span> <span class="st"><span class="hljs-string">"possible_colors"</span></span>
    <span class="fu">},</span>
    <span class="dt">"<span class="hljs-attr">enumSource</span>"</span><span class="fu">:</span> <span class="st"><span class="hljs-string">"colors"</span></span>
  <span class="fu">}</span>
<span class="fu">}</span></code></pre></div>
<p>那么一旦<code>possible_colors</code>数组的值发生变化，下拉菜单的值将被改变</p>
<p>这是 <code>enumSource</code>的最基本的用法。<br>
这个属性支持更多的动作，例如 filtering, pulling from multiple sources, constant values 等等。<br>
这里有一个复杂的例子，它使用swig模板引擎的语法去显示高级特性</p>
<pre class="js+jinja"><code class="hljs cpp">{
  <span class="hljs-comment">// An array of sources</span>
  <span class="hljs-string">"enumSource"</span>: [
    <span class="hljs-comment">// Constant values</span>
    [<span class="hljs-string">"none"</span>],
    {
      <span class="hljs-comment">// A watched field source</span>
      <span class="hljs-string">"source"</span>: <span class="hljs-string">"colors"</span>,
      <span class="hljs-comment">// Use a subset of the array</span>
      <span class="hljs-string">"slice"</span>: [<span class="hljs-number">2</span>,<span class="hljs-number">5</span>],
      <span class="hljs-comment">// Filter items with a template (if this renders to an empty string, it won't be included)</span>
      <span class="hljs-string">"filter"</span>: <span class="hljs-string">"{% if item !== 'black' %}1{% endif %}"</span>,
      <span class="hljs-comment">// Specify the display text for the enum option</span>
      <span class="hljs-string">"title"</span>: <span class="hljs-string">"{{item|upper}}"</span>,
      <span class="hljs-comment">// Specify the value property for the enum option</span>
      <span class="hljs-string">"value"</span>: <span class="hljs-string">"{{item|trim}}"</span>
    },
    <span class="hljs-comment">// Another constant value at the end of the list</span>
    [<span class="hljs-string">"transparent"</span>]
  ]
}</code></pre>
<p>你也可以使用如下语法去实现一个特殊的一个静态列表。</p>
<pre class="js+jinja"><code class="hljs prolog">{
  <span class="hljs-string">"enumSource"</span>: [{
      // <span class="hljs-symbol">A</span> watched field source
      <span class="hljs-string">"source"</span>: [
        {
          <span class="hljs-string">"value"</span>: <span class="hljs-number">1</span>,
          <span class="hljs-string">"title"</span>: <span class="hljs-string">"One"</span>
        },
        {
          <span class="hljs-string">"value"</span>: <span class="hljs-number">2</span>,
          <span class="hljs-string">"title"</span>: <span class="hljs-string">"Two"</span>
        }
      ],
      <span class="hljs-string">"title"</span>: <span class="hljs-string">"{{item.title}}"</span>,
      <span class="hljs-string">"value"</span>: <span class="hljs-string">"{{item.value}}"</span>
    }]
  ]
}</code></pre>
<p>这个例子直接使用了一个字符串数组。使用表单动作，你也可以将它构造成一个对象的数组，例如</p>
<pre class="js+jinja"><code class="hljs json">{
  "<span class="hljs-attr">type</span>": <span class="hljs-string">"object"</span>,
  "<span class="hljs-attr">properties</span>": {
    "<span class="hljs-attr">possible_colors</span>": {
      "<span class="hljs-attr">type</span>": <span class="hljs-string">"array"</span>,
      "<span class="hljs-attr">items</span>": {
        "<span class="hljs-attr">type</span>": <span class="hljs-string">"object"</span>,
        "<span class="hljs-attr">properties</span>": {
          "<span class="hljs-attr">text</span>": {
            "<span class="hljs-attr">type</span>": <span class="hljs-string">"string"</span>
          }
        }
      }
    },
    "<span class="hljs-attr">primary_color</span>": {
      "<span class="hljs-attr">type</span>": <span class="hljs-string">"string"</span>,
      "<span class="hljs-attr">watch</span>": {
        "<span class="hljs-attr">colors</span>": <span class="hljs-string">"possible_colors"</span>
      },
      "<span class="hljs-attr">enumSource</span>": [{
        "<span class="hljs-attr">source</span>": <span class="hljs-string">"colors"</span>,
        "<span class="hljs-attr">value</span>": <span class="hljs-string">"{{item.text}}"</span>
      }]
    }
  }
}</code></pre>
<p>在这个动作表单中，所有的模板选项都有一个item 和i 属性。<br>
item 指代的是数组元素<br>
i 是一个从0开始的序号</p>
<h3>动态标题</h3>
<p>The <code>title</code> keyword of a schema is used to add user friendly headers to the editing UI. Sometimes though, dynamic headers, which change based on other fields, are helpful.</p>
<p>Consider the example of an array of children. Without dynamic headers, the UI for the array elements would show <code>Child 1</code>, <code>Child 2</code>, etc..<br>
It would be much nicer if the headers could be dynamic and incorporate information about the children, such as <code>1 - John (age 9)</code>, <code>2 - Sarah (age 11)</code>.</p>
<p>To accomplish this, use the <code>headerTemplate</code> property. All of the watched variables are passed into this template, along with the static title <code>title</code> (e.g. "Child"), the 0-based index <code>i0</code> (e.g. "0" and "1"), the 1-based index <code>i1</code>, and the field's value <code>self</code> (e.g. <code>{"name": "John", "age": 9}</code>).</p>
<pre class="js+jinja"><code class="hljs json">{
  "<span class="hljs-attr">type</span>": <span class="hljs-string">"array"</span>,
  "<span class="hljs-attr">title</span>": <span class="hljs-string">"Children"</span>,
  "<span class="hljs-attr">items</span>": {
    "<span class="hljs-attr">type</span>": <span class="hljs-string">"object"</span>,
    "<span class="hljs-attr">title</span>": <span class="hljs-string">"Child"</span>,
    "<span class="hljs-attr">headerTemplate</span>": <span class="hljs-string">"{{ i1 }} - {{ self.name }} (age {{ self.age }})"</span>,
    "<span class="hljs-attr">properties</span>": {
      "<span class="hljs-attr">name</span>": { "<span class="hljs-attr">type</span>": <span class="hljs-string">"string"</span> },
      "<span class="hljs-attr">age</span>": { "<span class="hljs-attr">type</span>": <span class="hljs-string">"integer"</span> }
    }
  }
}</code></pre>
<h3 id="custom-template-engines">Custom Template Engines</h3>
<p>If one of the included template engines isn't sufficient,<br>
you can use any custom template engine with a <code>compile</code> method. For example:</p>
<pre class="js"><code class="hljs javascript"><span class="hljs-keyword">var</span> myengine = {
  compile: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">template</span>) </span>{
    <span class="hljs-comment">// Compile should return a render function</span>
    <span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">vars</span>) </span>{
      <span class="hljs-comment">// A real template engine would render the template here</span>
      <span class="hljs-keyword">var</span> result = template;
      <span class="hljs-keyword">return</span> result;
    }
  }
};

<span class="hljs-comment">// Set globally</span>
JSONEditor.defaults.options.template = myengine;

<span class="hljs-comment">// Set on a per-instance basis</span>
<span class="hljs-keyword">var</span> editor = <span class="hljs-keyword">new</span> JSONEditor(element,{
  schema: schema,
  template: myengine
});</code></pre>
<h2 id="language-and-string-customization">Language and String Customization</h2>
<p>JSON Editor uses a translate function to generate strings in the UI. A default <code>en</code> language mapping is provided.</p>
<p>You can easily override individual translations in the default language or create your own language mapping entirely.</p>
<pre class="js+jinja"><code class="hljs dts"><span class="hljs-comment">// Override a specific translation</span>
JSONEditor.defaults.languages.en.error_minLength =
  <span class="hljs-string">"This better be at least {{0}} characters long or else!"</span>;


<span class="hljs-comment">// Create your own language mapping</span>
<span class="hljs-comment">// Any keys not defined here will fall back to the "en" language</span>
JSONEditor.defaults.languages.es = {
<span class="hljs-symbol">  error_notset:</span> <span class="hljs-string">"propiedad debe existir"</span>
};</code></pre>
<p>By default, all instances of JSON Editor will use the <code>en</code> language. To override this default, set the <code>JSONEditor.defaults.language</code> property.</p>
<pre class="js"><code class="hljs javascript">JSONEditor.defaults.language = <span class="hljs-string">"es"</span>;</code></pre>
<h2 id="custom-editor-interfaces">Custom Editor Interfaces</h2>
<p>JSON Editor contains editor interfaces for each of the primitive JSON types as well as a few other specialized ones.</p>
<p>You can add custom editors interfaces fairly easily. Look at any of the existing ones for an example.</p>
<p>JSON Editor uses resolver functions to determine which editor interface to use for a particular schema or subschema.</p>
<p>Let's say you make a custom <code>location</code> editor for editing geo data. You can add a resolver function to use this custom editor when appropriate. For example:</p>
<pre class="js"><code class="hljs javascript"><span class="hljs-comment">// Add a resolver function to the beginning of the resolver list</span>
<span class="hljs-comment">// This will make it run before any other ones</span>
JSONEditor.defaults.resolvers.unshift(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">schema</span>) </span>{
  <span class="hljs-keyword">if</span>(schema.type === <span class="hljs-string">"object"</span> &amp;&amp; schema.format === <span class="hljs-string">"location"</span>) {
    <span class="hljs-keyword">return</span> <span class="hljs-string">"location"</span>;
  }

  <span class="hljs-comment">// If no valid editor is returned, the next resolver function will be used</span>
});</code></pre>
<p>The following schema will now use this custom editor for each of the array elements instead of the default <code>object</code> editor.</p>
<div class="sourceCode"><pre class="sourceCode json"><code class="sourceCode json hljs"><span class="fu">{</span>
  <span class="dt">"<span class="hljs-attr">type</span>"</span><span class="fu">:</span> <span class="st"><span class="hljs-string">"array"</span></span><span class="fu">,</span>
  <span class="dt">"<span class="hljs-attr">items</span>"</span><span class="fu">:</span> <span class="fu">{</span>
    <span class="dt">"<span class="hljs-attr">type</span>"</span><span class="fu">:</span> <span class="st"><span class="hljs-string">"object"</span></span><span class="fu">,</span>
    <span class="dt">"<span class="hljs-attr">format</span>"</span><span class="fu">:</span> <span class="st"><span class="hljs-string">"location"</span></span><span class="fu">,</span>
    <span class="dt">"<span class="hljs-attr">properties</span>"</span><span class="fu">:</span> <span class="fu">{</span>
      <span class="dt">"<span class="hljs-attr">longitude</span>"</span><span class="fu">:</span> <span class="fu">{</span>
        <span class="dt">"<span class="hljs-attr">type</span>"</span><span class="fu">:</span> <span class="st"><span class="hljs-string">"number"</span></span>
      <span class="fu">},</span>
      <span class="dt">"<span class="hljs-attr">latitude</span>"</span><span class="fu">:</span> <span class="fu">{</span>
        <span class="dt">"<span class="hljs-attr">type</span>"</span><span class="fu">:</span> <span class="st"><span class="hljs-string">"number"</span></span>
      <span class="fu">}</span>
    <span class="fu">}</span>
  <span class="fu">}</span>
<span class="fu">}</span></code></pre></div>
<p>如果你创建了一个对其他人有用的自定义的编辑器，请提交并分享它给别人！</p>
<p>可能性是无穷无尽的。下面有一些好的些想法:</p>
<ul>
<li>用一个紧凑的方式去编辑</li>
<li>下拉框用单选按钮来实现</li>
<li>字符串的自动提示,类似枚举但是并不局限于枚举</li>
<li>字符串数组使用tag 方式来实现会更好些</li>
<li>基于Canvas的图片编辑器等</li>
</ul>
<h2>自定义验证</h2>
<pre class="js"><code class="hljs javascript"><span class="hljs-comment">// 如果验证通过返回一个空的数组，验证不通过则需要返回错误信息</span>
JSONEditor.defaults.custom_validators.push(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">schema, value, path</span>) </span>{
  <span class="hljs-keyword">var</span> errors = [];
  <span class="hljs-keyword">if</span>(schema.format===<span class="hljs-string">"date"</span>) {
    <span class="hljs-keyword">if</span>(!<span class="hljs-regexp">/^[0-9]{4}-[0-9]{2}-[0-9]{2}$/</span>.test(value)) {
      <span class="hljs-comment">// Errors must be an object with `path`, `property`, and `message`</span>
      errors.push({
        path: path,
        property: <span class="hljs-string">'format'</span>,
        message: <span class="hljs-string">'Dates must be in the format "YYYY-MM-DD"'</span>
      });
    }
  }
  <span class="hljs-keyword">return</span> errors;
});</code></pre>
<h2 id="jquery">集成jQuery</h2>
<p>当jquery 加载到页面的时候，你可以用jquery 的方式去加载插件，如下</p>
<pre class="js"><code class="hljs javascript">$(<span class="hljs-string">"#editor_holder"</span>)
  .jsoneditor({
    schema: {},
    theme: <span class="hljs-string">'bootstrap3'</span>
  })
  .on(<span class="hljs-string">'ready'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
    <span class="hljs-comment">// Get the value</span>
    <span class="hljs-keyword">var</span> value = $(<span class="hljs-keyword">this</span>).jsoneditor(<span class="hljs-string">'value'</span>);

    value.name = <span class="hljs-string">"John Smith"</span>;

    <span class="hljs-comment">// Set the value</span>
    $(<span class="hljs-keyword">this</span>).jsoneditor(<span class="hljs-string">'value'</span>,value);
  });</code></pre>
		</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>