Livingdoc
A Livingdoc represents a Livingdocs document. It consists of a componentTree and can have one or more views.

Examples

Create a new livingdoc:

1
const doc = require('@livingdocs/framework')
2
​
3
doc.design.load(jsonSerializedDesign)
4
​
5
const livingdoc = doc.create({
6
design: {
7
name: 'bootstrap',
8
version: '1.0.0'
9
}
10
})
Copied!

Create views:

Simply render a livingdoc into your current page:
1
livingdoc.appendTo('.article-container', { interactive: false })
Copied!
Create multiple views in iframes:
1
const interactiveView = livingdoc.createView('.editor-section', {interactive: true})
2
const preview = livingdoc.createView('.editor-preview')
Copied!
With the iframe technique you can isolate CSS or Javascript that is needed in your documents and also generate views that will work properly with responsive designs. There can only be one interactive view where the user can edit, but you can have as many readOnly views as you want to preview the content at different screen sizes at the same time.

Properties

componentTree

A componentTree instance. Here you can manipulate your document.

design

The Design used in this livingdoc.

views

An array of all views associated with this livingdoc.

interactiveView

The interactiveView associated with this livingdoc if you created one.

Methods

createComponent()

1
// Create a component
2
const titleComponent = livingdoc.createComponent('title')
3
const componentTree = livingdoc.componentTree
4
componentTree.append(titleComponent)
Copied!

toJson()

With toJson() you can serialize a Livingdoc to a JSON string. To get a JSON object instead of a string, you can call serialize() instead of toJson().
Here you see a serialized version of a livingdoc in JSON. This is an example document that uses the 'ghibli' design and consists of three components: A cover, a title and a lead.
1
{
2
"content": [
3
{
4
"id": "doc-18fsfqsiq0",
5
"component": "cover",
6
"content": {}
7
},
8
{
9
"id": "doc-18fsfr5f50",
10
"component": "title",
11
"content": {
12
"title": "Storytellers have more fun"
13
}
14
},
15
{
16
"id": "doc-18fsfra8r0",
17
"component": "lead",
18
"content": {
19
"text": "Yet, if we look at the interesting people in our lives, I think we’ll find few of them have climbed Mount Everest or broken a wild mustang. Most have never wrestled an alligator or gotten embroiled in a covert operation. Most haven’t seen a whole lot of real excitement."
20
}
21
}
22
]
23
}
Copied!

Manage Dependencies

1
// add js
2
livingdoc.addJsDependency({src: 'url'})
3
livingdoc.addJsDependency({code: 'inline js'})
4
​
5
// add css
6
livingdoc.addCssDependency({src: 'url'})
7
livingdoc.addCssDependency({code: 'inline css'})
8
​
9
// use namespaces
10
livingdoc.addJsDependency({src: 'url', namespace: 'embeds.twitter'})
11
​
12
// Access the dependencies collection directly:
13
const dependencies = livingdoc.dependencies
14
​
15
// Transform to JSON object
16
dependencies.serialize()
17
​
18
// Get namespaces (Array of String)
19
dependencies.getNamespaces()
20
​
21
// Get all dependencies of a namespace
22
dependencies.getNamespace('embeds.twitter')
23
​
24
// Get an HTML string to include in a published document or to
25
// Add to a document on the server side.
26
dependencies.printJs()
27
dependencies.printCss()
Copied!

Exposed Modules:

For reuse in the editor these modules are exposed on doc: doc.JsLoader and doc.CssLoader
1
# Example:
2
const jsLoader = new doc.JsLoader({window: iframe.contentWindow})
3
jsLoader.loadSingleUrl(url, callback)
4
jsLoader.loadInlineScript(url, callback)
Copied!
Last modified 1yr ago