ckeditorClassic - Configure buttons and add source buuton

ckeditorClassic - Configure buttons and add source buuton

peterbrownepeterbrowne Posts: 314Questions: 54Answers: 0
edited February 2020 in Editor

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?

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

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

    Colin

  • peterbrownepeterbrowne Posts: 314Questions: 54Answers: 0
    edited February 2020

    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']]}
                    } ]
                } );
    
  • peterbrownepeterbrowne Posts: 314Questions: 54Answers: 0
    edited February 2020

    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...

  • peterbrownepeterbrowne Posts: 314Questions: 54Answers: 0
    edited February 2020

    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>
    
  • allanallan Posts: 61,433Questions: 1Answers: 10,049 Site admin

    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

  • peterbrownepeterbrowne Posts: 314Questions: 54Answers: 0

    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??

  • peterbrownepeterbrowne Posts: 314Questions: 54Answers: 0

    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

  • peterbrownepeterbrowne Posts: 314Questions: 54Answers: 0

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

    var i=Object.create(null);
    
  • allanallan Posts: 61,433Questions: 1Answers: 10,049 Site admin
    Answer ✓

    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

  • peterbrownepeterbrowne Posts: 314Questions: 54Answers: 0

    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.

This discussion has been closed.