Creating editable regions

Defining simple, plaintext regions

You can delimitate editable areas, allowed to contain plain text only, adding the editable="inline" attribute to any HTML tag.

Some HTML examples:

 
<h1 editable="inline">I am an editable heading</h1>
<p editable="inline">I am an editable paragraph</p>
<span editable="inline">I am an editable span element</span>

While the LiveCanvas editor is launched, clicking these elements will turn them into contenteditable items.
You will be able to easily replace their content pasting text or writing.

On the top bar, you will notice a B and  an I icon, in order to bold or italic your selection.

Please mind that only <b> and <i> tags are legal inside these regions: every other tag is stripped out by design, upon unfocusing the element.

Defining  rich text regions

You can delimitate editable areas, allowed to contain rich text, adding the editable="rich" attribute to any HTML tag.

HTML sample code:

 
<div editable="rich">
<h1>I am a rich-editable area</h1>
<p>I can contain more than one element</p>
</div>

While the LiveCanvas editor is launched, clicking these elements will turn them into contenteditable items.
You will be able to easily replace their content pasting text or writing.
On the top bar, you will notice some tools allowing you to style your selection, using

  • <ul> and <ol>
  • Heading tags (H1- H6)
  • Display classes (D1-D4)
  • The usual suspects: Bold and Italic
  • Blockquote, Code and KBD
  • Links

Here is what it looks like:

 

Please mind that only these tags are legal inside these regions: every other tag is stripped out by design, upon unfocusing the element.