I have a custom toolbar for CKEditor 5 with options like this:
customToolbar: ['insertTable', 'fileUpload', 'mediaEmbed']
Is there a way to customize the title for these features?
I saw a way to customize heading like this:
heading: {
options: [
{ model: 'paragraph', title: 'Body copy', class: 'ck-heading_paragraph' },
{ model: 'heading2', view: 'h2', title: 'Sub Header', class: 'ck-heading_heading2' }
]
}
But not sure how to do it with other features.
Buttons in CKEditor5 UI have the (observable) #label property. Changing it will be immediately reflected in DOM.
yourToolbar.items.get( 2 ).label = "Foo"
Posting this as it took me a sec to figure out how to get a hold of the toolbar object from #oleq post.
ClassicEditor
.create( document.querySelector('#editor'))
.then(editor => {
editor.ui.view.toolbar.items.get(0).label = 'YEAH BUDDY'
});
Related
I have a custom Media Library which I need to integrate with CKEditor 5. I've managed to write a plugin for adding images and another for adding download links for documents, but I can't get the downcast conversion for the download links to work properly.
I am currently able to insert the following into the content of the CKEditor window:
<a class="downloadLink" data-file-id="3" download="pretty-file-name-for-download.pdf" href="actual_file_name.pdf">Download link text</a>
and when I save my content this gets written to the database - so far so good.
When I reload the content into the editor, it comes back formatted differently:
<a href="actual_file_name.pdf">
<a class="downloadLink" data-file-id="3" download="pretty-file-name-for-download.pdf" href="actual_file_name.pdf">Download link text</a>
</a>
There is now an additional anchor tag wrapping the original anchor tag.
My downcast and upcast converters look like this:
conversion.for('downcast').elementToElement( {
model: {
name: 'downloadLink',
attributes: ['fileId', 'fileUrl', 'fileDownloadName', 'title']
},
view: (modelElement, conversionApi) => {
const viewWriter = conversionApi.writer;
return viewWriter.createContainerElement(
'a',
{
'data-file-id': modelElement.getAttribute('fileId'),
'download': modelElement.getAttribute('fileDownloadName'),
'href': modelElement.getAttribute('fileUrl'),
'class': 'downloadLink'
},
viewWriter.createText(modelElement.getAttribute('title'))
);
}
} );
conversion.for('upcast').elementToElement( {
view: {
name: 'a',
classes: 'downloadLink'
},
model: (viewElement, conversionApi) => {
const modelWriter = conversionApi.writer;
return modelWriter.createElement(
'downloadLink',
{
fileId: viewElement.getAttribute('data-file-id'),
fileUrl: viewElement.getAttribute('href'),
fileDownloadName: viewElement.getAttribute('download'),
title: viewElement.getChild(0).data,
}
);
}
} );
If anyone has any suggestions about what I'm doing wrong I'd appreciate the help!
I want to override the labels of the headlines in dropdown list. I tried the following yaml config, but it's not working:
editor:
config:
format_h2: { name: "test", element: "h1"}
I found a solution by myself, hope it helps someone else:
You can create remove the standard headlines from format_tags and add custom ones like headline1;headline2,...
editor:
config:
format_tags: 'p;headline1;headline2;headline3'
format_headline1: { element: 'h1', name: 'Very Large Headline' }
format_headline2: { element: 'h2', name: 'Large Headline' }
format_headline3: { element: 'h3', name: 'Normal Headline' }
I'm having difficulty deactivating the Advanced Content Filter (config.allowedContent = true; dosen't seem to work). I've tried everything that I've read on the forums, including clearing the cache, and making it an external file.
CKEditor 4.2.2 - allowedContent = true is not working
I've even added config.protectedSource.push lines, and they work to a point. The CKEditor still adds div tags and partially deletes other tags.
I'm creating a set of well designed templates for clients to use, so In the end I don't want CKEditor to touch my code at all. Here is what I have in the config.js. If anyone can see something I did wrong, or knows of a way to make it work, please help this somewhat stressed web guy.
Thanks,
Rusty
CKEDITOR.editorConfig = function( config ) {
config.toolbarGroups = [
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ] },
{ name: 'insert' },
{ name: 'links' },
{ name: 'others' },
'/',
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align' ] },
{ name: 'styles' },
{ name: 'colors' },
{ name: 'tools' },
{ name: 'about' }
];
// Define changes to default configuration here. For example:
// config.uiColor = '#AADC6E';
// misc options
config.allowedContent = true; // allowedContent doesn't work :-(
// Protected Source
config.protectedSource.push(/<section>[\s\S]*?<\/section>/gi); // allow <section></section>
config.protectedSource.push(/<span>[\s\S]*?<\/span>/gi); // allow <span></span>
config.protectedSource.push( /<link[\s\S]*?\>/g ); // allow <link> tag
config.protectedSource.push( /<!--[\s\S]*?\>/g ); // allow <comment> tag
config.protectedSource.push( /<br[\s\S]*?\/>/g ); // allow BR Tags
config.protectedSource.push(/<script>[\s\S]*?<\/script>/gi); // allow <script></script>
config.protectedSource.push(/<div>[\s\S]*?<\/div>/gi); // allow <div></div>
config.removeButtons = 'Anchor,Iframe';
config.format_tags = 'p;h1;h2;h3;h4;h5;h6'; // format button options
config.height = '500px'; // edit window height
config.skin = 'moono';
config.stylesSet = 'vam_styles:/templates/admin/-css/vam_styles.js'; // style button options
// Only add rules for p and span elements.
config.stylesheetParser_validSelectors = /\^(p|span\div)\.\w+/;
config.stylesheetParser_skipSelectors
};
I'm creating a set of well designed templates for clients to use, so In the end I don't want CKEditor to touch my code at all.
This is not possible. CKEditor is not a web site builder into which you can load any possible HTML. It is a rich text editor. So you should use it to edit the textual part of the website, not the whole layout.
For instance, if you had a layout with two columns and some header above them, it would be best if there were 3 editors - one for each column and one for the header. Of course, in this basic case CKEditor could be used to edit or 3 sections at once, but the more complex the layout the more important it is to use CKEditor correctly.
PS. It's CKEditor, not ckEditor.
Thanks for your reply.
I wasn't talking about site design templates, but page design templates. On the Full featured version of CKEditor there is a template button that we've been able to enhance. We now are able to let our clients choose several well designed page layouts that are responsive for different devises. It is very effective.
After trying everything I found the culprit that was causing the problem. I was using <br> instead of <br />. As soon as I switched the editor left my code alone.
Best Wishes!
Rusty
I am using CKEditor version 4. I am making custom styles. The problem is, when the styles are shown in the dropdown, any styles with float:right move over on the display like this:
Item 1
Item 2
FLoat right item
Normal Item
I have been trying to override the styles but it is not working. They are created dynamically with JavaScript and I am not even sure the class names to affect this.
Anyone know how I can fix this?
My code for the styles is like this:
{ name: 'Image 25% Right', element: 'span', attributes: { 'class': 'img_right_25' } },
{ name: 'Image 25% Left', element: 'span', attributes: { 'class': 'img_left_25' } },
{ name: 'Image 50% Right', element: 'span', attributes: { 'class': 'img_right_50' } },
{ name: 'Image 50% Left', element: 'span', attributes: { 'class': 'img_left_50' } },
and then
.img_right_25 {
float:right;
margin-left:10px;
}
.img_left_25 {
float:left;
margin-right:10px
}
In editor.css, try adding a rule like this:
.cke_panel_listItem * {
float:none !important;
}
Then refresh the page (make sure that the old contents of editor.css is not being used from cache!).
What this is trying to do (I haven't tested it) is force every descendant element under .cke_panel_listItem to have a float value of "none". The !important should make sure that that this rule cannot be overridden by subsequent style definitions and so the styling made by JS is disregarded.
I have a config.toolbarGroups setting in config.js but I don't know what name to use for the groups to add font family/font size controls. (It seems the documentation is lacking in this regard). I've found some suggestion that I should use CKBuilder to create a package that already includes it, but I can't redeploy the entire ckeditor just to add a couple of buttons.
Edit: My CKEditor is version 4
Any advise?
Thanks!
config.extraPlugins = 'font';
You have to add the plugin...
There are two (mutually exclusive) ways to configure the toolbar. Check out the following:
http://ckeditor.com/latest/samples/plugins/toolbar/toolbar.html
I tried to use config.toolbarGroups first, but ended up using config.toolbar instead. Here's what I ended up using:
config.toolbar = [
{ name: 'save', items: [ 'savebtn','Undo','Redo' ] },
{ name: 'clipboard', items: [ 'Cut','Copy','Paste','PasteText','PasteFromWord'] },
{ name: 'document', items: [ 'Find','Replace'] },
'/',
{ name: 'lists', items: [ 'NumberedList','BulletedList','Outdent','Indent'] },
{ name: 'insert', items: [ 'Image','Table','Smiley','SpecialChar'] },
{ name: 'link', items: ['Link','Unlink'] },
'/',
{ name: 'basicstyles', items: [ 'Font','FontSize','Bold','Italic','Underline','Strike','Subscript','Superscript'] },
//'/',
{ name: 'align', items: [ 'JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'] }
];
Note that I am using a save plugin that was generously contributed by kasper Taeymans, which can be found at the following location:
How to add an ajax save button with loading gif to CKeditor 4.2.1. [Working Sample Plugin]
I also found the following document to be really useful, even though it related to version 3:
http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Toolbar
I used the information in this article to produce my configuration (I'm using version 4.2.1), specifically the names of the items (e.g. Cut, Copy, Paste), as this was the missing link in my case.
Took me a long time to figure out that I explicitly had to add FontSize to the toolbar, too - doesn't seem to work with Font only.
This can be used to add font family and font size in the CkEditor.
This is to be done in config.js.
Also see docs
config.font_names = 'Arial;Times New Roman;Verdana;' + CKEDITOR.config.font_names;
config.toolbar_Full =
[
{ name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
{ name: 'paragraph', items : [ 'Outdent','Indent','-','Blockquote','CreateDiv','-',
'JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] }
];
config.toolbar = 'Full';
Add directly using script :
CKEDITOR.replace('content', {
extraPlugins: 'uicolor,colorbutton,colordialog,font',
});
To change default styles of text :
CKEDITOR.addCss(".cke_editable{cursor:text; font-size: 25px; color: #FFFFFF;background-color: #006991;}");