Skip to content

Embedding HTML via ccm components

Jump to bottom Edit New page
Manfred Kaul edited this page Oct 14, 2018 · 5 revisions

How to load remote content into your web app? How to embed HTML using ccm Components?

Here are some ways to embed HTML using ccm components:

  1. via ccm tags with remote config
  2. via ccm.content.js and HTML import
  3. using ccm.start()
  4. via ccm.content.js and remote config

In detail:

1. ccm tags with remote config delivered via the key- attribute

<script src="https://ccmjs.github.io/akless-components/menu/versions/ccm.menu-2.4.0.js"></script>
<ccm-menu-2-4-0 key='["ccm.get","https://ccmjs.github.io/akless-components/menu/resources/configs.js","demo"]'></ccm-menu-2-4-0>

2. via content and HTML import

Attention: JSON-Format with Double Quotes required as values of HTML attributes

<script src="https://ccmjs.github.io/akless-components/content/ccm.content.js"></script>
<ccm-content inner='[ "ccm.load", "//kaul.inf.h-brs.de/data/2017/se1/le03.html" ]'></ccm-content>

or as nested HTML tag, which is interpreted by ccm as attribute definition:

<script src="https://ccmjs.github.io/akless-components/content/ccm.content.js"></script>
<ccm-content>
  <ccm-load-inner src="https://kaul.inf.h-brs.de/data/2017/se1/le00.html"></ccm-load-inner>
</ccm-content>

3. Using ccm.start() 

<body>
<script src="https://ccmjs.github.io/ccm/ccm.js"></script>
<script>
  ccm.start( 'https://ccmjs.github.io/akless-components/content/ccm.content.js', { root: document.body, inner: [ 'ccm.load', 'https://kaul.inf.h-brs.de/data/2017/se1/le00.html' ] } );
</script>

4. Using ccm.content.js und remote config

<script src="https://ccmjs.github.io/akless-components/content/ccm.content.js"></script>
<ccm-content key='["ccm.get","https://kaul.inf.h-brs.de/data/2017/se1/json/configs.js", "demo"]'></ccm-content>
Add a custom footer
Add a custom sidebar
Clone this wiki locally