从表格中保留自己的插件

发布于 2025-02-11 17:45:03 字数 3428 浏览 1 评论 0原文

我在此处为CKEditor创建了一个像占位符的插件。我在#Neoscms中使用软件包。这有点特别，因为NEOS不使用CKEditor的UI部分。

但是下面的技术是相同的。占位符插件正常工作，直到您在表中使用它为止。在NEOS中，我们使用CKEditor进行内联编辑，并将标记保存到给定节点的数据库中。因此，当您重新加载页面时，CKE会再次转换标记，您可以调整此标记。

这也是其中一个问题。占位符（占位符）保存在某些数据属性的范围内，直到将这些内容保存到数据库中并重新加载页面为止。之后，我只有来自表单元格的跨度，我所有的数据属性都消失了。

类似的软件包： https：//www.npmjs.coms.com/package/package/ckeditor5-placeorl5-placeholder

<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>

在这里，我们可以在第一个具有element-42的单元格中看到内容已被划过。应该是这样的。（这只是在我发布更改和重新加载之前就在那里），

<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>

如果有人有提示，那就太好了。其他元素，例如i工作正常。但是不想使用它。

原文

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.

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> </span></td>
      </tr>
      <tr>
         <td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span> </span></td>
         <td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span> <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> </span></td>
      </tr>
      <tr>
         <td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span> </span></td>
         <td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span> </span></td>
         <td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span> </span></td>
      </tr>
      <tr>
         <td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span> </span></td>
         <td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span> </span></td>
         <td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"><span> </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>
     
    <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.

分享到QQ

分享到微博