Magento – Magento 2 – Add spellchecker to tiny mce wysiwyg editor as plugin

magento2tinymce

Trying to add the spellchecker to tiny mce in Magento 2 but not able to get it working. As a start I used this tutorial for Magento 1

http://www.danneh.org/2012/10/enabling-spellchecker-magento-wysiwyg-editor/

What I did

  1. Downloaded the spellchecker plugin and added it to /lib/web/tiny_mce/plugins/

  2. Changed the code to add the spellchecker withing vendor/magento/magento2-base/lib/web/mage/adminhtml/wysiwyg/tiny_mce/setup.js (I know do not update magento core but this is my test system and first want to get it working 🙂 )

Line 77

    var plugins = 'inlinepopups,safari,pagebreak,style,layer,table,advhr,advimage,emotions,iespell,media,searchreplace,contextmenu,paste,directionality,fullscreen,spellchecker,noneditable,visualchars,nonbreaking,xhtmlxtras', //eslint-disable-line

Line 107

 'theme_advanced_buttons3': 'tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,iespell,media,advhr,|,ltr,rtl,|,fullscreen,|,spellchecker', //eslint-disable-line max-len

Then I removed my cache, compiled etc etc, but nothing was added when I check for example a new cms block

Best Answer

This question is similar to my question, so I modified to hopefully help you and others with this issue. You could create an afterGetConfig plugin to configure Magento 2.3's TinyMCE v4.6.4 WYSIWYG editor

  • My below solution adds font/background color, image selector, spell checker, and code buttons to a "loaded" toolbar

1) Create the directory [app/code/vendor/module]: app/code/Project/Customtinymce

2) Create app/code/Project/Customtinymce/etc/di.xml: 

<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="Project\Customtinymce\Plugin\Config"
                    sortOrder="10"/>
        </type>
</config>

3) Create app/code/Project/Customtinymce/etc/module.xml:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Project_Customtinymce" setup_version="0.1.0"/>
</config>

4) Create app/code/Project/Customtinymce/registration.php

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Project_Customtinymce',
    __DIR__
);

5) Create the after plugin app/code/Project/Customtinymce/Plugin/Config.php:

<?php

namespace Project\Customtinymce\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/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['toolbar'] = 'undo redo | styleselect | fontsizeselect | forecolor backcolor | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | table | link image | code';
        $settings['plugins'] = 'textcolor image spellchecker code';

        $result->setData('settings', $settings);
        return $result;
      }
      else{ // don't make any changes if the current wysiwyg editor is not tinymce 4
          return $result;
      }
    }
}

After screenshot: After screenshot

Please see TinyMCE v4 Toolbar Resources for more toolbar and plugin options.

I hope this plugin helps others! Please add your helpful feedback to improve this answer.

Related Topic