cancel
Showing results for 
Search instead for 
Did you mean: 

tinymce v4 vs v3 activate options, color, font size, anchor?

tinymce v4 vs v3 activate options, color, font size, anchor?

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

 

Schermafdruk 2019-02-14 07.01.37.png

tinymce4

Schermafdruk 2019-02-14 07.53.40.png

 

 

2 REPLIES 2

Re: tinymce v4 vs v3 activate options, color, font size, anchor?

Hey @GoodLook 

 

Please follow the method at How to Configure TinyMCE4 Toolbar in Magento 2.3.x to solve your issue.

 

Hope it helps.

---
If you've found my answer useful, please give"Kudos" and "Accept as Solution"

Re: tinymce v4 vs v3 activate options, color, font size, anchor?

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