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 :)
For adding image field, you can try using plugin and always try to avoid overwrite whole class.
Vendor/Module/etc/adminhtml/di.xml
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
<type name="Magento\User\Block\User\Edit\Tab\Main">
<plugin name="sr_stackexchange_user_form" type="Vendor\Module\Plugin\Block\Adminhtml\User\Edit\Tab\Main" sortOrder="1"/>
</type>
</config>
Vendor/Module/Plugin/Block/Adminhtml/User/Edit/Tab/Main.php
namespace Vendor\Module\Plugin\Block\Adminhtml\User\Edit\Tab;
class Main
{
/**
* Get form HTML
*
* @return string
*/
public function aroundGetFormHtml(
\Magento\User\Block\User\Edit\Tab\Main $subject,
\Closure $proceed
)
{
$form = $subject->getForm();
if (is_object($form)) {
$fieldset = $form->addFieldset('admin_user_image', ['legend' => __('User Image')]);
$fieldset->addField(
'user_image',
'image',
[
'name' => 'user_image',
'label' => __('Image'),
'id' => 'user_image',
'title' => __('Image'),
'required' => false,
'note' => 'Allow image type: jpg, jpeg, png'
]
);
$subject->setForm($form);
}
return $proceed();
}
}
Clear cache.
Best Answer
Check out JSColor:
http://jscolor.com/
Its an open source and very easy to use Javascript library. All you have to do is import the library somewhere in your application, than you can simply create an input with the class "jscolor".
Get jscolor.js from above site and add inside
Vendor/Modulename/view/adminhtml/web/js/jscolor.js
define js in your module xml head tag or create default.xml file inside
Vendor/Modulename/view/adminhtml/layout/default.xml
Now set color picker in input like below:
This is working fine in magento 2.