Magento 2.1 – How to Trigger UI Component onUpdate() on Load

As far as my understanding, you are trying to add the whole new Ui component type which call wysiwyg2.

But unfortunately, there is a known issue about adding new Ui Component type (yes, just another one). You can check the original issue overhere.

Let take a look deeper into how Magento 2 dealing with the Ui components in product form.

vendor/magento/module-catalog/Ui/DataProvider/Product/Form/Modifier/Eav.php

/**
 * Add wysiwyg properties
 *
 * @param ProductAttributeInterface $attribute
 * @param array $meta
 * @return array
 */
private function customizeWysiwyg(ProductAttributeInterface $attribute, array $meta)
{
    if (!$attribute->getIsWysiwygEnabled()) {
        return $meta;
    }

    $meta['arguments']['data']['config']['formElement'] = WysiwygElement::NAME;
    $meta['arguments']['data']['config']['wysiwyg'] = true;
    $meta['arguments']['data']['config']['wysiwygConfigData'] = [
        'add_variables' => false,
        'add_widgets' => false,
        'add_directives' => true,
        'use_container' => true,
        'container_class' => 'hor-scroll',
    ];

    return $meta;
}

And inside public function setupAttributeMeta(ProductAttributeInterface $attribute, $groupCode, $sortOrder)

Line 633 (may be different for each version)

        case 'textarea':
            $meta = $this->customizeWysiwyg($attribute, $meta);
            break;

As you can see, customizeWysiwyg() hard-coded formElement to wysiwyg.

If you want to wysiwyg2 working, you need write a plugin for setupAttributeMeta() to add something like $meta = $this->customizeWysiwyg2($attribute, $meta);

But I do not encourage this, you can just create a preference for \Magento\Ui\Component\Form\Element\Wysiwyg, then inside the constructor you can do something like

/**
 * Wysiwyg constructor.
 *
 * @param \Magento\Framework\View\Element\UiComponent\ContextInterface $context
 * @param \Magento\Framework\Data\FormFactory                          $formFactory
 * @param \Magento\Ui\Component\Wysiwyg\ConfigInterface                $wysiwygConfig
 * @param array                                                        $components
 * @param array                                                        $data
 * @param array                                                        $config
 */
public function __construct(
    ContextInterface $context,
    FormFactory $formFactory,
    ConfigInterface $wysiwygConfig,
    array $components = [],
    array $data = [],
    array $config = []
) {
    // Override the component for the WYSIWYG
    // This is not done using definition.xml due to https://github.com/magento/magento2/issues/5647
    $data['config']['component'] = 'Stackoverflow_Toan/js/form/element/wysiwyg';

    // Override the templates to include our KnockoutJS code
    $data['config']['template'] = 'Stackoverflow_Toan/wysiwyg';
    $data['config']['elementTmpl'] = 'Stackoverflow_Toan/wysiwyg';

    parent::__construct($context, $formFactory, $wysiwygConfig, $components, $data, $config);
}

By this way, you can have your own jsComponent, knockout templates..etc and ready to customise to whatever you want.

Hope this helps :)

In your module: add this code to your etc/di.xml:

<preference for="Magento\Catalog\Ui\DataProvider\Product\Form\Modifier\CustomOptions"
            type="Cleargo\CustomOption\Ui\DataProvider\Product\Form\Modifier\CustomOptions" />

and then, in your Cleargo\CustomOption\Ui\DataProvider\Product\Form\Modifier

the content is as following:

    <?php

namespace Cleargo\CustomOption\Ui\DataProvider\Product\Form\Modifier;

use Magento\Catalog\Ui\DataProvider\Product\Form\Modifier\CustomOptions as OriginalCustomOptions;
use Magento\Ui\Component\Container;
use Magento\Catalog\Model\Locator\LocatorInterface;
use Magento\Store\Model\StoreManagerInterface;
use Magento\Catalog\Model\ProductOptions\ConfigInterface;
use Magento\Catalog\Model\Config\Source\Product\Options\Price as ProductOptionsPrice;
use Magento\Framework\UrlInterface;
use Magento\Framework\Stdlib\ArrayManager;
use Magento\Ui\Component\Modal;
use Magento\Ui\Component\DynamicRows;
use Magento\Ui\Component\Form\Fieldset;
use Magento\Ui\Component\Form\Field;
use Magento\Ui\Component\Form\Element\Input;
use Magento\Ui\Component\Form\Element\Select;
use Magento\Ui\Component\Form\Element\Checkbox;
use Magento\Ui\Component\Form\Element\ActionDelete;
use Magento\Ui\Component\Form\Element\DataType\Text;
use Magento\Ui\Component\Form\Element\DataType\Media;
use Magento\Ui\Component\Form\Element\DataType\Number;
use Magento\Framework\Locale\CurrencyInterface;

class CustomOptions extends OriginalCustomOptions{
    /**
     * Get config for "Option Type" field
     *
     * @param int $sortOrder
     * @return array
     */

    const FIELD_IMAGE_UPLOAD_NAME = 'image';
    const FIELD_IMAGE_DISPLAY_NAME = 'store_image';
    const FIELD_IMAGE_DELETE_NAME = 'delete_image';

    protected function getSelectTypeGridConfig($sortOrder)
    {
        return [
            'arguments' => [
                'data' => [
                    'config' => [
                        'addButtonLabel' => __('Add Value'),
                        'componentType' => DynamicRows::NAME,
                        'component' => 'Magento_Ui/js/dynamic-rows/dynamic-rows',
                        'additionalClasses' => 'admin__field-wide',
                        'deleteProperty' => static::FIELD_IS_DELETE,
                        'deleteValue' => '1',
                        'renderDefaultRecord' => false,
                        'sortOrder' => $sortOrder,
                    ],
                ],
            ],
            'children' => [
                'record' => [
                    'arguments' => [
                        'data' => [
                            'config' => [
                                'componentType' => Container::NAME,
                                'component' => 'Magento_Ui/js/dynamic-rows/record',
                                'positionProvider' => static::FIELD_SORT_ORDER_NAME,
                                'isTemplate' => true,
                                'is_collection' => true,
                            ],
                        ],
                    ],
                    'children' => [
                        static::FIELD_TITLE_NAME => $this->getTitleFieldConfig(10),
                        static::FIELD_PRICE_NAME => $this->getPriceFieldConfig(20),
                        static::FIELD_PRICE_TYPE_NAME => $this->getPriceTypeFieldConfig(30, ['fit' => true]),
                        static::FIELD_SKU_NAME => $this->getSkuFieldConfig(40),
                        static::FIELD_SORT_ORDER_NAME => $this->getPositionFieldConfig(50),
                        static::FIELD_IMAGE_DELETE_NAME => $this->getIsDeleteImgFieldConfig(60),
                        static::FIELD_IMAGE_DISPLAY_NAME => $this->getImgDisplayConfig(70),
                        static::FIELD_IMAGE_UPLOAD_NAME => $this->getImgConfig(80),
                        static::FIELD_IS_DELETE => $this->getIsDeleteFieldConfig(90)
                    ]
                ]
            ]
        ];
    }


    protected function getImgConfig($sortOrder)
    {
        return [
            'arguments' => [
                'data' => [
                    'config' => [
                        'label' => __('Image Upload'),
                        'componentType' =>  'image',
                        'formElement' => 'fileUploader',
                        'dataScope' => static::FIELD_IMAGE_UPLOAD_NAME,
                        'dataType' => Media::NAME,
                        'sortOrder' => $sortOrder,
                        'validation' => [
                            'required-entry' => false
                        ],
                    ],
                ],
            ],
        ];
    }

    /**
     * Get config for "Required" field
     *
     * @param int $sortOrder
     * @return array
     */
    protected function getIsDeleteImgFieldConfig($sortOrder)
    {
        return [
            'arguments' => [
                'data' => [
                    'config' => [
                        'label' => __('Delete Image'),
                        'componentType' => Field::NAME,
                        'formElement' => Checkbox::NAME,
                        'dataScope' => static::FIELD_IMAGE_DELETE_NAME,
                        'dataType' => Text::NAME,
                        'sortOrder' => $sortOrder,
                        'value' => '0',
                        'valueMap' => [
                            'true' => '1',
                            'false' => '0'
                        ],
                    ],
                ],
            ],
        ];
    }


    protected function getImgDisplayConfig($sortOrder)
    {
        return [
            'arguments' => [
                'data' => [
                    'config' => [
                        'label' => __('Image Path'),
                        'componentType' =>  Field::NAME,
                        'formElement' => Input::NAME,
                        'dataScope' => static::FIELD_IMAGE_DISPLAY_NAME,
                        'dataType' => Text::NAME,
                        'sortOrder' => $sortOrder,
                        'validation' => [
                            'required-entry' => false
                        ],
                    ],
                ],
            ],
        ];
    }

    protected function getCommonContainerConfig($sortOrder)
    {
        $commonContainer = [
            'arguments' => [
                'data' => [
                    'config' => [
                        'componentType' => Container::NAME,
                        'formElement' => Container::NAME,
                        'component' => 'Magento_Ui/js/form/components/group',
                        'breakLine' => false,
                        'showLabel' => false,
                        'additionalClasses' => 'admin__field-group-columns admin__control-group-equal',
                        'sortOrder' => $sortOrder,
                    ],
                ],
            ],
            'children' => [
                static::FIELD_OPTION_ID => $this->getOptionIdFieldConfig(10),
                static::FIELD_TITLE_NAME => $this->getTitleFieldConfig(
                    20,
                    [
                        'arguments' => [
                            'data' => [
                                'config' => [
                                    'label' => __('Option Title'),
                                    'component' => 'Magento_Catalog/component/static-type-input',
                                    'valueUpdate' => 'input',
                                    'imports' => [
                                        'optionId' => '${ $.provider }:${ $.parentScope }.option_id'
                                    ]
                                ],
                            ],
                        ],
                    ]
                ),
                static::FIELD_TYPE_NAME => $this->getTypeFieldConfig(30),
                static::FIELD_IMAGE_UPLOAD_NAME => $this->getImgConfig(60),
                static::FIELD_IMAGE_DISPLAY_NAME => $this->getImgDisplayConfig(55),
                static::FIELD_IMAGE_DELETE_NAME => $this->getIsDeleteImgFieldConfig(50),
                static::FIELD_IS_REQUIRE_NAME => $this->getIsRequireFieldConfig(40)
            ]
        ];

        if ($this->locator->getProduct()->getStoreId()) {
            $useDefaultConfig = [
                'service' => [
                    'template' => 'Magento_Catalog/form/element/helper/custom-option-service',
                ]
            ];
            $titlePath = $this->arrayManager->findPath(static::FIELD_TITLE_NAME, $commonContainer, null)
                . static::META_CONFIG_PATH;
            $commonContainer = $this->arrayManager->merge($titlePath, $commonContainer, $useDefaultConfig);
        }

        return $commonContainer;
    }
}

This code added some new fields in the custom option section.