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);
Related
Is there a way to dynamically change the skin of the editor (CKEditor 4.1 (revision 80c139aa))?
The only way I could do that is from the config.js (which means that my skins are working ok)
The editor is loaded when a jDialog is opened. On open of the dialog i want to run a command that will change the skin according to user preferences.
I tried with no luck:
CKEDITOR.config.skin = '/moono-dark';
Also this:
CKEDITOR.editorConfig = function( config ) {
config.skin = '/karma';
};
Also this:
CKEDITOR.replace( 'problem', {
customConfig: '../ckeditor/skins/config_flat.js'; //this path is ok
});
Also tried to load the config file with ajax (after deleting the defaulkt config.js file):
$.getScript( "../ckeditor/skins/config_icy_orange.js", function( data, textStatus, jqxhr ) {
CKEDITOR.replace( 'problem' );
});
It always loads the default config.js file...
How can i do this?
You can choose the skin to use whith CKEDITOR.replace like this:
CKEDITOR.replace( 'ckeditor',{
skin: "kama"
});
If the skin isn't in the default plugin folder you should add the path to the skin folder like this:
// Enable "moonocolor" skin from the /myskins/moonocolor/ folder.
CKEDITOR.replace( 'editor1', {
skin: 'moonocolor,/myskins/moonocolor/'
} );
Here a working fiddle with kama
You can see here ckeditor skin samples
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...
};
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.
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.
I just wonder if anyone know if it's possible to add a break point on a specific css property on a specific element in Chrome Dev Tools, i.e when #mydiv's height property has changed, break.
You can only break on all inline style (<div style="height: 20px; width: 100%">) changes using the Elements panel context menu's Break on... | Attributes modifications.
You can do it this way:
function observe(el, property) {
var MutationObserver = window.WebKitMutationObserver;
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
console.log('old', mutation.oldValue, 'new', mutation.target.style.cssText, 'mutation', mutation);
if (mutation.attributeName == property) debugger;
});
}
);
var config = {
attributes: true,
attributeOldValue: true
}
observer.observe(el, config);
}
Then you can set breakpoint on style change like this: observe(element, "style")
It will break when it changes and also print in console old and new value.