what_is_substance_short.md

What is Substance?

• Library for web-based WYSIWIG editors
• Not a widget, as other existing editors
• Substance => Customization
  • Data schema
  • Converters
  • Rendering
  • Toolbar / Tools
  • Keybindings
  • Macros
  • etc.

Examples

Customized Data:

var Figure = BlockNode.extend();

Figure.static.name = "figure";

Figure.static.defineSchema({
  "title": "text",
  "img": "string",
  "caption": "text"
});

Customized Converter:

type: 'figure',
tagName: 'figure',

import: function(el, node, converter) {
  var title = el.find('.title');
  var img = el.find('img');
  var figcaption = el.find('figcaption');

  node.title = converter.annotatedText(title, [node.id, 'title']);
  node.img = img.attr('src');
  node.caption = converter.annotatedText(figcaption, [node.id, 'caption']);
},

export: function(node, el, converter) {
  // title
  el.append($$('h1').addClass('title').append(
    converter.annotatedText([node.id, 'title']))
  );
  // image
  el.append($$('img').attr('src', node.src);
  // caption
  el.append($$('figcaption').append(
    converter.annotatedText([node.id, 'caption']))
  );
  return el;
}

Detailed version of this: What is Substance?