CODEWITHSUNDEEP
pluginsckeditor5neoscms
Markus
Markus

Reputation: 21

Keep span from own plugin in table

I created a plugin like the Placeholder package here for the CKEditor. I use the Package in the #neoscms. That is a bit special because Neos does not use the UI part of the CKEditor.

But the technology below is the same. The placeholder plugin works fine until you use it inside a table. In Neos we use the CKEditor for inline editing and the save the markup to the database for the given node. So, when you reload the page, the CKE transforms the Markup again, and you can adjust this.

This is also one of the issues. The placeholder, which is saved in a span with some data-attributes, works fine until I save the stuff to the Database and reload the page. After that, I just have the span from the table cell and all my data-attributes are gone.

Similar package: https://www.npmjs.com/package/ckeditor5-placeholder

That leads to my question, is it possible to lock an element somehow. So that the table does not touch the content or transform it?

<table>
   <tbody>
      <tr>
         <td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span>element-42</span></td>
         <td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span>element-22</span></td>
         <td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span>&nbsp;</span></td>
      </tr>
      <tr>
         <td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span>&nbsp;</span></td>
         <td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span>&nbsp;<span class="foo-placeholder ck-widget ck-widget_selected" data-placeholder-identifier="element-22" data-placeholder-value="231" data-node-identifier="9f985c14-a4c4-4cf7-a2fa-53a1c6b3c39d"  contenteditable="false">element-22</span></span></td>
         <td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span>&nbsp;</span></td>
      </tr>
      <tr>
         <td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span>&nbsp;</span></td>
         <td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span>&nbsp;</span></td>
         <td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span>&nbsp;</span></td>
      </tr>
      <tr>
         <td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span>&nbsp;</span></td>
         <td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span>&nbsp;</span></td>
         <td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span>&nbsp;</span></td>
      </tr>
   </tbody>
</table>

Here we can see in the first cells with element-42 that the content has been striped down. It should be something like that. (this is just there until I publish changes and reload)

<td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true">
  <span>
    &nbsp;
    <span
      class="foo-placeholder ck-widget ck-widget_selected"
      data-placeholder-identifier="element-22"
      data-placeholder-value="231"
      data-node-identifier="9f985c14-a4c4-4cf7-a2fa-53a1c6b3c39d"
      contenteditable="false">
    element-22
    </span>
  </span>
</td>

Would be so nice if someone has a hint. Other elements like i works fine. But dont want to use it.

Upvotes: 1

Views: 91

Answers (0)

Related Questions