如何判断元素是否为小部件？ （CKEditor） [英] How to tell if an element is a Widget? (CKEditor)

问题描述

根据 CKEditor，使用insertElement 添加的初始化窗口小部件，我们做一个insertElement（），然后用initOn（）初始化。问题是，我们插入的一些元素不应该是小部件，initOn（）使它们成为小部件，上下文菜单不能正常工作。我遇到麻烦找到任何属性在项目/元素，以告诉是否/是不是一个小部件，所以我可以然后调用initOn（）。

交叉下游在Drupal.org这里 https://www.drupal.org/node/2466297

解决方案

首先 - 你的意思是什么元素？

> > >
$ b> > $ b

小部件显然可以包含许多元素。其中一个称为小部件元素这是您上传的元素

因为CKEditor 4.5.0会有这样的情况，所以你可以通过 widget.element 方法可用：

  Widget.isDomWidgetElement = function（node）{
 return node.type == CKEDITOR.NODE_ELEMENT& ;& node.hasAttribute（'data-widget'）; 
}; 
  

你当然可以使用这个代码检查给定的节点是否是一个widget元素。 p>

小部件包装器

第二个重要的元素是小部件的包装器。它是在数据处理过程中创建的，如果一个widget元素被标记为upcasted或 initOn（） 被调用。您可以通过 小部件访问此元素.wrapper 属性。

由于CKEditor 4.5.0会有以下方法：

  Widget.isDomWidgetWrapper = function（node）{
 return node.type == CKEDITOR.NODE_ELEMENT&& node.hasAttribute（'data-cke-widget-wrapper'）; 
}; 
  

再次 - 您可以使用此代码。

重要说明：因为您在问题中提到 insertElemet（）。正如我在 CKEditor中解释的，初始化通过insertElement添加的小部件 editor＃insertElement（）不触发数据处理。因此，插入的元素将按原样插入。这意味着插件期间不会创建小部件包装器，并且一旦调用 initOn（）即可创建小部件包装器。

通过任何元素查找窗口小部件

很多时候，您想要通过某些元素（可以在窗口小部件中的任何元素）查找窗口小部件实例。有一个有用的方法： getByElement（） 。

什么成为小部件？ Aka - 如何处理 editor.insertElement（）？

您提到您使用 editor.insertElement（），并且你不知道哪些元素应该是小部件。这应该永远不会发生。 editor.insertElement（）是一个相当低级别的方法，它不会做所有的数据处理和向上转换魔术 editor.insertHtml（）。这意味着它应该在不同的情况下使用 - 当你想要插入你所拥有的元素。

例如，你的表插件正在构建一个表结构插入到编辑器中。你知道表是空的，所以你控制它的每一个位（其他插件不应该干扰这里）。它也很重要的是它的表的插件决定，而不是例如。模板的插件决策。表的插件控制表的功能，而模板插件只使用表。所以在这种情况下，当你有完全的控制，你可以使用 editor.insertElement（）。

在所有其他情况下，您应该使用 editor.insertHtml（），所以整个数据处理层被触发。感谢它的其他功能，如窗口小部件系统，链接插件（将空锚定为假对象）等可以准备您插入的数据，以完全可编辑和集成。

Tl; dr

如果你的插件知道它的作用，它可以使用 editor.insertElement（），但是因为它知道它的作用，它将知道哪个插入的元素必须成为一个窗口小部件。

如果你的插件没有完全控制情况，那么你应该使用 editor.isertHtml（）方法更自动化，并根据上行回调将适当的元素转换为小部件。

Per CKEditor, initialize widget added with insertElement, we are doing an insertElement() and then initializing with initOn(). The problem is that some of the elements we are inserting are not supposed to be widgets and initOn() makes them widgets and the context menu doesn't work right. I am having trouble finding any properties inside the item/element to tell if something is/is not a widget so I can then call initOn().

Cross-posted downstream on Drupal.org here https://www.drupal.org/node/2466297

解决方案

First of all - which element do you mean?

(Note: In this section I am assuming that a widget was correctly and fully initialised.)

Widget element

A widget can obviously consists of many elements. One of them is called the "widget element" and this is the element which you "upcasted" and which you can later access through widget.element.

Since CKEditor 4.5.0 there will be such method available:

Widget.isDomWidgetElement = function( node ) {
    return node.type == CKEDITOR.NODE_ELEMENT && node.hasAttribute( 'data-widget' );
};

You can of course already use this code to check if a given node is a widget element.

Widget wrapper

Second important element is the widget's wrapper. It is created during data processing if a widget element was marked to be upcasted or when initOn() is called if the widget element wasn't wrapped yet. You can access this element through the widget.wrapper property.

Since CKEditor 4.5.0 there will be a following method available:

Widget.isDomWidgetWrapper = function( node ) {
    return node.type == CKEDITOR.NODE_ELEMENT && node.hasAttribute( 'data-cke-widget-wrapper' );
};

And again - you can use this code already.

Important note here - since you mention insertElemet() in your question. As I explained in CKEditor, initialize widget added with insertElement editor#insertElement() does not trigger data processing. Therefore, element that you insert is inserted as is. This means that the widget wrapper is not created during insertion and will be created once you call initOn().

Finding widgets by any element

Many times you want to find a widget instance by some element that you have (any element that can be inside a widget). There's a useful method for that: getByElement().

What should become a widget? Aka - how to deal with editor.insertElement()?

You mentioned that you use editor.insertElement() and that you don't know which elements are supposed to be widgets. This should never happen. editor.insertElement() is a quite low level method which will not do all the data processing and upcasting magic which editor.insertHtml() does. It means that it is supposed to be used in a different case - when you want to insert exactly the element that you have.

For instance, your table plugin is building a table structure to be inserted into editor. You know that the table is empty, so you control every bit of it (other plugins should not interfere here). It is also important that it's the table's plugin decision, not e.g. a template's plugin decision. The table's plugin control the table feature, while the template plugin only uses tables. So in such case, when you have a full control, you can use editor.insertElement(). Then you always know what you insert and what is supposed to become a widget.

In all other scenarios you should use editor.insertHtml(), so the whole data processing layer is triggered. Thanks to it other features like the widgets system, the link plugin (which turns empty anchors into fake objects), etc. can prepare the data that you insert to be fully editable and integrated.

Tl;dr

If your plugin knows what it does, it can use editor.insertElement(), but since it knows what it does it will know which inserted element must become a widget.

If your plugin does not fully control the situation, then you should use the editor.isertHtml() method which is far more automated and will turn proper elements into widgets based on the upcast callbacks.

这篇关于如何判断元素是否为小部件？ （CKEditor）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！