ckeditorClassic - Configure buttons and add source buuton

peterbrowne

I need to change some buttons on ckeditorClassic, and add a source button to edit the source in the editor content. There is a plugin for the editor to add the source button:

https://ckeditor.com/cke4/addon/sourcearea

Any suggestions to achieve this in the datatables editor?

colin

There are CKEditor plugins for Editor - V4 and V5. Would these work for you?

Colin

peterbrowne

I am using the ckeditor v5 plugin on my editor. That is not the problem.

I need to configure the ckeditor toolbar to change the buttons and to use additional ckeditor plugins, e.g. add buttons for viewing the editor source and enable different list types:

https://ckeditor.com/cke4/addon/liststyle

https://ckeditor.com/docs/ckeditor4/latest/examples/sourcearea.html

I don't know where the ckeditor config is or how/where to add the toolbar options for the editor.

I have tried the following, but it breaks the ckeditor (ckeditor doesn't show):

var editor = new $.fn.dataTable.Editor( {
                ajax: "program_data/professional_practice_standard_data.php",
                table: "#professional_practice_standards_table",
                template: '#professional_practice_standards_form',
                fields: [ {
                    label: "Professional Practice Standard:",
                    name: "professional_practice_standard",
                    type: "ckeditorClassic",
    opts: { toolbar : [['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About']]}
                } ]
            } );

peterbrowne

Just to clarify:

1. I have created a custom build of ckeditor 5 and unpacked that build to my scripts directory.
   https://ckeditor.com/ckeditor-5/online-builder/
2. I have downloaded the editor.ckeditor5.js and also put that into my scripts folder (https://editor.datatables.net/plug-ins/field-type/editor.ckeditor5)
3. In the page where I am using the databatables editor I have:

    <script type="text/javascript" src="../../scripts/ckeditor5/build/ckeditor.js"></script>
    <script type="text/javascript" src="../../scripts/editor.ckeditor5.js"></script>

and on that page:

var editor = new $.fn.dataTable.Editor( {
                ajax: "program_data/professional_practice_standard_data.php",
                table: "#professional_practice_standards_table",
                template: '#professional_practice_standards_form',
                fields: [ {
                    label: "Professional Practice Standard:",
                    name: "professional_practice_standard",
                    "type": "ckeditorClassic"
                } ]
            } );

Now, the ckeditor was showing when linking directly to the ckeditor on the ckeditor website:

<script src="https://cdn.ckeditor.com/ckeditor5/15.0.0/classic/ckeditor.js"></script>

But using the custom build, no ckeditor and no errors. Just a text area...

peterbrowne

Also, the text area input has a class for ck ck-editor__main, yet no ckeditor is shown...

<div class="ck ck-editor__main" role="presentation"><div class="ck ck-content ck-editor__editable ck-rounded-corners ck-editor__editable_inline ck-blurred" dir="ltr" role="textbox" aria-label="Rich Text Editor, main" lang="en" contenteditable="true"><p>1.1 Practice in accordance with the Code of Ethics (2010):</p><ol><li>Practices within a social justice and human rights framework.</li><li>Facilitates people’s empowerment and works to eliminate all violations of human rights.</li><li>Identifies social systems and structures that preserve inequalities and injustices and advocates for change.</li><li>Challenges policies and practices that are oppressive and fail to meet international standards of human rights, social inclusion and social development.</li><li>Upholds ethical responsibilities to relevant others, to the social work profession and in the workplace.</li></ol><p><br data-cke-filler="true"></p></div></div>

allan

Are there any errors shown in your browser's console when you use your custom CKEditor build? I'm wondering specifically if there is actually a ClassicEditor object and if it has a create method available?

If not, then this would be a question you'll need to ask the CKEditor support folks since I don't know how their custom builds work I'm afraid.

Allan

peterbrowne

Hi Allan

Yes there is a ClassicEditor object, but it appears to be handled differently in the custom build. In the custom build there is:

else if(typeof exports==="object")exports["ClassicEditor"]=n();else e["ClassicEditor"]=n()})(window,(function(){return function(t){var e={};

Whereas in the CDN build as at https://cdn.ckeditor.com/ckeditor5/15.0.0/classic/ckeditor.js there is:

"object"==typeof exports?exports.ClassicEditor=e():t.ClassicEditor=e()}(window,function(){return function(t){var e={};

Otherwise could you suggest how I can customise the toolbar buttons with the CDN build??

peterbrowne

OK, I got a custom build working using ckeditor v4 from https://ckeditor.com/cke4/builder

and used editor.ckeditor4.js at https://editor.datatables.net/plug-ins/field-type/editor.ckeditor

This works no problem, for example using the complete set of buttons. So now I should just be able to create another custom build using v4 to suit my needs.

Allan, you may want to look again at the editor.ckeditor5.js to work with v5 custom builds...

Peter

peterbrowne

Yes, there appears to be a create method in v5 custom build, e.g.:

var i=Object.create(null);

allan

Thanks for the feedback. It seems really odd that the CDN build would expose CKEditor in a different manner from a custom build. We've only tested it with the CDN build which is why we didn't catch this before. Thanks for letting me know - we'll look into it.

Allan

peterbrowne

Great! BTW, I will stick with ckeditor v4 until v5 catches up with some missing functionality that is in v4, e.g. the ability to select a ordered list and change from numeric to alpha which I need for my project.