Widget with variable content editable rows

I'm trying to construct a widget where a set of editable selectors could appear multiple times. Imagine the following:

template:
  '<section class="mywidget">' +
    '<div class="mywidget__row">' +
      '<h3 class="mywidget__label">An editable label</h3>' +
      '<p class"mywidget__value">Editable value</p>' +
    '</div>' +
    '<div class="mywidget__row">' +
      '<h3 class="mywidget__label">Another label</h3>' +
      '<p class"mywidget__value">Another value</p>' +
    '</div>' +
  '</section>',

editables: {
  label: {
    selector: '.mywidget__label',
  },
  value: {
    selector: '.mywidget__value',
  }
}

A dialog would be used to set the number of rows. However, when loaded only the first occurrance of the selectors are editable. Is it possible to do this with the current 4.4 widget system?

I suppose if not I could always set each row content via the dialog and have it insert the rows with their content. This would not be as nice an experience for the users though.

Sat, 06/28/2014 - 14:22

magicmyth

Joined: 23/07/2013

Posts: 4

I managed to work this out

I managed to work this out with a little help from this forum post:

http://ckeditor.com/forums/Support/Mutable-templates-for-the-widgets-plugin

reinmar's post pointed me in the right direction. Basically my template definition contains a bunch of additional rows as hidden editables. When downcasting happens I alter the past CKEDITOR.htmlParser.element by removing any editable with a display style of none. When an existing element is being upcast to the widget, I again alter the element, but this time adding in any missing editable rows with a style:"display: none;" set. Then my widget dialog has a fixed set of checkboxes (one for each row). When checked they remove the "display: none" style attribute and when unchecked they add it. Ideally I'd be able to have a trully dynamic set of rows but that it seems is currently not possible with the current API. Fortunatley my current goals fit within this limitation.

When I have more time free I'll try to do a proper guide.

Thu, 10/30/2014 - 09:14

unrivaled1

Joined: 29/02/2008

Posts: 5

what did you do?

I have the same problem. I'm adding a row with multiple columns, all with the same class but I can only edit the first DIV.

What was your solution?

Thanks

Sat, 11/01/2014 - 14:05

magicmyth

Joined: 23/07/2013

Posts: 4

I had to generate a unqique

I had to generate a unqique class for each row so that they would be editable. So instead of:

editables = {
    row: {
      selector: '.row',
      allowedContent: 'br strong em'
    }
}

I did:

function _editables() {
  var editables = {};

  for (var i = 0; i < _num_items; i++) {
    editables['row' + i] = {
      selector: '.row--' + i,
      allowedContent: 'br em strong'
    };
  }

  return editables;
}

// Widget definition
editables: _editables(),

Note that I've not solved how to do a trully dynamic widget. But I only needed to allow for so many rows before things are unpractical anyway.

I hope that helps?

Tue, 11/04/2014 - 11:21

reinmar

Joined: 24/08/2012

Posts: 631

I reported a ticket for this

I reported a ticket for this missing feature - http://dev.ckeditor.com/ticket/12524.

Piotrek (Reinmar) Koszuliński
CKEditor JavaScript Developer
--
CKSource - http://cksource.com
--
Follow CKEditor on: Twitter | Facebook | Google+