reactJs import ckeditor config correctly - CORS

Question

Hi I use the CKEditor in my application, that works absolutely fine.

My code looks like this:

initTextEditor = () => {
    CKEDITOR.replace('description', {
        customConfig: "../../../../www/js/ckeditor/configProducts.js"
    });

    for (let i in CKEDITOR.instances) {
        if (CKEDITOR.instances.hasOwnProperty(i)) {

            CKEDITOR.instances[i].on('change', () => {
                let data = CKEDITOR.instances[i].getData();
                this.handleNewProductChange("description", data);
            });
        }
    }
};

But when I use it like above I got this error message:

Refused to execute script from 'http://localhost:8080/www/js/ckeditor/configProducts.js?t=H5SC' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

the configuration looks like this:

CKEDITOR.editorConfig = function( config ) {
    // Define changes to default configuration here. For example:
    // config.language = 'fr';
    //  config.uiColor = '#AADC6E';

    config.toolbarGroups = [
        { name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
        { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
        { name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
        { name: 'links' },
        { name: 'styles' },
    ];

    config.removeButtons = 'Cut,Copy,Paste,Undo,Redo,Anchor,Underline,Strike,Subscript,Superscript';

    // Dialog windows are also simplified.
    config.removeDialogTabs = 'link:advanced';
};

The editor works fine, but I want to resolve the error. How can I do this?

I tried to import the config like this:

import ckEditorConfig from "../../../../www/js/ckeditor/configProducts.js";

But then the editor does not work.

Answer 1

My Solution now is to use this package:

https://www.npmjs.com/package/react-ckeditor-component

I Imported the package like this:

import CKEditor from "react-ckeditor-component";

Then I added a config for the editor:

const config = {

    toolbarGroups: [
        {name: 'document', groups: ['mode', 'document', 'doctools']},
        {name: 'clipboard', groups: ['clipboard', 'undo']},
        {name: 'editing', groups: ['find', 'selection', 'spellchecker', 'editing']},
        {name: 'forms', groups: ['forms']},
        {name: 'basicstyles', groups: ['basicstyles', 'cleanup']},
        {name: 'paragraph', groups: ['list', 'indent', 'blocks', 'align', 'bidi', 'paragraph']},
        {name: 'links', groups: ['links']},
        {name: 'insert', groups: ['insert']},
        {name: 'styles', groups: ['styles']},
        {name: 'colors', groups: ['colors']},
        {name: 'tools', groups: ['tools']},
        {name: 'others', groups: ['others']},
        {name: 'about', groups: ['about']},
        '/',
        '/'
    ],

    removeButtons: 'Find,Replace,Scayt,SelectAll,Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,Strike,Subscript,Superscript,CopyFormatting,RemoveFormat,Outdent,Indent,CreateDiv,Blockquote,JustifyLeft,JustifyCenter,JustifyRight,JustifyBlock,BidiLtr,BidiRtl,Language,Anchor,Image,Flash,Table,HorizontalRule,Smiley,SpecialChar,PageBreak,Iframe,FontSize,Font,TextColor,BGColor,About,Styles'
};

Then you are able to use it like this:

<CKEditor
    activeClass="p10"
    config={config}
    content={this.state.newPMSRecord.analysis}
    events={{
        "change": this.handleNewAnalysisChange
    }}
/>