Thursday, January 5, 2017

Build your own editor with Substance Converter. A scientific article (schema) or a story map is more complex than a blog post.

Substance is a library for creating web-based WYSIWYG editors with all the features you would expect.
A JavaScript library for web-based content editing.
https://github.com/substance/

As opposed to other existing editors, such as TinyMCE, Aloha etc. Substance is not just a widget you include into your web app. It is a library. Widgets are often not good enough. They lead to a bad UX. They are like alien isles within the web-app. And those are very limited regarding customization.
The unique point of Substance is Customizability. You can customize everything. And we make this as simple as possible for you.

Building an editor starts with the data. For instance, a scientific article is more complex than a blog post. Still, there is some similarity. Both of them have paragraphs, for instance. In Substance you define a schema, containing a set of Node descriptions:

class Todo extends TextBlock {} Todo.define({ type: 'todo', content: 'text', done: { type: 'bool', default: false} })

Probably you are already using a certain data format, XML files or HTML. With Substance you can create a custom converter very easily:

export default { type: 'todo', tagName: 'div', matchElement: function(el) { return el.is('div') && el.hasClass('todo') }, import: function(el, node, converter) { node.content = converter.annotatedText(el, [node.id, 'content']) node.done = el.attr('data-done') === '1' }, export: function(node, el, converter) { el.append(converter.annotatedText([node.id, 'content'])) .addClass('todo') .attr('done', node.done ? '1': '0'); } }



add tags:

Ref:

No comments:

Post a Comment