cancel
Showing results for 
Search instead for 
Did you mean: 

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

   Did you know you can see the translated content as per your choice?

Translation is in progress. Please check again after few minutes.

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