I am new to CK Editor. I have a created a plugin that shows a button on UI. I want to disable and enable based on some condition.
So I am using the following code to enable
var command = editorInstance.getCommand('myButton')
command.enable()
and to disable
var command = editorInstance.getCommand('myButton')
command.disable()
functionality-wise this works fine but it shows button in disable mode always on UI(always greyed button)
Am I missing something?
You can hide a button with CSS by using the class names that CKEditor creates for toolbar buttons. Try this (tested with v4.5.11):
// hide
document.getElementsByClassName('cke_button__myButton')[0].style.display = 'none';
//show
document.getElementsByClassName('cke_button__myButton')[0].style.display = 'block';
Related
I am having number of CKEditors on my page under different tabs (having fieldset) and using autogrow plugin. but plugin does not seems to work for all the editor except the editor those falls under focused tab. I have added below lines.
config.autoGrow_onStartup = true;
config.extraPlugins = 'autogrow';
config.removePlugins = 'resize';
But when i click on editor after changing the tab, autogrow plugin resizes the editor correctly.
Any suggestion.
Add this before your code .
<script src="https://cdn.ckeditor.com/4.5.7/standard/ckeditor.js"></script>
CKEDITOR.replace('.textarea');
Looking for a very simple way to disable/remove the CKEditor "browse server" button when using the Link toolbar button without disabling the "browser server" button when using the Image toolbar button.
Why don't you go the other way round and just enable it only in the dialog windows where it's needed? There are dedicated configuration options for that, read more in the Adding File Manager Scripts for Selected Dialog Windows section of the documentation.
So, for example, to enable it just for the Image dialog window, use the config.filebrowserImageBrowseUrl and config.filebrowserImageUploadUrl properties, like in the example below:
CKEDITOR.replace( 'editor1', {
filebrowserImageBrowseUrl: '/browser/browse.php?type=Images',
filebrowserImageUploadUrl: '/uploader/upload.php?type=Images'
});
So I am developing my first firefox addon and I have a simple panel which contains some content and a link. When I click on the link, link is opened in the panel itself. I want to be able to open this link in firefox tab or window. I tried searching mozdev documentation but didn't find any solution.
You can either add a target attribute to your links (as _blank if you want to open a new tab every time); or intercept any click you do in the panel's document, and then send a message to your add-on code, to open a tab. Something like:
document.documentElement.addEventListener("click", event => {
let a = event.target.closest("a");
if (a && a.href) {
// replace `self` with `addon` if it's a trusted document and
// it's not a `contentScriptFile`
self.port.emit("open-link", a.href);
}
});
Then in your index.js or main.js, you'll have something like:
const tabs = require("sdk/tabs");
let panel = Panel({ /* ... your panel ... */ });
panel.port.on("open-link", uri => tabs.open(uri));
I create a page with multiple tabs.
On one of my tabs I want to use CKeditor on a textarea, so when I display my table I call:
editor = CKEDITOR.replace('MyTextArea', MyOptions );
I have the UI of the editor but when I click on the text area nothing append, I can't edit it. The solution for access to the text area is to use "tab" for accessing this field.
I try to put a default value and I can edit if I click on the text but if I click elsewhere in the area I cannot edit.
I have this problem for IE10 and I need it works on it. It's working on Chrome and Firefox. I use CKEditor 3.6.1 and I cannot upgrade it.
Thanks
The problem was the z-index of the container of my textarea, I change it and it works.
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.