3

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

1

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.

| improve this answer | |
  • Thanks Mike, for me this shows the button for the spellcheck, but when pressed it's showing an error "The spelling service was not found: (undefined)". Is there anyway that this could use 'browser_spellcheck' as outlined here: tiny.cloud/docs-4x/configure/spelling/#browser_spellcheck ? – RustyIngles Mar 6 '19 at 14:29
  • @RustyIngles Yes, the browser_spellcheck feature worked for me when I added " $settings['browser_spellcheck'] = true; " to the Config.php TinyMCE's settings block and ran setup:upgrade. Hope this helps! – Mike Dubs Mar 6 '19 at 18:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.