whith new version of tinymce v4, there are only a few options available.
How to set options active like: color choose, font size bigger, smaller,anchor, subscript,...?
tinymce3
tinymce4
Hey @GoodLook
Please follow the method at How to Configure TinyMCE4 Toolbar in Magento 2.3.x to solve your issue.
Hope it helps.
Hello @GoodLook ,
Magento default doesn't provide us this functionality, so we can achieve this by creating a after plugin for getConfig() of Magento\Ui\Component\Wysiwyg\ConfigInterface. Please refer the following steps for the same:
Step 1: Create di.xml in app/code/Vendor_Name/Module_Name/etc
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
<type name="Magento\Ui\Component\Wysiwyg\ConfigInterface">
<plugin name="project_customtinymce_config"
type="Vendor_Name\Module_Name\Plugin\Config"
sortOrder="10"/>
</type>
</config>Step 2: Now create plugin app/code/Vendor_Name/Module_Name/Plugin/Config.php
<?php
namespace Vendor_Name\Module_Name\Plugin;
class Config
{
protected $activeEditor;
public function __construct(\Magento\Ui\Block\Wysiwyg\ActiveEditor $activeEditor)
{
$this->activeEditor = $activeEditor;
}
/**
* Return WYSIWYG configuration
*
* @param \Magento\Ui\Component\Wysiwyg\ConfigInterface $configInterface
* @param \Magento\Framework\DataObject $result
* @return \Magento\Framework\DataObject
*/
public function afterGetConfig(
\Magento\Ui\Component\Wysiwyg\ConfigInterface $configInterface,
\Magento\Framework\DataObject $result
) {
// Get current wysiwyg adapter's path
$editor = $this->activeEditor->getWysiwygAdapterPath();
// Is the current wysiwyg tinymce v4?
if(strpos($editor,'tinymce4Adapter')){
if (($result->getDataByPath('settings/menubar')) || ($result->getDataByPath('settings/toolbar')) || ($result->getDataByPath('settings/plugins'))){
// do not override ui_element config (unsure if this is needed)
return $result;
}
$settings = $result->getData('settings');
if (!is_array($settings)) {
$settings = [];
}
// configure tinymce settings
$settings['menubar'] = true;
$settings['toolbar'] = 'undo redo | styleselect | fontsizeselect | forecolor backcolor | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | table | image | code';
$settings['plugins'] = 'textcolor image code';
$result->setData('settings', $settings);
return $result;
}
else{ // don't make any changes if the current wysiwyg editor is not tinymce 4
return $result;
}
}
}You can also add more toolbar and plugin options of Tinymce 4. Please refer the link https://www.tiny.cloud/docs-4x/advanced/editor-control-identifiers/ for more option.
Hope this will work for you.
If it helps you, please give us Kudos and accept it as solution.
Regards