Go To Github

COMPONENT

c-rte

Demo Section

Each variation will be presented in the following sections.

Markdown file with full path

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.

Markdown file in current working directory

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.

Technical Details

README

Bower versionGitter Chat

Rich Text Editor (Markdown Component)

Description

The RTE component is a simple partial which supports the usage of markdown files just by refencing them in your file system.

Requirements

Installation

Installation with Veams

veams install vc rte

Installation with Bower

bower install veams-component-rte --save

Fields

Settings

  • settings.rteContextClass {String} [default] - Context class of the rte.
  • settings.rteClasses {String} - Modifier classes for the rte.
  • settings.rteCWD {Boolean} - Set to true if you want use the current working directory of the page.
  • settings.rteCWDLevelUp {Number} - You can go up directories by providing a number.

Content

  • content.rteMd {String} - Path to markdown file (starting at the root directory if you do not use settings.rteCWD).
Data File
{
	"variations": {
		"single": {
			"docs": {
				"variationName": "Markdown file with full path"
			},
			"settings": {
				"rteContextClass": "content",
				"rteClasses": "is-small"
			},
			"content": {
				"rteMd": "resources/templating/partials/components/rte/markdown/text.md"
			}
		},
		"cwdMd": {
			"docs": {
				"variationName": "Markdown file in current working directory"
			},
			"settings": {
				"rteContextClass": "content",
				"rteClasses": "is-small",
				"rteCWD": true,
				"rteCWDLevelUp": 1
			},
			"content": {
				"rteMd": "markdown/text.md"
			}
		}
	}
}
Templates

c-rte

<div class="c-rte{{#if settings.rteContextClass}}--{{settings.rteContextClass}}{{else}}--default{{/if}}{{#if settings.rteClasses}} {{settings.rteClasses}}{{/if}}"
     data-css="c-rte">
	{{! Error handling }}
	{{#unless content.rteMd}}
		<h2 style="color: red">Please provide a path to your markdown file!</h2>
	{{/unless}}

	{{#if settings.rteCWD}}
		{{! Error handling }}
		{{#unless settings.rteCWDLevelUp}}
			<h2 style="color: red">You have to provide a level - default should be 0!</h2>
		{{/unless}}

		{{{markdown (buildPath @root.currentPage.dirname content.rteMd goUp=settings.rteCWDLevelUp)}}}
	{{else}}
		{{{markdown content.rteMd}}}
	{{/if}}
</div>
Styles
/* ===================================================
RTE COMPONENT
=================================================== */

/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */

[data-css="c-rte"] {

	/*
	Headlines
	----------------------------- */
	h1 {
	}

	h2 {
	}

	h3 {
	}

	h4 {
	}

	/*
	Paragraph
	----------------------------- */
	p {
		&:last-child {
			margin: 0;
		}
	}

	strong, b {
		font-weight: 700;
	}

	em,
	i {
		font-style: italic;
	}

	/*
	Lists
	----------------------------- */
	ul,
	ol {
	}

	ul {
	}

	ol {
	}

	/*
	Tables
	----------------------------- */
	table {
		th {
		}
		td {
		}
	}

	/*
	Others
	----------------------------- */
	hr {
	}
}

/* ---------------------------------------------------
Context: Default
--------------------------------------------------- */
.c-rte--default {
}
HTML Output

Markdown file with full path

<div class="c-rte--content is-small" data-css="c-rte">
	<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named <strong>Duden</strong> flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in <strong>which roasted parts</strong> of sentences fly into your mouth.</p>
</div>

Markdown file in current working directory

<div class="c-rte--content is-small" data-css="c-rte">
	<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named <strong>Duden</strong> flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in <strong>which roasted parts</strong> of sentences fly into your mouth.</p>
</div>