Home » Javascript » CKEditor: How can I upcast a nested widget

CKEditor: How can I upcast a nested widget

Posted by: admin November 1, 2017 Leave a comment

Questions:

I created a widget which includes a predefined HTML-table. It can be inserted like so:

<cw-table data-id="42"></cw-table>

In CKEDITOR.plugins.widget.definition.data function the table data will be fetched from the server via ajax request:

function() {

var that = this;
var ajaxRequest = jQuery.ajax({
    url: editor.config.url + 'table/' + this.data.dataId,
    dataType: 'json'
});

ajaxRequest.done(function(tableData) {

    var cells = tableData.cells;
    var orderedCells = [];


    cells.forEach(function(cell) {
        if (!orderedCells[cell.row]) {
            orderedCells[cell.row] = [];
        }
        orderedCells[cell.row][cell.columnid] = cell;
    });

    var table = new CKEDITOR.dom.element('table');


    var tbody = new CKEDITOR.dom.element('tbody');
    for (var i = tableData.firstrow; i <= tableData.lastrow; i++) {
        var tr = new CKEDITOR.dom.element('tr');
        orderedCells[i].forEach(function(cell) {
            var td = new CKEDITOR.dom.element('td');
            if (cell.inhalt) {
                td.appendHtml(cell.inhalt);
            }
            var styles = that.getStylesForCell(tableData, cell);
            if (styles) {
                td.setStyles(styles);
            }
            tr.append(td);
        });
        tbody.append(tr);
    }
    table.append(tbody);
    that.element.append(table);
});

The result will look like so:

<cw-table data-id="42">
<table>
<tr>
  <td>Cell I</td>
  <td>Cell II</td>
</tr>
<tr>
  <td>Cell III</td>
  <td>Cell IV</td>
</tr>
</table>
</cw-table>

This works as expected and the “cw-table”-widget is upcasted correctly.
But sometimes in a table cell there is another widget element like so:

<cw-table data-id="42">
<table>
<tr>
  <td><cw-media data-id="22"></cw-media></td>
  <td><cw-media data-id="32"></cw-media></td>
</tr>
</table>
</cw-table>

How can I achieve that this second widget element “cw-media” is also upcasted?

Answers: