NodeJS React Draft wysiwyg无法加载CSS样式

qyswt5oh 于 2023-08-04 发布在 Node.js

关注(0)|答案(3)|浏览(152)

我正在开发一个用create-react-library创建的React库。工作得很好，现在我想实现一个html文本编辑器。我选择了react-draft-wysiwyg。我遇到了两个问题：
1.将Editor和EditorState添加到我的组件：
import {Editor} from 'react-draft-wysiwyg'; import {EditorState} from 'draft-js';个
Rollup无法解析必需的Editor和EditorState类。它给出错误'name-is-not-exported-by-module'。在searching和尝试之后，我通过将以下行添加到rollup.config.js来解决这个问题：

commonjs({
        namedExports: {
            'node_modules/draft-js/lib/Draft.js': [ 'EditorState' ],
            'react-draft-wysiwyg': [ 'Editor' ]

        }
    }),

字符串
现在编辑出现了。
1.加载CSS
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';个
样式也不会加载，但这一次，控制台中没有显示警告，它们只是不加载。
有什么办法解决这个问题吗？

node.js

来源：https://stackoverflow.com/questions/51018454/react-draft-wysiwyg-wont-load-css-styles

3条答案

按热度按时间

q5lcpyga1#

x1c 0d1x的数据
你看到这样的东西了吗？您可以试试这个，然后看看，import '../node_modules/react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
我使用的是同一个编辑器，但从来没有遇到过上述任何问题。您确定安装正确吗？因为你面对的第一个问题就是这样。

赞(0）回复(0）举报 2023-08-04

fiei3ece2#

这个问题已经很老了，但是对于那些使用NextJs的人来说，如果遇到这个问题，将这个导入@import '~react-draft-wysiwyg/dist/react-draft-wysiwyg.css';添加到全局CSS（或SASS，LESS）文件中应该可以。

赞(0）回复(0）举报 2023-08-04

wswtfjt73#

您的导入应该类似于以下内容

import { useState } from 'react';
import { EditorState } from 'draft-js'
import { Editor } from 'react-draft-wysiwyg'
import 'draft-js/dist/Draft.css'
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'

字符串
函数体和返回应该是：

const Editor = () => {
    const [editorState, setEditorState] = useState(EditorState.createEmpty());
    const [text, setText] = useState('');

    const onEditorStateChange = (state) => {
        setEditorState(state);
        let text = state.getCurrentContent().getPlainText('\u0001');
        setText(text);
    };

    return ( <Editor editorState={editorState} onEditorStateChange={onEditorStateChange} />
    );
};

型

赞(0）回复(0）举报 2023-08-04

我来回答

NodeJS React Draft wysiwyg无法加载CSS样式

3条答案

相关问题

热门标签

最新问答