content-kit-compiler

ContentKit Compiler

Parses and renders content to and from the JSON model that backs ContentKit's WYSIWYG Editor

Examples

Parsing HTML:

<h2>My First Blog Post</h2>
<h3>The Subtitle</h3>
<p>This is a paragraph, with a <a href="http://google.com/">link</a> and some <b>formatting</b>.</p>
<img src="kittens.png" alt="Kittens"/>
<ul>
  <li>Item A</li> 
  <li>Item B</li>
</ul>

var compiler = new ContentKit.Compiler();
var json = compiler.parse(html);

Output:

[
  {
    "type":2,
    "value":"My First Blog Post",
    "markup":[]
  },
  {
    "type":3,
    "value":"The Subtitle",
    "markup":[]
  },
  {
    "type":1,
    "value":"This is a paragraph, with a link and some formatting.",
    "markup":[
      {
        "start":28,
        "end":32,
        "type":4,
        "attributes":{
          "href":"http://google.com/"
        }
      },
      {
        "start":42,
        "end":52,
        "type":1
      }
    ]
  },
  {
    "type":4,
    "value":"",
    "markup":[],
    "attributes":{
      "src":"kittens.png",
      "alt":"Kittens"
    }
  },
  {
    "type":6,
    "value":"Item A Item B",
    "markup":[
      {
        "start":0,
        "end":6,
        "type":6
      },
      {
        "start":7,
        "end":13,
        "type":6
      }
    ]
  }
]

Rendering JSON to HTML:

var html = compiler.render(json);

Output:

<h2>My First Blog Post</h2><h3>The Subtitle</h3><p>This is a paragraph, with a <a href="http://google.com/">link</a> and some <b>formatting</b>.</p><img src="kittens.png" alt="Kittens"/><ul><li>Item A</li> <li>Item B</li></ul>

Building / Testing

npm install
gulp