javascript - ReactJs 正确导入 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);
            });
        }
    }
};

但是当我像上面一样使用它时，我收到了此错误消息:

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.

配置如下:

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

我像这样导入了包:

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
    }}
/>