Проверка русской орфографии в ckEditor

Информация о материале
Категория: JavaScript
Просмотров: 22793

 

Я отношусь к той группе людей, которые плохо дружат с русским языком. Так уж сложилось, в школе больше привлекало все техническое. Для экономии времени статьи иногда выгодно писать через веб-интерфейс админки, в обход MsWord. Но вот беда, отличный WYSWYG редактор ckEditor не проверяет русскую орфографию. Более того, он еще отключает нативную проверку орфографии браузером. Те, кто пользуются TinyMCE, знают всю прелесть красной подсветки больных мест текста.

Еще в  ckeditor'е есть средство для проверки орфографии. Работает оно через сервис http://www.spellchecker.net/  и делает это как-то неуклюже, да и с русским дружит не больше моего.

Практически во всех современных браузерах Chrome,FireFox, Opera и т.д. есть своя система проверки орфографии(нативная). По дефолту, ckeditor ее отключает. Ну что же, исправим это досадное недоразумение.

В файле ckeditor/config.js добавляем строчку

config.disableNativeSpellChecker = false;

по-русски это значит следующее: отключить отключалку нативной проверки орфографии.

Чистим кеш, обновляем страницу и видим чудеснейшую картину подчеркнутых красным очепяток ).

Все работает, все замечательно, но вот беда: если вызвать контекстное меню, ckeditor заменяет его на свое - копировать,вставить(кто-то им вообще пользуется?). Это вызывает большое неудобство, не всегда сразу понятно, что не так в подсвеченном красным слове. Когда видишь такое слово хочется посмотреть почему оно подсвечено и какие есть варианты написания. Если слово новое, и нативный spellchecker его не знает, то можно занести слово в словарь. Но вместо этого нам предлагают лишь копировать-вставить) Исправим и это

просто отключим ненужный плагин. В том же файле пишем

config.removePlugins = 'contextmenu';

Одно слово - торт!!!

Есть еще один метод для проверки орфографии. Плагин для ckeditor'а  geckospellchecker. Как видно из названия, создан он исключительно для FireFox'а. О чем нам и пишут на офсайте разработчиков. 

Написано там следующее: 

Important: you need to be using Firefox, and have the WriteArea extension installed and enabled. 

что по русски звучит, как

Важно: вы должны использовать Огненный Лис, и установить и включить  расширение WriteArea. 

Практика показала, что работает он не только на FireFox. Плагин сносно заработал и в chrome. Кроме того, никаких расширений я не ставил. Все работает без writeArea.

Устанавливаем плагин:

просто заливаем папку geckospellchecker из архива в категорию ckeditor/plugins/

затем в уже известном нам файле ckeditor/config.js правим подключаемые плагины. У меня это выглядит так:

config.extraPlugins = 'addseparator,syntaxhighlight,geckospellchecker';

запускаем страницу с редактором в firefox (если открывали раньше, чистим кеш) и наслаждаемся подсветкой. Вероятно, понадобится еще удалить плагин от spellche cker.net, который называется scayt. Можно просто переименовать одноименную папку в ckeditor/plugins. Методы я не комбинировал. Что будет если подсвечивать и нативно и плагином я не знаю. Знаю лишь, что плагин захламляет исходный код всякой лабудой. Так что перед сохранением надо убрать все ошибки.

Разумеется, подсветка опечаток не сделает из Вас грамотного писателя, но по крайней мере, позволит экономить время на проверку простейших недочетов и уделить больше внимания серьезным вещам.

UPD. В CKEditor 3.6.4 (revision 7575) не работает config.removePlugins = 'contextmenu'; в этом случае единственное, что могу предложить - это при правке нажимать клавишку ctrl, тогда контекстное меню редактора не появляется, а появляется нативное меню браузера

Оставлять комментарии могут только зарегистрированные пользователи

Комментарии  

игорек
# игорек 16.03.2011 00:37
спасибо автору за статью)
stef
# stef 16.05.2011 20:06
У меня заработали красные подчёркивания, а вот от меню с "копировать вставить" при нажатии красной кнопки мыши избавиться не вышло ..



Всё сделал по описанию (



Варианты какие могут быть ?
stef
# stef 16.05.2011 20:07
Пардон - при нажатии правой кнопки мыши ))..
Leroy
# Leroy 17.05.2011 03:37
а что происходит при нажатии правой кнопки?
stef
# stef 17.05.2011 16:49
В редакторе текста когда подводишь указатель к слову с ошибкой то вместо списка предлагаемых браузером правильных слов вылетает меню редактора "вырезать, копировать, вставить"



Вот как его убрать - что бы вместо него шло обращение к списку правописания ...
Leroy
# Leroy 17.05.2011 18:03
по идее если плагин не удаляется так как я описал, удалите его к чертям папку ckeditor/plugins/contextmenu, если и это не помогает то дело скорее всего в кеше. Его надо почистить.
stef
# stef 17.05.2011 19:28
попробуем - спасибо большое ; )
Андрей
# Андрей 29.05.2011 14:26
Спасибо, полезные советы. Но почему то никто не обращает внимание на главный глюк CKEditor - он не позволяеи копировать, вставлять, вырезать текст мышью. Только через сочетания клавиш. Жутко неудобно. Мышь работает только в IE. В остальных браузерах вот такая радость:



По причине настроек безопасности браузера, редактор не имеет доступа к данным буфера обмена напрямую. Вам необходимо вставить текст снова в это окно.

Пожалуйста, вставьте текст в прямоугольник, используя сочетание клавиш (Ctrl/Cmd+V), и нажмите OK.



Либо вот такая:



Настройки безопасности вашего браузера не позволяют редактору автоматически выполнять операции копирования. Пожалуйста, используйте клавиатуру для этого (Ctrl/Cmd+C).
Андрей
# Андрей 29.05.2011 14:54
Ура!!! Сделал, то, что Вы советовали, появилась возможность нормально вставлять текст. Вы - гений!!! :)))
Edik
# Edik 26.07.2011 01:36
а что иммнео у меня не получается, подскажиите
Андрей
# Андрей 29.05.2011 14:55
Ну в смысле, что попутно решилась проблема с мышью. Единственно - выкину кнопки, через них не работает, а через правую мыши - запросто.
Андрей
# Андрей 29.05.2011 14:56
P.S. "Паутина" по бокам классная :)
Leroy
# Leroy 29.05.2011 16:30
сам тащусь)))
ruslan
# ruslan 02.09.2011 14:38
Leroy,

Подскажи пожа-та как можно такую паутину сделать на свой саит.

Руслан С.
Leroy
# Leroy 10.06.2012 22:24
В конце тела HTML документа (тобишь в body) вставляем 

<script src="js/harmony/harmony.js"></script>
<script src="js/harmony/dollar.js"></script>
<script>harmony()</script>
<div style="text-align:center; height: 800px;"></div>
<style>
	#container { position: relative; z-index: 3;}
	div canvas { cursor: crosshair; position: fixed; top: 0px; z-index: 2;}
</style>


Исходники нужно предварительно скачать отсюда и отсюда

Сразу так, как хотите вы оно разумеется не заработает, но тут виной конфликты с вашей версткой, это надо решать для каждого конкретного случая.

Убрать ютубовскую пасхалку можно просто добавив в документ элемент с id="erasure"
Андрей
# Андрей 23.01.2012 18:14
Добрый день! Не подскажете как подключить проверку орфографии в JCK editor?
Вадим
# Вадим 15.02.2013 03:59
Спасибо тебе, добрый человек. Отключение встроенной (в CKEditor) проверки орфографии оказалось самым простым и самым подходящим решением. Удачи! :-)
Вадим
# Вадим 15.03.2013 22:51
Добавлю ещё, что проверка орфографии у меня почему-то отключилась только после того, как я добавил

config.disableNativeSpellChecker = false;


в файл ckeditor.config.js в корневой папке модуля сразу после

CKEDITOR.editorConfig = function(config) {
Татьяна
# Татьяна 03.04.2013 21:32
Спасибо за статью и отдельное спасибо Вадиму за комментарий с указанием куда вставлять эти строки, у меня без них тоже не заработало.
Дениc
# Дениc 06.01.2014 01:00
Можно использовать апи яндекс спеллера: http://api.yandex.ru/speller/doc/dg/tasks/how-to-spellcheck-ckeditor4.xml
OptimistEx
# OptimistEx 26.06.2014 15:18
>В CKEditor 3.6.4 (revision 7575) не работает config.removePlugins = 'contextmenu';



На другом сайте подсмотрел:

​​config.scayt_autoStartup = false;

config.disableNativeSpellChecker = false;

config.removePlugins = 'liststyle,tabletools,scayt,menubutton,contextmenu ';
vkapas
# vkapas 22.07.2015 16:01
Возможно, кому-то пригодится: для отключения встроенной орфографии CKEditor 4 и включения браузерной можно добавить код
Цитата:
config.disableNativeSpellChecker = false;
на странице admin/config/content/ckeditor (Управление » Конфигурация » Работа с содержимым — в Drupal 7) > клик на «Изменить» в нужном вам профиле > в разделе Дополнительные настройки > в поле Пользовательская конфигурация JavaScript.

А для отключения контекстного меню CKEditor нужно туда же добавить код
Цитата:
config.removePlugins = 'liststyle,tabletools,scayt,menubutton,contextmenu';
Проверено на CKEditor 4.4.7 в Drupal 7.36.
MixJay
# MixJay 06.09.2016 10:45
Для отключения контекстного меню в 4.5.10 :
config.removePlugins = 'liststyle,tabletools,contextmenu';
Алекс
# Алекс 19.11.2016 19:38
Гран мерси, помогло с новейшим Эдитором.
RUNAMAN
# RUNAMAN 20.05.2017 20:13
может кому пригодиться для Django 1.11 + CKEditor 4.6, настройки прописываются в setting.py

CKEDITOR_CONFIGS = {
"default": {
'disableNativeSpellChecker': False
'removePlugins': 'resize, stylesheetparser,codesnippet,liststyle,tabletools, scayt,menubutton,contextmenu',