Spellchecker for TinyMce

Ankit Yadav

10 December 2021

TinyMCE is a quite popular editor. This blog describes how one can integrate Spellchecker with TinyMCE editor.

Although in TinyMCE, You could enable default browser spellcheck like:

   ...

   options : {
	selector: 'textarea',
        browser_spellcheck : true,
   }

   ...

...

options : {

selector: 'textarea',

browser_spellcheck : true,

}

...

But, Browser Spell check is not suitable for cross-browser Support. Also, you would not be able to customize default browser check.

Create Custom Spellchecker

You can Create your own spellchecker, with TinyMCE spellchecker Plugin and any Translator service like

Google translator API,

Microsoft Translator service,

Yandex translator service

Let’s setup TinyMCE plugin (Client end)

   ...
   options : {
	browser_spellcheck : true,		
	toolbar: 'spellchecker',
	spellchecker_callback: function(method, text, success, failure) {
            var words = text.match(this.getWordCharPattern());
            var data = {};
            if(words) {
                data['words'] = Object.assign({}, words);
                data['lang'] = this.getLanguage();
                var suggestions = {};
                if (method == "spellcheck") {
                    return $.ajax({
                        data: data,
                        type: "POST",
                        url: 'https://www.mysite.com/spellcheck',
                        success: function(response) {
                            for (var i = 0; i < words.length; i++) {
                                if('undefined' != typeof(response[words[i]]) ) {
                                    suggestions[words[i]] = response[words[i]];
                                }
                            }
                            success(suggestions); // return suggetions				
                        },
                        error: function(error) {
                             // error , so show error message or something
                            // success({});
                        },
                    });
                }
            } else {
                success({}); //no suggestions
            }
        }
   },
   plugins: [
       'spellchecker',
   ],
   ...

...

options : {

browser_spellcheck : true,

toolbar: 'spellchecker',

spellchecker_callback: function(method, text, success, failure) {

var words = text.match(this.getWordCharPattern());

var data = {};

if(words) {

data['words'] = Object.assign({}, words);

data['lang'] = this.getLanguage();

var suggestions = {};

if (method == "spellcheck") {

return $.ajax({

data: data,

type: "POST",

url: 'https://www.mysite.com/spellcheck',

success: function(response) {

for (var i = 0; i < words.length; i++) {

if('undefined' != typeof(response[words[i]]) ) {

suggestions[words[i]] = response[words[i]];

}

success(suggestions); // return suggetions

error: function(error) {

// error , so show error message or something

// success({});

});

}

} else {

success({}); //no suggestions

}

plugins: [

'spellchecker',

...

Use Translator Api (At server end)

Now according to words for Spellcheck, Request Translator api. Then, return suggestions from api for words. Finally, those suggestions will be shown in TinyMCE by JavaScript code above.

Example:

For Yandex Api,

Get Yandex Api Key

Fetch Spellcheck suggestions from http://speller.yandex.net/services/spellservice.json/checkText like

    function spellCheck($words)
    {
        $result = [];
        if(is_array($words)) {
            $spellUrl = 'http://speller.yandex.net/services/spellservice.json/checkText' ;
            
            $payload = 'text=' . urlencode(implode(' ', $words));

            $ch = curl_init();
            curl_setopt($ch, CURLOPT_URL,$spellUrl);
            curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'POST');
            curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
            curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 0);
            curl_setopt($ch, CURLOPT_POSTFIELDS, $payload);

            $response = json_decode(curl_exec($ch), true);   

            if(is_array($response)) {
                foreach($response as $row)  {
                    $result[$row['word']] = $row['s'];
                }
            }
        }

        return $result;
   }

function spellCheck($words)

{

$result = [];

if(is_array($words)) {

$spellUrl = 'http://speller.yandex.net/services/spellservice.json/checkText' ;

$payload = 'text=' . urlencode(implode(' ', $words));

$ch = curl_init();

curl_setopt($ch, CURLOPT_URL,$spellUrl);

curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'POST');

curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);

curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 0);

curl_setopt($ch, CURLOPT_POSTFIELDS, $payload);

$response = json_decode(curl_exec($ch), true);

if(is_array($response)) {

foreach($response as $row) {

$result[$row['word']] = $row['s'];

}

return $result;

}

Useful links:

https://www.tinymce.com/docs/plugins/spellchecker/
https://www.tinymce.com/docs/configure/spelling/