How to disable WYSIWYG Editor v1.1.1 Context menu
I have tried this but dont works
CKEDITOR.editorConfig = function( config )
{
config.removePlugins = 'contextmenu';
//also try this below code
config.removePlugins = 'contextmenu,liststyle,tabletools';
};
Any idea?
Use an module to override the settings
function MODULENAME_wysiwyg_editor_settings_alter(&$settings, $context) {
if ($context['profile']->editor == 'ckeditor') {
$settings['removePlugins'] = 'scayt,menubutton,contextmenu';
}
}
Do not forget to replace MODULENAME with your own module name.
Related
Right now I'm integrating custom plugins into the ckeditor 5. I created and added plugins using the ckeditor 5 documentation.
I also have a custom "super" build (similar to this example) that I use in my web application.
Now my problem is that my plugins will not be disabled in the ckeditor read mode (as showcased in the image at the button). The ckeditor documentation mentions that this should be the "default" behaviour for plugins / buttons.
If someone has an idea where I'm going wrong that'd be greatly appreciated!
Here is a skeleton example of my custom plugin class.
import { Plugin } from 'ckeditor5/src/core';
import { ButtonView } from 'ckeditor5/src/ui';
import ckeditor5Icon from './icons/insertvariable.svg';
export default class HWInsertVariable extends Plugin {
static get pluginName() {
return 'HWInsertVariable';
}
init() {
const that = this;
const editor = this.editor;
const model = editor.model;
let labelTxt = 'Variable einfügen';
editor.ui.componentFactory.add( 'hwInsertVariableButton', locale => {
const view = new ButtonView( locale );
view.set( {
label: labelTxt,
icon: ckeditor5Icon,
tooltip: true,
affectsData: true
} );
this.listenTo( view, 'execute', () => {
model.change( writer => {
that.buttonClicked();
} );
editor.editing.view.focus();
} );
return view;
} );
}
buttonClicked() {
//code
}
}
Im not sure what the correct method to resolve this is, as I also am facing the same. But what I have found so far, is that there might be a hacky way to get around this.
Checkout the docs regarding "disabling commands", "read-only" mode, and notice the CSS class "ck-disabled"
if/when I find a working way, I will try to come back here and post a better solution
Update:
I fixed this for me when I found that I was missing the section of the code in my my_plugin_ui.js where
const command = editor.commands.get('nameOfCommand');
// Execute the command when the button is clicked (executed).
buttonView.bind('isOn', 'isEnabled').to(command, 'value', 'isEnabled');
How can I set the focus to the editor in CKEditor after a widget is added?
I don't want that the widget stays in focus
have you added startupFocus : true to your config file?
Look up: http://ckeditor.com/forums/CKEditor-3.x/Set-focus-load
An excerpt from my custom config file looks something like this
CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here. For example:
config.extraPlugins = 'confighelper';
config.autoGrow_onStartup = true;
config.autogrow_minheight = 50;
config.autogrow_maxheight = 200;
config.contentsLangDirection = 'ui';
config.startupFocus = true;
//more options...
};
I need to change one config setting in CKEditor config dynamically.
I'm writing a plugin which adds checkbox to CKEditor toolbar and upon checking/unchecking it - a forcePasteAsPlainText is being changed as true/false.
Issue is that config is being read on initiating CKEditor component and all changes later are being ignored. Is there a possible way to change value 'on the fly'?
You can specif settings in config file that are default initializations for any editor created.
CKEDITOR.editorConfig = function(config) {
config.forcePasteAsPlainText = false;
...
}
You can override the config settings in this way so only the editor initialized will get these changes.
CKEDITOR.replace('myEditor', { forcePasteAsPlainText: ture });
You can also use editor destroy and recreate with custom configs.
var editor = CKEDITOR.instances.myEditor;
if (editor) { editor.destroy(true); }
CKEDITOR.config.forcePasteAsPlainText = false;
CKEDITOR.config.width = 400;
CKEDITOR.config.height = 300;
CKEDITOR.replace('myEditor', CKEDITOR.config);
When I switch from source view to wysiwyg it strips my h1 classes and other inline stuff, I've looked around and I enabled config.allowedContent = true; in the config file but this does not solve the problem, how can I solve this?
Thanks
Ok, I found the solution, in the config.js file just add this line:
CKEDITOR.config.allowedContent = true;
Do not add the bolean change inside
CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here. For example:
// config.language = 'fr';
// config.uiColor = '#AADC6E';
};
I was adding it there with config.allowedContent = true; and that wasnt working.
I have created my custom image plugin that insert only external images. But if I disable the default image plugin then the img tag doesn't appear in the form. Why ?
This is my plugin:
CKEDITOR.plugins.add( 'img',
{
init: function( editor )
{
editor.addCommand( 'insertImg',
{
exec : function( editor )
{
var imgurl=prompt("Insert url image");
editor.insertHtml('<img src="'+imgurl+'" />');
}
});
editor.ui.addButton( 'img',
{
label: 'Insert img',
command: 'insertImg',
icon: this.path + 'images/aaa.png'
} );
}
} );
You need to integrate your plugin with ACF - Advanced Content Filter which was introduced in CKEditor 4.1.
Here's a useful guide - Plugins integration with ACF.
Basically, you're introducing a feature to the editor. This feature needs to tell editor how it is represented in HTML, so what should be allowed when this feature is enabled.
In the simplest case, when you have a button, which executes a command you just need to define two properties of the CKEDITOR.feature interface: allowedContent and requiredContent.
E.g.:
editor.addCommand( 'insertImg', {
requiredContent: 'img[src]', // Minimal HTML which this feature requires to be enabled.
allowedContent: 'img[!src,alt,width,height]', // Maximum HTML which this feature may create.
exec: function( editor ) {
var imgurl=prompt("Insert url image");
editor.insertHtml('<img src="'+imgurl+'" />');
}
} );
And now, when this button will be added to the toolbar, feature will be automatically enabled and images will be allowed.
You set wrong command name in your addButton config. You need to set:
editor.addCommand( 'insertImg', {
...
}
);
as well as the name of command config in editor.ui.addButton()
UPD:
some fiddle: http://jsfiddle.net/kreeg/2Jzpr/522/