Editor removing extra div attributes

Help
#1

I am trying to use Raster, a CSS grid system to align content within my posts. I used the generator at the bottom of the page to use classes instead of custom elements (<r-grid>) since Write.as doesn’t seem to let me use custom elements. Then, I tried a very simple example:

<div class="r-grid" columns=8>
  <div class="r-cell" span=5..>Content starts on 5th cell</div>
</div>

But when I hit publish, the editor seems to be removing the extra attributes, making it something like:

<div class="r-grid">
  <div class="r-cell">Content starts on 5th cell</div>
</div>

Which makes me unable to use the library. Why are the extra attributes being removed?

1 Like
#2

Update: It is possible to bypass this with JavaScript! I’ve achieved this by matching the properties as if they were classes, and then replacing the classes with attributes. So the final HTML looks like this:

<div class="r-grid columns=8">
  <div class="r-cell span=5..">Content starts on 5th cell</div>
</div>

And the JS used is this:

function rasterClassTranspose() {
  /// transpose grid elements ///
  // select all grids
  var gels = document.querySelectorAll(".r-grid");
  // find classes columns[-s|-l]=x in them through iteration
  let re_columns = /columns(\-s|\-l)?\=(\d)/
  for (var gi = 0; gi < gels.length; gi++) {
    let el = gels[gi]; // element
    for (var gj = 0; gj < el.classList.length; gj++) {
      let cln = el.classList.item(gj); // class name
      if (re_columns.test(cln)) {
        let coln = cln.match(re_columns); // column number
        if (coln[1]===undefined) {coln[1]="";}
        el.setAttribute("columns" + coln[1], coln[2]);
        el.classList.remove("columns" + coln[1] + "=" + coln[2])
      }
    }
  }
  // select all cells
  var cels = document.querySelectorAll(".r-cell");
  // find classes span[-s|-l]=x in them through iteration
  let re_spans = /span(\-s|\-l)?\=(.+)/
  for (var ci = 0; ci < cels.length; ci++) {
    let el = cels[ci]; // element
    for (var cj = 0; cj < el.classList.length; cj++) {
      let cln = el.classList.item(cj); // class name
      if (re_spans.test(cln)) {
        let spn = cln.match(re_spans); // span number
        if (spn[1]===undefined) {spn[1]="";}
        el.setAttribute("span" + spn[1], spn[2]);
        el.classList.remove("span" + spn[1] + "=" + spn[2])
      }
    }
  }
}

document.addEventListener('DOMContentLoaded', function() {
    rasterClassTranspose();
}, false);

It might not be the best JS, but it’s good enough for me. I still wish that Write.as just let me use custom elements and attributes, though.

1 Like