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: [ ... ]
} );
Related
In CKEditor 5 I don't see field for target attribute in link dialog.
How to add such field? Or set target=_blank as default.
Thanks
Since version 11.1.0 of a Link Plugin, there is added link decorator feature. This feature provides an easy way to define rules when and how to add some extra attributes to links.
There might be manual or automatic decorators.
First provides a UI switch which might be toggled by the user. When the user edits a link and toggles it, then preconfigured attributes will be added to the link e.g. target="_blank".
Second one, are applied automatically when content is obtained from the Editor. Here you need to provide a callback function which based on link's URL decides if a given set of attributes should be applied.
There is also a preconfigured decorator, which might be turn on with simple config.link.addTargetToExternalLinks=true. It will add target="blank" and rel="noopener noreferrer" to all links started with: http://, https:// or //.
You can achieve it by adding this code in CKEditor Initialization Script:
ClassicEditor
.create( document.querySelector( '#editor' ), {
// ...
link: {
decorators: {
openInNewTab: {
mode: 'manual',
label: 'Open in a new tab',
defaultValue: true, // This option will be selected by default.
attributes: {
target: '_blank',
rel: 'noopener noreferrer'
}
}
}
}
} )
.then( ... )
.catch( ... );
Here is the Documentation Link . It will be working fine.
How can prevent block elements in ckeditor?
I want to don't let to ckeditor to accept block elements.
With prevent enter key i can do this but if i paste some text that's include enter key or several paragraph in ckeditor everything down.
In other word i want a textbox with ckeditor.
Quoting an official weekly blog post:
CKEditor core developer, Olek Nowodziński, was hacking the editor a bit in his spare time and here is the result...
Editable header that does not break with Enter key or pasted multi–line content: https://jsfiddle.net/540ckczt/
var editor = CKEDITOR.inline( 'editor', {
plugins: 'clipboard,floatingspace,toolbar,undo,basicstyles,link',
toolbar: [ [ 'Undo', 'Redo' ], [ 'Bold', 'Italic' ], [ 'Link', 'Unlink' ] ],
// Enter mode ill be set to BR automatically if editor was enabled on some element
// which cannot contain blocks (like <h1 for instance).
// If you want to enable editor on different elements, set BR mode here.
// Read the note below to learn why.
enterMode: CKEDITOR.ENTER_BR,
on: {
instanceReady: function() {
// Remove all "br"s from the data being inputted into the editor.
editor.dataProcessor.dataFilter.addRules( {
elements: {
br: function() {
return false;
}
}
} );
this.editable().on( 'keydown', function( evt ) {
var keystroke = evt.data.getKeystroke();
if ( keystroke == CKEDITOR.SHIFT + 13 || keystroke == 13 ) {
evt.data.preventDefault();
}
} );
}
}
} );
Note that the crucial part of this code is that the ACF filters out the rest of block tags (other than <br>). In the case above the ACF works in an automatic mode where it's configured by the enabled features. And since there's no Format dropdown or any other feature creating blocks, none of them is allowed. Read more in the Advanced Content Filter guide.
I expect that one could ask now: "Why can't we configure ACF to filter out <br>s too?"
The answer is that ACF must be able to normalise blocks which are not allowed to some content, and as CKEditor does not support "no enter" mode officially, it choses between normalising to <p>, <div> or <br>. The decision is made based on the enter mode, so that's why it's important to configure such editor to enter mode BR.
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 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/
I have multiple instances of a CKEDITOR inline on a page.
I want to be able to customise the toolbar for each of these to display different fonts in each of them.
So I have something like the following:
CKEDITOR.disableAutoInline = true;
var editor1 = CKEDITOR.inline(document.getElementById('editable_476'));
CKEDITOR.config.toolbar = [ .....
];
CKEDITOR.config.font_names = 'Helvetica Nueue/Helvetica Nueue';
This works well if I have one, but If I use the same code for another CKEDITOR instance, the font is overwritten.
How do I use different toolbars for different CKEDITOR instances?
Thanks
UPDATE:
CKEDITOR.inline( editable_498, {
toolbar: [
['Bold','Italic','Underline'],
['NumberedList','BulletedList'],
['JustifyLeft','JustifyCenter','JustifyRight'],
['Undo','Redo'],
'/',
['TextColor','Font','FontSize']
],
font_names: 'Helvetica Nueue/Helvetica Nueue';
});
This throws a syntax error:
Uncaught SyntaxError: Unexpected token ;
The line is font_names: 'Helvetica Nueue/Helvetica Nueue';
Use per-instance config:
CKEDITOR.inline( element, {
toolbar: [
...
],
font_names: '...'
});
CKEDITOR.config is something that all instances inherit from. Use config for a specific instance, it'll overwrite global rules from CKEDITOR.config.
See the official configuration guide.