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
Related
I want to have separate config for ckditor.
For example in page temp1.html i want to have 'links' and in page temp2.html i don't want to have links.
Whats the good config for this?
I think configuration in below code is proper place for do this.
//var editor_data = CKEDITOR.instances.editor1.getData();
$('textarea#editor').ckeditor(
function () {
/* callback code */
},
//configuration
{
toolbar: 'Basic',
language: 'en',
});
You can use config.removePlugins to control the presence of certain plugins, like link (also config.removeButtons). But please note that since CKEditor 4.1, by doing this you restrict the content of the editor associated with the plugin or button (no link plugin or button = no links in the content).
So if you want to share the same content between different templates which use a different sets of plugins you need to explicitly expand config.extraAllowedContent of some editors:
$('#editor-linkless').ckeditor( function() {}, {
removePlugins: 'link',
extraAllowedContent: 'a[href,name,id,target]'
} );
$('#editor-regular').ckeditor();
JSFiddle.
See the official guide about ACF. Also this answer to know more.
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);
I have a jQuery plugin (jQuery.fn.myJQueryPlugin) that loads on a page that also loads a TinyMCE editor.
Is there a way I can get the plugin to work on the content of the TinyMCE editor (via a TinyMCE plugin)?
I've tried something along the lines of
tinymce.PluginManager.add( 'myTinyMCEPlugin', function( editor ) {
editor.on('PostProcess', function(event){
editor.getWin().parent.jQuery(".trigger-class").myJQueryPlugin();
});
});
but that doesn't seem to work
ok, it turns out, it can be done:
tinymce.PluginManager.add( 'myTinyMCEPlugin', function( editor ) {
editor.on('PostProcess', function(event){
// get jQuery from parent window
$ = editor.getWin().parent.jQuery;
$(".trigger-class", editor.getDoc()).myJQueryPlugin();
});
});
I have a standard installation (like samples):
<meta charset="utf-8"></meta>
<script src="../ckeditor.js"></script>
With HTML content with many <div contenteditable="true"> blocks. I need to configure each editor by local or an external configTypeX.js file,
<script>
CKEDITOR.on( 'instanceCreated', function( event ) {
var editor = event.editor, element = editor.element;
if ( element.is( 'h1', 'h2', 'h3' ) ) {
editor.on( 'configLoaded', function() {
editor.config.toolbar = [
[ 'Source', '-', 'Bold', 'Italic' ]
]; // BUG: about "Source"?? NOT AT INTERFACE!
});
} else {
// WHERE PUT THIS ITEM?
customConfig: 'configType2.js';
}
});
</script>
So, my problem is
How to do a customConfig in this context?
Where the "best complete documentation", about config menus (editor.config.toolbar) without online configuration-tool, where I can understand how to put and remove menu itens with correct names? Here nothing about how to fix the bug of 'Source' in a full installation.
I do,
git clone git://github.com/ckeditor/ckeditor-releases.git
cd ckeditor-releases
cp samples/inlineall.html samples/myinline.html
and edit samples/myinline.html with the code above.
For inline editors the standard Source button is hidden, because it is not possible to have different modes other than wysiwyg. Therefore for those editors new plugin was created - sourcedialog, but it is not included in any of builds by default. You can build editor with this plugin using online CKBuilder or by using one of presets with all parameter. For example: ./build.sh full all. Remember also to load sourcedialog plugin (using config.extraPlugins = 'sourcedialog').
If you want to freely configure inline editors, then you should take a look at inlinebycode sample. First you need to disable automatic editors initialization on editable elements and then call CKEDITOR.inline() on elements you want to become editors:
// We need to turn off the automatic editor creation first.
CKEDITOR.disableAutoInline = true;
CKEDITOR.inline( 'editable1', {
customConfig: 'editableConfig.js'
} );
CKEDITOR.inline( 'editable1', {
toolbar: [ ... ]
} );
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/