I'm using ckEditor 5.
My aim is to create a simple search functionality to perform some ajax calls, allow the user to select from a result list and act accordingly (inserting link, or image, or media...).
The problem is that I want to dynamically update the plugin view. Something similar to this: https://github.com/ckeditor/ckeditor5/issues/520, but I'm using a dropdown in the toolbar (I started from the EmbedMedia plugin and didn't care too much about design for now).
I asked the same question on their git (https://github.com/ckeditor/ckeditor5/issues/1681)
My template is like:
this.setTemplate( {
tag: 'form',
attributes: {
class: [
'ck',
'ck-results-form'
],
tabindex: '-1'
},
children: [
this.searchInputView,
this.searchButtonView,
{
tag: 'div',
attributes: {
class: [ 'ck-result-grid' ]
},
children: this.items
},
this.saveButtonView,
this.cancelButtonView,
]
} );
// updateList method is like this:
updateList( valuesArray ) {
console.log(this.items);
this.items = new Array();
console.log(this.items);
for (let i = 0; i < valuesArray.length && i < 20; i++) {
const urlView = new TableSizeGridBoxView(i, valuesArray[i]);
urlView.on('select-url', () => {
this._selectedUrl = valuesArray[i];
});
this.items.push( urlView );
}
console.log(this.items);
//do something here to force refresh or render the section
}
I'm able to get
My expected result, after the search, is to get
and finally select the result.
Currently I can see the object correctly initialized and updated by doing console.log, but the view doesn't update... it stays blank as in the first image (that's why I think there must be something I should be able to put where I wrote //do something here to force refresh or render the section).
Furtermore I can tell that TableSizeGridBoxView is working properly because I'm able to display arbitrary values if I call the for loop in the initialization of the view.
I wanted to configure the toolbar in CKEDITOR 5. I took a look at the documentation.
https://ckeditor5.github.io/docs/nightly/ckeditor5/latest/builds/guides/integration/configuration.html
Yet, the only script related to my question is:
Array.from( editor.ui.componentFactory.names );
It is way too difficult for a frontend programmer to understand. Where do I put this script? How do I output the results? Is there a detailed tutorial?
Matter fact, it would be nice if CKEDITOR simply put the available items in the documentation. That will save a hell lot of troubles.
Thanks!
You can put this code right in the body of code samples which you can find e.g. in CKEditor 5 Build's Basic API guide. For example:
ClassicEditor
.create( document.querySelector( '#editor' ) )
.then( editor => {
console.log( Array.from( editor.ui.componentFactory.names() ) );
} )
.catch( error => {
console.error( error );
} );
As #Szymon Cofalik mentioned in his answer – there's no single list of buttons which are available in all builds. CKEditor 5 builds may differ not only visually – they may also contain different plugins and hence different buttons. So, using that code snippet is the safest and future-proof solution.
you can use console.log( Array.from( editor.ui.componentFactory.names() ) ); which will give you:
["undo", "redo", "bold", "italic", "blockQuote", "ckfinder", "imageTextAlternative", "imageUpload", "heading", "imageStyle:full", "imageStyle:side", "link", "numberedList", "bulletedList", "mediaEmbed", "insertTable", "tableColumn", "tableRow", "mergeTableCells"]
Example code you can use to list available toolbar
var editor = ClassicEditor
.create(document.querySelector('#editor'), {
toolbar: ['headings', 'bold', 'italic', 'link', 'bulletedList', 'numberedList'],
heading: {
options: [
{modelElement: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph'},
{modelElement: 'heading1', viewElement: 'h1', title: 'Heading 1', class: 'ck-heading_heading1'},
{modelElement: 'heading2', viewElement: 'h2', title: 'Heading 2', class: 'ck-heading_heading2'},
{modelElement: 'heading', viewElement: 'h3', title: 'Heading 3', class: 'ck-heading_heading3'}
]
}
})
.then(function (editor) {
console.log(Array.from(editor.ui.componentFactory.names()));
});
For anyone coming here wondering how to make use of the Array.from(editor.ui.componentFactory.names()) solution (as described in the other answers) in Angular (e.g. Angular 8), here is a description. If you try to do it in ngOnInit or ngAfterViewInit, it is too early and you will get something like Cannot read property 'ui' of null. You need to listen for the ready event from the ckeditor and query the names at that point as follows.
In your component template code, give the editor an id and listen for the ready event:
<ckeditor
#editor
[editor]="Editor"
[config]="config"
(ready)="onEditorReady($event)">
</ckeditor>
Then in your component typescript code, add a #ViewChild annotation and implement onEditorReady as follows:
#ViewChild('editor', {static: false})
editorComponent: CKEditorComponent;
onEditorReady(event: any): void {
const toolbarItems = Array.from(this.editorComponent.editorInstance.ui.componentFactory.names());
console.log('Available toolbar items: ' + toolbarItems.join(', '));
}
You will then see something like this in the console:
Available toolbar items: undo, redo, bold, italic, blockQuote,
ckfinder, imageTextAlternative, imageUpload, heading, imageStyle:full,
imageStyle:side, indent, outdent, link, numberedList, bulletedList,
mediaEmbed, insertTable, tableColumn, tableRow, mergeTableCells
It is difficult to keep plugin names in one place in documentation because:
There are multiple builds which differs,
New plugins are developed and added.
If you want to check what toolbar items are available in the build you are currently using, open developer's console in the browser you are using and execute the quoted line of code
Array.from( editor.ui.componentFactory.names );
Of course, editor has to be the editor instance.
I hope this answers your question.
EDIT: Creating editor is described in the documentation too. But you have to assign editor instance to editor variable.
For example:
ClassicEditor
.create( document.querySelector( '#editor' ) )
.then( editor => {
window.editor = editor;
// Or alternatively you could paste that line here and look at console.
} );
Adding to #DestinyB answer - perhaps a simpler solution for Vue - just listen for #ready="onReady" on the ckeditor component, and in the onReady method:
onReady(event) {
console.log(Array.from(event.ui.componentFactory.names()));
},
Adding to #user2846469 Response, It can be achieved in vue.js simply by the sample below;
import ClassicEditorfrom '#ckeditor/ckeditor5-build-classic';
export default {
data() {
return {
editor: ClassicEditor,
editorData: '',
editorConfig: {}
},
mounted() {
console.log(this.editor.builtinPlugins.map( plugin => plugin.pluginName ));
}
}
}
In React
import { CKEditor } from '#ckeditor/ckeditor5-react';
import ClassicEditor from '#ckeditor/ckeditor5-build-classic';
export default class AddArticle extends Component {
render() {
return <CKEditor config={EditorConfig} editor={ClassicEditor} onReady={(event) => {
console.log(Array.from(event.ui.componentFactory.names()))}} />
}
}
I have some styles that I need to apply to all DataTables buttons so that they match the rest of the buttons on my site. I can add that using the className option as below, but I'd like not to have to supply the same thing every time.
Manual example
$('#myTable').DataTable({
buttons: [
{
text: 'I look like a button',
className: 'icanhazdefalt'
}
]
})
I see in the docs that the default value is undefined. I couldn't find anywhere in the docs that you could override the default for this or other options. Is this possible? Something like:
$.fn.DataTable.Buttons.options.extend({
className: 'icanhazdefalt'
})
What I need is to be able to set the default for the plugin itself (rather than for a specific instance). Then all instances I create on the page from then on would have the default I specified. I can include the script that sets the default right after the plugin script (perhaps in a layout file) so that I never have to manually do anything to get all subsequent instances to have the default className (but still be able to override it by explicitly providing it as shown in the 'manual example' above).
Use:
$('#myTable').DataTable( {
buttons: {
buttons: [
{ extend: 'copy', className: 'copyButton' },
{ extend: 'excel', className: 'excelButton' }
]
}
} );
Reference: https://datatables.net/reference/option/buttons.buttons.className
EDIT: There might be a better and simpler way of doing this but, this is what I came up at the moment.
//DataTable
var table= $("#myTable").DataTable( {
dom: 'Bfrtip',
buttons: [
{
text: 'I look like a button'
},
{
text: 'I dont'
}
]
} );
//Add class to all buttons
$(table.buttons()).each(function(){
$($(this)[0]["node"]).addClass("sampleClass");
});
You can also change your button selection by giving a parameter for buttons().
See this link for that.
I'm using the pdf button from jquery datatables which is essentially the pdfmake library. The problem that I'm having is that I would like to add an additional paragraph right above my table when the user clicks the button to export the table. I have tried using the "message" parameter but for the life of me I cannot retrieve additional information right before the pdf will download. I tried doing this.
buttons: [
{
extend: 'pdfHtml5',
orientation: 'landscape',
pageSize: 'LEGAL',
title: 'Entry',
header:true,
message:function() { $("#HeaderDesc").text()}
}
]
But I have been unsuccessful in my attempts. Does anyone have any ideas on how to accomplish this?
There is another easy solution to this.
I accomplished this by using splice property. You can do like this inside customize function.
doc.content.splice(0, 1, {
text: [
{ text: 'I am loving dataTable and PdfMake \n',bold:true,fontSize:15 },
{ text: 'You can control everything.',italics:true,fontSize:12 }
],
margin: [0, 0, 0, 12],
alignment: 'center'
});
This will splice at the first position [0 index] as well as replace 1 value with the above content.
Happy coding!!!!
You cannot. The config literal for the button is read once, and message does not support function type.
However, you can change the message in the not so well documented customize() callback. This is called just before dataTables pass the generated document to pdfmake. If you have defined a message, then there will exists message section(s) in the content nodes, and those nodes have a text attribute holding the actual message :
customize: function ( doc ) {
doc.content.forEach(function(content) {
if (content.style == 'message') {
content.text = 'this is a late created message'
}
})
}
As mentioned, you must define message before this will work. If you have not defined message, there will be no styles of type message you can manipulate. Your pdfhtml5 settings could look like this :
buttons: [
{
message: '__MESSAGE__',
extend: 'pdfHtml5',
orientation: 'landscape',
pageSize: 'LEGAL',
title: 'Entry',
header:true,
customize: function ( doc ) {
doc.content.forEach(function(content) {
if (content.style == 'message') {
content.text = $("#HeaderDesc").text()
}
})
}
}
]
demo -> https://jsfiddle.net/xx5f5z6x/
I'm trying to find the equivalent of bSelectedOnly in the new version of Datatables 1.10.
I only want to print rows that the user has selected, or print all rows if they havn't selected any.
"tableTools": {
"sSwfPath": "/Datatables-1.10.0/extensions/TableTools/swf/copy_csv_xls.swf", //Add buttons for saving table data in these formats
"sRowSelect": "os", //allow user to select multiple rows in the table
"aButtons": [
{
"sExtends": "print",
"bSelectedOnly": "true",
},
{
"sExtends": "select_none",
},
]
},
It hasn't changed (see docs). But you have an error in your code. Instead of
"bSelectedOnly": "true",
it should be
"bSelectedOnly": true,
Also, bSelectedOnly is not available as a print option. It is only available as a flash button option. See here. That is the actual reason why what you're trying to do will not work :)