Правильно настроен импорт ckeditor - CORS

Question

Привет, я использую CKEditor в своем приложении, которое работает абсолютно нормально.

Мой код выглядит так:

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);
            });
        }
    }
};

Но когда я использую его, как указано выше, я получаю это сообщение об ошибке:

Отказ от выполнения скрипта из 'http://localhost:8080/www/js/ckeditor/configProducts.js?t=H5SC', поскольку его тип MIME (' text / html ') не исполняется и включена строгая проверка типов MIME.

конфигурация выглядит следующим образом:

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';
};

Редактор работает нормально, но я хочу устранить ошибку.Как я могу это сделать?

Я попытался импортировать конфигурацию следующим образом:

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

Но тогда редактор не работает.

Answer 1

Мое решение теперь заключается в использовании этого пакета:

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

I Импортировал пакет следующим образом:

import CKEditor from "react-ckeditor-component";

Затем я добавил конфигурацию дляредактор:

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'
};

Тогда вы можете использовать его так:

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