Does anyone have any idea, what the names are in this array, to configure the toolbar of CkEditor. Like in the docs, you can simply and easily configure the tool bar like this:
editorConfig: {
toolbar: [ 'bold', 'italic', '|', 'paste' ]
},
The only issue is, that those names in the array are WELL hidden. I've been looking for an hour and not able to find anything for the editorConfig in the data elements of my component. There are TONS of examples to be placed in the mysterious config.js file, but no clue where that goes. So I'm sticking with this.
Anyone anywhere have any idea what these names are?
This example will help: https://stackoverflow.com/a/60135719/4322960
editor: ClassicEditor,
editorData: 'ckeditor 5 for laravel and vuejs',
editorConfig: {
toolbar: {
items: [
'heading',
'|',
'bold',
'italic',
'|',
'bulletedList',
'numberedList',
'|',
'insertTable',
'|',
'imageUpload',
'|',
'undo',
'redo'
]
},
image: {
toolbar: [
'imageStyle:full',
'imageStyle:side',
'|',
'imageTextAlternative'
]
},
table: {
contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ]
},
},
Related
I'd like to know how do I make my <img> which I append using editor.data.set() to be in a specific size and alignment? Can I define a global size for such appended images? I want it also to work with a normal image adding feature.
I cannot set the default style options for images - side / alignRight / alignBlockRight in my case (I don't know what's the difference between them, but nevermind).
Even if a specific alignment option is active / highlighted, the image is not aligned to the right.
image: {
styles: {
options: [
'alignLeft', 'alignRight',
'alignCenter', 'alignBlockLeft', 'alignBlockRight',
'block',
{
name: 'inline',
isDefault: false,
},
{
name: 'side',
isDefault: true,
},
],
},
I tried many ways but nothing works.
My full config:
ClassicEditor
.create(editorElement, {
plugins: [
Autoformat,
Base64UploadAdapter,
BlockQuote,
Bold,
Essentials,
Heading,
Image,
ImageBlockEditing,
ImageCaption,
ImageInlineEditing,
ImageResize,
ImageStyle,
ImageToolbar,
ImageUpload,
Italic,
Link,
List,
MediaEmbed,
Paragraph,
PasteFromOffice,
SourceEditing,
Table,
TableToolbar,
TextTransformation,
Underline,
WordCount,
GeneralHtmlSupport,
],
toolbar: [
'heading',
'|',
'bold',
'italic',
'underline',
'link',
'bulletedList',
'numberedList',
'|',
'outdent',
'indent',
'|',
'imageUpload',
'blockQuote',
'insertTable',
'mediaEmbed',
'undo',
'redo',
'sourceEditing',
],
// #ts-expect-error
htmlSupport: {
allow: [
{
name: 'img',
classes: true,
attributes: true,
}
],
},
language: 'en',
image: {
styles: {
styles: {
options: [
{
name: 'alignRight',
isDefault: true,
},
],
},
toolbar: [
'imageTextAlternative',
'imageStyle:alignRight',
],
},
table: {
contentToolbar: [
'tableColumn',
'tableRow',
'mergeTableCells'
]
}
})
.then(ckeditor => {
editor = ckeditor;
// editor.execute('imageStyle', { value: 'alignRight' });
})
.catch(error => {
console.error(error);
});
I want to use some of the optional extras, specifically video embedding, in CKEditor.
I have downloaded the entire thing to ckeditor in the public area, and in the plugins directory there is the video.
I start with the CDN of CKeditor:
<script src="//cdn.ckeditor.com/4.7.3/full-all/ckeditor.js"></script>
and then I add the option for the video plugin:
<script>
CKEDITOR.plugins.addExternal( 'video', '{{ public_path('\ckeditor\plugins\video\ ') }}', 'video.js' );
</script>
(The video.js actually is in a subdirectory dialogs which I have tried as well).
I can see the CKEditor which appears on my page but no video button.
Anyone any ideas please?
First of all, you need to upload the contents of the plugin archive to any folder on your website. Although, it is a good idea to name the folder so that you knew it holds CKEditor plugins. Let’s name it as ckeditor/plugins for the sake of our example. You should end up with the following path then:
ckeditor/plugins/jsplus_image_editor
Now, we need to tell CKEditor to load the plugin from the above folder. Add the following code to your HTML code above the line where CKEditor replaces the standard control:
<textarea name="editor1"></textarea>
...
<script>
CKEDITOR.plugins.addExternal( 'yourpluginname',
'/ckeditor/plugins/yourpluginname', 'plugin.js' );
CKEDITOR.replace('editor1');
...
</script>
Normally you install plugins trough the config.js but since you are using a cdn we need to replace the config. Update the above replace with the following code:
CKEDITOR.replace('editor1', { customConfig: '/ckeditor/custom_config.js'});
make the above mentioned custom_config.js and place the following code
CKEDITOR.editorConfig = function( config ) {
CKEDITOR.editorConfig = function( config ) {
config.language = 'en';
config.extraPlugins = 'PLUGINNAME';
config.toolbar = 'custom';
config.toolbar_custom = [
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ], items: [ 'Scayt' ] },
{ name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] },
{ name: 'insert', items: [ 'Image', 'Table', 'HorizontalRule', 'SpecialChar' ] },
{ name: 'tools', items: [ 'Maximize' ] },
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ], items: [ 'Source' ] },
{ name: 'others', items: [ '-' ] },
'/',
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ], items: [ 'Bold', 'Italic', 'Strike', '-', 'RemoveFormat' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ], items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote' ] },
{ name: 'styles', items: [ 'Styles', 'Format' ] },
{ name: 'about', items: [ 'About' ] },
{ name : 'new_group', items: ['PLUGINNAME'] }
];}
hope this helps!
I'm using vue-ckeditor2 on my website, alongside Laravel. I'm trying to figure out how to use multiple extraplugins.
Doing this works, but it ends up with only one extraPlugin - Embed:
'BulletedList',
'Image',
'Source',
'Format',
'Link',
'Unlink',
'Embed',
]
],
extraPlugins: 'embed',
toolbarLocation: 'bottom',
}
}
This works as well, but I end up with only one - Autogrow:
'Format',
'Link',
'Unlink',
]
],
extraPlugins: 'autogrow',
toolbarLocation: 'bottom',
}
}
However, combinding them in a way I've found online doesn't work, and actually makes the textarea disappear all together:
'Unlink',
'Embed',
]
],
extraPlugins: 'autogrow, embed',
toolbarLocation: 'bottom',
}
}
Please try remove the space after the comma so your example should be as follows:
extraPlugins: 'autogrow,embed',
Assuming that the Vue2-CKEditor follows CKEditor conventions regarding extra plugins, see here.
Let start with I am no expert working with CKEditor but I think I have done this right and it should work but there certainly could be something I am doing wrong. Two days trying to figure it out and I think I have tweaked everything more than once and just cannot get it all to work.
I am loading https://cdn.ckeditor.com/4.6.2/full-all/ckeditor.js and loading an external plugin that I wrote. My plugin is loading great and my icon showed up in the toolbar and context menu at appropriate times and clicking on them made the right things happen. I defined a custom toolbar and I got that just the way I wanted it; defined in a local config file pointed to by customConfig:… in the CKEDITOR.replace() setup call. All was right with the world!
Then I tried to do them both at the same time – but my toolbar icon/button does not get added to my custom toolbar setup. My plugin is still loading and working and I can get my plugin through the context menu and it does what it is supposed to do so I think it is there and still working; but I cannot get the button/icon to show up in the toolbar. I have also tried setting the toolbar in the config file as an array of arrays and as an array of objects with group names – my button does not show up. I have tried defining the toolbar in the CKEDITOR.replace() object as both an array of arrays and as an array of objects and the custom toolbars show up but my toolbar button does not show up. I have tried defining my button in the custom toolbar that I created and by using the editor.ui.addButton method. No button in my custom toolbar!
If I comment out the customConfig: line then my button shows up in the document group of the default toolbar, so I think that I am adding it correctly at the right time with the right API and pointing at the right png file. However, if I uncomment the customConfig and make no other changes and hit Ctrl+F5 multiple times to flush the cache then the button does not show up no matter where I try to put it (document, insert, button group I add via API, etc).
I am fairly sure that my custom config is getting processed and used because it does change the toolbar from the standard built-in one to what I have defined.
Using the default toolbar setup I can add a toolbarButtonGroup and put my button in that but that does not work either when I try to use a custom toolbar setup (I think that I read this was not allowed except for the built in toolbar in the docs).
So my questions are
Is it possible to have a custom toolbar definition AND an external plugin AND have a custom toolbar button all while using the CDN version of CKEditor?
Will I have to build and host my own version of CKEditor so that my plugin is not an external plugin?
Is there something else I am doing wrong?
Here is the custom toolbar setup I created (this is not the end game but one that I created to prove to myself I could create a custom toolbar):
config.toolbar = [
{ name: 'document', items: [ 'Save', 'Preview', 'Print' ] },
{ name: 'basicstyles', items: [ 'Bold', 'Italic', 'Underline', '-', 'CopyFormatting', 'RemoveFormat' ] },
{ name: 'clipboard', items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
{ name: 'colors', items: [ 'TextColor', 'BGColor' ] },
{ name: 'editing', items: [ 'Find', 'Replace', '-', 'SelectAll', '-', 'Scayt' ] },
'/',
{ name: 'forms', items: [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] },
{ name: 'paragraph', items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl', 'Language' ] },
{ name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] },
{ name: 'insert', items: [ 'Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe' ] },
'/',
{ name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize', 'Strike', 'Subscript', 'Superscript' ] },
{ name: 'tools', items: [ 'Maximize', 'ShowBlocks', 'Source' ] },
{ name: 'about', items: [ 'About' ] }
];
Here is the custom toolbar setup I created with my icon/button in it (it is the xrr first item in the document group:
config.toolbar = [
{ name: 'document', items: [ ‘xrr’, 'Save', 'Preview', 'Print' ] },
{ name: 'basicstyles', items: [ 'Bold', 'Italic', 'Underline', '-', 'CopyFormatting', 'RemoveFormat' ] },
{ name: 'clipboard', items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
{ name: 'colors', items: [ 'TextColor', 'BGColor' ] },
{ name: 'editing', items: [ 'Find', 'Replace', '-', 'SelectAll', '-', 'Scayt' ] },
'/',
{ name: 'forms', items: [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] },
{ name: 'paragraph', items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl', 'Language' ] },
{ name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] },
{ name: 'insert', items: [ 'Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe' ] },
'/',
{ name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize', 'Strike', 'Subscript', 'Superscript' ] },
{ name: 'tools', items: [ 'Maximize', 'ShowBlocks', 'Source' ] },
{ name: 'about', items: [ 'About' ] }
];
Here is how I add the button to the toolbar – this works for the built in toolbar but not with the custom definition above:
editor.ui.addButton( 'xrr', { label: 'Create RR Placeholder', // lang.toolbar,
command: 'xrr',
toolbar: 'document',
icon: 'xrr'
}
);
Thanks so much for any help anyone can provide!
I am using CKEDITOR with an Inline Setup.
I have defined my own config like that:
config.toolbar_Content =
[
['Undo','Redo','-','PasteText','-','Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink']
];
But the Buttons for NumberedList and BulletedList are not showing up.
If I use the local configuration page for setting up my config, the buttons are there, but not in my inline version.
What can I do?
Thanks
kay899
Your code is not working, the syntax is not correct.
This code should work for you. You have just to choose the right buttons.
CKEDITOR.editorConfig = function( config ) {
config.toolbar_Tiny =
[
{ name: 'clipboard', items : [ 'Paste','PasteText','Undo','Redo' ] },
{ name: 'basicstyles', items : [ 'Bold','Italic' ] },
{ name: 'paragraph', items : [ 'NumberedList','BulletedList' ] },
{ name: 'links', items : [ 'Link','Unlink','Anchor' ] },
];
};
Best regards.