Editable element

[bernardodiasc]

This element is a piece of text that can be editable using HTML contenteditable capabilities.

Early conclusion: contenteditable needs a wysiwyg or markdown editor.
The browser built-in feature is very simple and don't allow to edit text elements properly.

XML

Input

<data>
  <element id="element-id" contenteditable="true">
    <h1>Text</h1>
    <a>http://</a>
    <span>value</span>
  <element>
</data>

XSL

In this layer I can mess around XML nodes and turn into HTML using a XSL template:

Place <xsl:apply-templates select="data/element[@id = 'element-id']" mode="mode-name"/> where in HTML you want to show this element data. Usage sample: index.xsl#L17-L19

Template being applied:

<xsl:template match="data/element" mode="mode-name">
  <element id="{@id}" contenteditable="{@contenteditable}">
    <h1>
      <a href="{a}">
        <xsl:value-of select="h1"/> <span><xsl:value-of select="span"/></span>
      </a>
    </h1>
  <element>
</xsl:template>

HTML

Output

<element contenteditable="true">
  <h1>
    <a href="http://">Text <span>value</span></a>
  </h1>
</element>

CSS

Basic presentation

element {
  display: inline-block;
  position: relative;
  width: auto;
  line-height: 1;
}

element[contenteditable="true"]:before {
  border: 1px solid silver;
  display: block;
  content: '';
  position: absolute;
  height: 100%;
  clear: both;
  top: 0px;
  left: 0px;
  width: 100%;
  padding: 2em;
}

element[contenteditable="true"]:after {
  content: '';
  display: block;
  background: rgb(250, 235, 215);
}

JS

storage stuff. connection via rest api