How to enable browser spell check in CKEditor 4? - ckeditor

Supposedly CKEditor has built-in spell check, but I've never seen it work (not even on their live demo site) and so in CKEditor 3 I added the following to the config function to enable browser spell check and enable the browser context menu:
config.disableNativeSpellChecker = false;
config.removePlugins = 'scayt,menubutton,contextmenu';
However, this doesn't seem to work in CKEditor 4.
How can I enable the browser spell checker and context menu in CKEditor 4?

It happens because contextmenu plugin is required by other plugins:
Plugin "contextmenu" cannot be removed from the plugins list, because it's required by "liststyle" and "tabletools" plugin.
But actially spellcheck should work, but since the Context Menu plugin is enabled, it is necessary to hold the Ctrl key when right-clicking misspelled words to see their suggestions.
Refer CKEditor Spell Checking documentation

I found that using the CKEditor Builder and removing SCAYT plugin, then putting the code in my question in the config function works.

In order to enable browsers spelling checker you should add following configuration:
config.removePlugins = 'liststyle,tabletools,scayt,menubutton,contextmenu';

Thought a summary of all helpful answers might help.
Permanent
// Prevent CKEditor disabling a browser's native spell checking feature
config.disableNativeSpellChecker = false;
// Disable CKEditor's SpellCheckAsYouType plugin;
// Disable CKEditor's contextmenu plugin
config.removePlugins = 'scayt,contextmenu';
Partial, temporary
If you need CKEditor's contextmenu plugin (for use with another plugin) your user's will be required to hold the Ctrl key to temporarily disable CKEditor's contextmenu plugin and access the browser's native spell checking feature, via the browser's usual context menu, for each and every word they want to adjust.
// Prevent CKEditor disabling a browser's native spell checking feature
config.disableNativeSpellChecker = false;
// Disable CKEditor's SpellCheckAsYouType plugin;
// Disable CKEditor's contextmenu plugin
config.removePlugins = 'scayt';

Please enable the scayt in toolbar placed in config.js. Please make sure you have included 'Scayt' if you rendered the editor with custom toolbar.

Related

Is there any configuration available to show the toolbar on click of content section

i have added below configuration to hide the toolbar onload of ckeditor.
config.toolbarStartupExpanded = false;
is there any configuration or any workaround available to show the toolbar once the user clicks on the editing area and then hides it once user clicks out of the editing area.
You can try to use inline version of editor, it might be sufficient for you in this case.
Take a look into this sample how it works: https://cdn.ckeditor.com/4.7.3/full-all/samples/old/inlineall.html.
You need to remember to initialise editor with CKEDITOR.inline instead of CKEDITOR.replace. More about it you can find in documentation
Another option might be dynamically create and destroy editor, but this approach might be a little bit more laggy, for the user. Example how it works you can find here: https://cdn.ckeditor.com/4.7.3/full-all/samples/old/ajax.html

Programmatically change bold, underline, italic of text selection using CKEditor API

I'm using my own UI to drive CKEditor's API. The following API works to toggle the selected text with bold and italic respectively, but does not work for underline.
editorInstance.execCommand( 'bold' );
editorInstance.execCommand( 'italic' );
editorInstance.execCommand( 'underline' ); // does not work
I've checked the source and have verified that the underline command is indeed present.
How do I programmatically underline selected text using CKEditor?
You're dealing here with the Advanced Content Filter. Precisely with its effect on commands' states. In the standard preset, which I assume you use, the Underline button is removed from toolbar and therefore the related command is disabled. When command is disabled, it cannot be executed.
You can verify this with:
editor.getCommand( 'underline' ).state == CKEDITOR.TRISTATE_DISABLED;
I anticipate that you'll try to remove the entire toolbar plugin. To save you some time - it's the toolbar plugin what registers most of the features (by registering enabled buttons). So if you remove the toolbar, then all features (commands are part of features) which are registered this way will be disabled. You should find this guide helpful - Plugins integration with the ACF.

Any way to hide inline option from Firefox's addon preferences?

After adding some in-line options as described in https://developer.mozilla.org/en-US/Add-ons/Inline_Options I'm curious if there is a way to hide only one such option from the addon preferences. I'd like to manage the preference contents through other chrome.
Ideally I'd like to keep the other preferences as they are without resorting to a custom preferences window.
Yes you set or remove the hidden attribute on the setting tag.
See here for examples of how to play with inline options dom on run time:
https://github.com/Noitidart/WorkspaceHopper/blob/92a3e494cebb72518736e93ab0a20c2fdeb76df7/resources/workspacehopper/lib/main.js#L42
https://github.com/Noitidart/Throbber-Restored/blob/442c8642a5ba9281357ec34ed687c616bf942d1e/bootstrap.js#L97

dragging ckeditor toolbar in inline editing

As CKEditor documentation is really poor, I couldn't find an answer to this question anywhere.
Is it possible to configure CKeditor so that toolbar would be draggable in inline editing mode?
I'd like to be able to move it around.
If so, how is it possible to set that?
Thanks!
There's no such option available by default. However, you can achieve that by placing toolbar in your own container and adding a drag&drop handler to it, for example using some jQuery UI feature.
To be able to move toolbar to your own container you need to use the sharedspace plugin (build CKEditor package with it) and set the config.sharedSpaces option as is described in the so poor documentation.

Ckeditor: Using Firefox built in spellchecker

I feel a little caught between a rock and a hard place here. I want to use Firefox's built in spell checking without disabling Ckeditor's context menu as this renders it impossible to work with tables. Is there a way of getting the best of both worlds here?
You could try setting the disableNativeSpellChecker property to false - it should then be possible to see the native spell checker markings within the editor - however for me I couldn't get this to work in Firefox, only Google chrome.
You can then hold the ctrl key down when you right click to show the browser context menu (provided browserContextMenuOnCtrl has not been set to false)
HTH.
Use the browser's default contextmenu for right click action, then you don't need to press Ctrl to shoe the browser's default context menu.
config.removePlugins = 'scayt,menubutton,contextmenu';
Enable the built-in spell checker if the browser provides one.
config.disableNativeSpellChecker = false;
hi there you can disable it by going to
Ckeditor>File Editor.then make sure you're editing the ckeditor.config.js file!
then add the two lines at the bottom (after the }; tag) add the two lines like below!...
**> CKEDITOR.config.disableNativeSpellChecker = false;
CKEDITOR.config.browserContextMenuOnCtrl = true;**
then save it..........
when writing in ckeditor a red dot underline will appear if your spell is incorrect!
when you right click the ckeditor's context menu appear.....but when you Ctrl+Right Click the browsers default menu appears....thanks..........
Use this plugin: http://martinezdelizarrondo.com/spellcheck/ and as it's stated, you have to install the WriteArea extension in Firefox.
Have you tried to enable SCAYT (SpellCheckAsYouType) in CKeditor? It is buit-in there and works as a plug-in.

Resources