Add new WYSIWYG example. Version bump.

jdorn · Aug 11, 2014 · 74ff84b · 74ff84b
1 parent 1afe5a4
commit 74ff84b
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 17 deletions.
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "json-editor",
-  "version": "0.7.4",
+  "version": "0.7.5",
   "authors": [
     "Jeremy Dorn <[email protected]>"
   ],

diff --git a/dist/jsoneditor.js b/dist/jsoneditor.js
@@ -1,8 +1,8 @@
-/*! JSON Editor v0.7.4 - JSON Schema -> HTML Editor
+/*! JSON Editor v0.7.5 - JSON Schema -> HTML Editor
  * By Jeremy Dorn - https://github.com/jdorn/json-editor/
  * Released under the MIT license
  *
- * Date: 2014-07-29
+ * Date: 2014-08-10
  */
 
 /**
@@ -1735,9 +1735,10 @@ JSONEditor.defaults.editors.string = JSONEditor.AbstractEditor.extend({
       return;
     }
 
-    value = value || '';
-    if(typeof value === "object") value = JSON.stringify(value);
-    if(typeof value !== "string") value = ""+value;
+    if(value === null) value = "";
+    else if(typeof value === "object") value = JSON.stringify(value);
+    else if(typeof value !== "string") value = ""+value;
+
     if(value === this.serialized) return;
 
     // Sanitize value before setting it
@@ -1780,7 +1781,7 @@ JSONEditor.defaults.editors.string = JSONEditor.AbstractEditor.extend({
     this.jsoneditor.notifyWatchers(this.path);
   },
   getNumColumns: function() {
-    var min = Math.ceil(this.getTitle().length/5);
+    var min = Math.ceil(Math.max(this.getTitle().length,this.schema.maxLength||0,this.schema.minLength||0)/5);
     var num;
 
     if(this.input_type === 'textarea') num = 6;
@@ -3888,12 +3889,12 @@ JSONEditor.defaults.editors.table = JSONEditor.defaults.editors.array.extend({
       this.container.appendChild(this.title);
       this.title_controls = this.theme.getHeaderButtonHolder();
       this.title.appendChild(this.title_controls);
-      this.panel = this.theme.getIndentedPanel();
-      this.container.appendChild(this.panel);
       if(this.schema.description) {
         this.description = this.theme.getDescription(this.schema.description);
-        this.panel.appendChild(this.description);
+        this.container.appendChild(this.description);
       }
+      this.panel = this.theme.getIndentedPanel();
+      this.container.appendChild(this.panel);
       this.error_holder = document.createElement('div');
       this.panel.appendChild(this.error_holder);
     }
@@ -4842,9 +4843,10 @@ JSONEditor.defaults.editors.select = JSONEditor.AbstractEditor.extend({
 
       self.value = self.enum_values[self.enum_options.indexOf(val)];
 
+      self.watch_listener();
+      self.notify();
       if(self.parent) self.parent.onChildEditorChange(self);
       else self.jsoneditor.onChange();
-      self.jsoneditor.notifyWatchers(self.path);
     });
 
     this.control = this.theme.getFormControl(this.label, this.input, this.description);

diff --git a/dist/jsoneditor.min.js b/dist/jsoneditor.min.js
diff --git a/examples/wysiwyg.html b/examples/wysiwyg.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>JSON Editor WYSIWYG Example</title>
+    <script src="../dist/jsoneditor.js"></script>
+    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+    <script src="//cdn.jsdelivr.net/sceditor/1.4.3/jquery.sceditor.bbcode.min.js"></script>
+    <link rel="stylesheet" href="//cdn.jsdelivr.net/sceditor/1.4.3/jquery.sceditor.default.min.css">
+    <script src="//cdn.jsdelivr.net/sceditor/1.4.3/jquery.sceditor.xhtml.min.js"></script>
+    <link rel="stylesheet" href="//cdn.jsdelivr.net/sceditor/1.4.3/themes/default.min.css">
+  </head>
+  <body>
+    <h1>JSON Editor WYSIWYG Example</h1>
+
+    <p style='margin-bottom:20px;'>This example demonstrates JSONEditor's integration with SCEditor</p>
+
+    <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: "Blog Post",
+          properties: {
+            title: {
+              type: "string"
+            },
+            body: {
+              type: "string",
+              format: "html",
+              options: {
+                wysiwyg: true
+              }
+            }
+          }
+        }
+      });
+
+      // 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>
diff --git a/src/intro.js b/src/intro.js
@@ -1,8 +1,8 @@
-/*! JSON Editor v0.7.4 - JSON Schema -> HTML Editor
+/*! JSON Editor v0.7.5 - JSON Schema -> HTML Editor
  * By Jeremy Dorn - https://github.com/jdorn/json-editor/
  * Released under the MIT license
  *
- * Date: 2014-07-29
+ * Date: 2014-08-10
  */
 
 /**