Develop Reference

Ckeditor 5 in Reactjs doesn't work correctly

I had been using Ckeditor 4 for a long time in my React project and I didn't have any problem with it.
For adding a plugin that it provides adding video (video Html5 tag), I had to use Ckeditor 5 instead of Ckeditor 4. So I built an editor via CKEditor 5 online builder according according to this document step by step.
This is a directory of Ckeditor in my project:
The ckeditor.js (ckeditor5/src/ckeditor.js) file is:
/**
* #license Copyright (c) 2014-2020, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
*/
import ClassicEditor from '#ckeditor/ckeditor5-editor-classic/src/classiceditor.js';
import Alignment from '#ckeditor/ckeditor5-alignment/src/alignment.js';
import Autoformat from '#ckeditor/ckeditor5-autoformat/src/autoformat.js';
import BlockQuote from '#ckeditor/ckeditor5-block-quote/src/blockquote.js';
import Bold from '#ckeditor/ckeditor5-basic-styles/src/bold.js';
import CKFinder from '#ckeditor/ckeditor5-ckfinder/src/ckfinder.js';
import CKFinderUploadAdapter from '#ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter.js';
import Code from '#ckeditor/ckeditor5-basic-styles/src/code.js';
import Essentials from '#ckeditor/ckeditor5-essentials/src/essentials.js';
import FontBackgroundColor from '#ckeditor/ckeditor5-font/src/fontbackgroundcolor.js';
import FontColor from '#ckeditor/ckeditor5-font/src/fontcolor.js';
import FontFamily from '#ckeditor/ckeditor5-font/src/fontfamily.js';
import FontSize from '#ckeditor/ckeditor5-font/src/fontsize.js';
import Heading from '#ckeditor/ckeditor5-heading/src/heading.js';
import Highlight from '#ckeditor/ckeditor5-highlight/src/highlight.js';
import HtmlEmbed from '#ckeditor/ckeditor5-html-embed/src/htmlembed.js';
import Image from '#ckeditor/ckeditor5-image/src/image.js';
import ImageCaption from '#ckeditor/ckeditor5-image/src/imagecaption.js';
import ImageInsert from '#ckeditor/ckeditor5-image/src/imageinsert.js';
import ImageResize from '#ckeditor/ckeditor5-image/src/imageresize.js';
import ImageStyle from '#ckeditor/ckeditor5-image/src/imagestyle.js';
import ImageToolbar from '#ckeditor/ckeditor5-image/src/imagetoolbar.js';
import ImageUpload from '#ckeditor/ckeditor5-image/src/imageupload.js';
import Indent from '#ckeditor/ckeditor5-indent/src/indent.js';
import Italic from '#ckeditor/ckeditor5-basic-styles/src/italic.js';
import Link from '#ckeditor/ckeditor5-link/src/link.js';
import LinkImage from '#ckeditor/ckeditor5-link/src/linkimage.js';
import List from '#ckeditor/ckeditor5-list/src/list.js';
import MediaEmbed from '#ckeditor/ckeditor5-media-embed/src/mediaembed.js';
import Paragraph from '#ckeditor/ckeditor5-paragraph/src/paragraph.js';
import PasteFromOffice from '#ckeditor/ckeditor5-paste-from-office/src/pastefromoffice';
import Table from '#ckeditor/ckeditor5-table/src/table.js';
import TableToolbar from '#ckeditor/ckeditor5-table/src/tabletoolbar.js';
import TextTransformation from '#ckeditor/ckeditor5-typing/src/texttransformation.js';
class Editor extends ClassicEditor {}
// Plugins to include in the build.
Editor.builtinPlugins = [
Alignment,
Autoformat,
BlockQuote,
Bold,
CKFinder,
CKFinderUploadAdapter,
Code,
Essentials,
FontBackgroundColor,
FontColor,
FontFamily,
FontSize,
Heading,
Highlight,
HtmlEmbed,
Image,
ImageCaption,
ImageInsert,
ImageResize,
ImageStyle,
ImageToolbar,
ImageUpload,
Indent,
Italic,
Link,
LinkImage,
List,
MediaEmbed,
Paragraph,
PasteFromOffice,
Table,
TableToolbar,
TextTransformation
];
export default Editor;
And I used the Editor in this way:
import React, { useState, FunctionComponent } from "react";
import Editor from "ckeditor5-custom-build/build/ckeditor";
import CKEditor from "#ckeditor/ckeditor5-react";
export interface CreateNewArticleProps {}
const CreateNewArticle: FunctionComponent<CreateNewArticleProps> = () => {
const [articleFormData, setArticleFormData] = useState({
articleBody: "",
});
const editorConfiguration = { toolbar: ["bold", "italic"] };
const ckeditorDataChangeHandler = (event) => {
setArticleFormData({
...articleFormData,
articleBody: event.editor.getData(),
});
};
return (
<CKEditor
editor={Editor}
config={editorConfiguration}
data={articleFormData.articleBody}
onChange={ckeditorDataChangeHandler}
/>
);
};
export default CreateNewArticle;
The editorConfiguration constant is the simplest configuration for the CKEditor component, but none of the toolbars doesn't work.
I need all toolbar that exists in the ckeditor.js (ckeditor5/src/ckeditor.js) file.
Please consider that my main goal in using Ckeditor5 is to benefit from the ability to add a video in text.

Change handler as following:
const ckeditorDataChangeHandler = (event, editor) => {
setArticleFormData({
...articleFormData,
articleBody: editor.getData(),
});
};

import of a vue.js component

Hello i have a problem for import a component in a exercice on vue.js.
Here is the architecture of my files
I am in the CarPage.vue and i want to import CarList.vue and CarDetails.vue.
Here is the part of code with my import:
<script>
import CarList from '../components/CarList.vue'
import CarDetails from '../components/CarDetails.vue'
export default {
components: {CarList, CarDetails}
}
</script>
i have this error:
Failed to compile.
./src/components/pages/CarPage.vue?vue&type=script&lang=js& (./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/pages/CarPage.vue?vue&type=script&lang=js&)
Module not found: Error: Can't resolve '../components/CarDetails.vue' in 'C:\Users\rollivier\Desktop\Franck\dicolor\vue\medium\src\components\pages'

Your CarPage.vue is sitting in the same components file. So you need to import as such :
<script>
import CarList from '../CarList.vue'
import CarDetails from '../CarDetails.vue'
export default {
components: {CarList, CarDetails}
}
</script>

__WEBPACK_IMPORTED_MODULE_1_react_dom___default.a.createPortal is not a function

The Error:
TypeError: __WEBPACK_IMPORTED_MODULE_1_react_dom___default.a.createPortal is not a function
Modal.js:14
11 |
12 |
13 | function Modal(props) {
> 14 | return ReactDOM.createPortal(JSX_MODAL, document.querySelector("#modal"));
15 | }
16 |
17 |
The code:
import React from "react";
import ReactDOM from "react-dom";
const JSX_MODAL = (
<div className="ui dimmer modals visible active">
<div className="ui standard modal visible active">
THIS IS SOME TEXT IN THE MODAL // add some UI features here
</div>
</div>
);
function Modal(props) {
return ReactDOM.createPortal(JSX_MODAL, document.querySelector("#modal"));
}
export default Modal;
Which is called up in the render function on another component using {Modal()}.
index.html (body section only):
<body>
<div id="root"></div>
<div id="modal"></div>
</body>
Dependencies:
"react": "^16.8.6
"react-dom": "^16.0.0-alpha.13",
Background:
I am trying to use React portals to render content for a modal to it's own DOM node. I was following this tutorial, which basically presents a simplified proof of concept for what is presented in the React Docs.
What I have tried:
I could only find one instance of people experiencing a similar issue, and they were able to resolve it by installing a version of React > 16.3.0. I am running React version 16.8.6.

I had this error, though it was a simple fix. I had stated:
import ReactDOM from 'react';
instead of:
import ReactDOM from 'react-dom';
Although it doesn't answer the original poster's issue, it may answer for future developers.

I found this will work and no warnings in Chrome console:
import React from 'react'
import ReactDOM from 'react-dom/client'
import PortalReactDOM from 'react-dom'
//...
class Modal extends React.Component {
//...
render() {
return PortalReactDOM.createPortal(this.props.children, this.el);
}
}
//...
const root = ReactDOM.createRoot(appRootEl);
root.render(<Parent />);
That is, use react-dom to createPortal, and use react-dom/client to creatRoot.

In my case instead of using below:
import ReactDOM from 'react-dom/client
changed to:
import ReactDOM from 'react-dom'
and working now.

I had similar problem but analyzing the problem we just have to import ReactDom from 'react-dom' itself.
import ReactDOM from 'react-dom/client'
as
import ReactDOM from 'react-dom'
this works then

I had similar problem and I use
import PortalReactDOM from 'react-dom'
instead of
`import ReactDOM from 'react-dom'`
and code looks like
const Loader = () => {
return PortalReactDOM.createPortal(
<div className="wrapper">
<div className="loader">
<img src={loaderImage} alt="Loading..." />
</div>
</div>,
document.getElementById("loader")
)

I had similar issue, what I had was
import ReactDOM from "react";
Later, I changed it to
import ReactDOM from "react-dom";
and the issue was resolved and it worked as expected.

Import many icons from Font Awesome

I'm importing many FA icons:
import { faUsers, faCut, faBullhorn, faPenNib, faCircle, faPalette, faVolumeUp, faSmile, faGrin, faShekelSign, faTv, faUserTie, faFolder, faPaintBrush, faCircleNotch, faSignOutAlt }
from '#fortawesome/free-solid-svg-icons'
library.add(faUsers, faCut, faBullhorn, faPenNib, faCircle, faPalette, faVolumeUp, faSmile, faGrin, faShekelSign, faTv, faUserTie, faFolder, faPaintBrush, faCircleNotch, faSignOutAlt)
How can I declare that list once and then re-use it? Would it be an array? Or an object ... of what?
I was thinking
const icons = {faUsers, faCut, faBullhorn, faPenNib, faCircle, faPalette, faVolumeUp, faSmile, faGrin, faShekelSign, faTv, faUserTie, faFolder, faPaintBrush, faCircleNotch, faSignOutAlt}
import icons from '#fortawesome/free-solid-svg-icons'
But of course that doesn't work. And what would I do for library.add()?
What is that object-looking thing that follows import ?

One solution is to create a new module that exports your specific icons.
// icons.js
export {
faUsers,
faCut,
faBullhorn,
faPenNib,
faCircle,
faPalette,
faVolumeUp,
faSmile,
faGrin,
faShekelSign,
faTv,
faUserTie,
faFolder,
faPaintBrush,
faCircleNotch,
faSignOutAlt
} from '#fortawesome/free-solid-svg-icons';
Then you can simply import your new module and consume it using spread syntax.
// library.js
import {library} from '#fortawesome/fontawesome-svg-core'
import * as icons from './icons';
library.add(...Object.values(icons));

import and export are defined to be statically analyzable, so they cannot depend on runtime information. Therefore, it is not possible with import statement.
The object looking like thing after import is called named imports that are used to get selected items from the list of exported items. For instance, fontawesome has all the icons objects exported via a single file. Now you can use import { ... } to import only the items you need.

Cannot display images in ReactJS?

I have multiple images instead of importing each image in my content.js like this eg:
import myimg1 from './myimg1.png'
import myimg2 from './myimg2.png'
import myimg3 from './myimg3.png'
import myimg4 from './myimg4.png'
I have made images.js and then imported each image inside images.js and exported it so that I can access those images in content.js:
images.js:
import java from './images/java.png';
import neural from './images/neural.png';
import logo from './images/logo.png';
import dsa from './images/dsa.png';
import dl from './images/dl.jpeg';
import ds from './images/ds.jpeg';
import boy from './images/boy.jpeg';
import ml from './images/ml.jpeg';
import phone from './images/phone.png';
export default {
java,
logo,
dsa,
dl,
ds,
boy,
ml,
neural,
phone
}
In content.js:
import React, { Component } from 'react';
import images from './images';
<img src={images.java} alt="Java" height="65" width="65"></img>
<img src={images.neural} alt="Neural Network" height="65" width="65"></img>
I have made images folder which contains all images but I am not able to access the images and display it in content.js component.

See there is no class named images in your images.js, so
import images from './images'
will do nothing in content.js...So try this way
images.js
import java from './images/java.png';
import logo from './images/logo.png';
export {
java,
logo
}
content.js
import React, { Component } from 'react';
import { java, logo } from './images';
<img src={java} alt="" height="65" width="65">
<img src={logo} alt="" height="65" width="65">

the export default is just used for when there is only one import function, in your case you should do export without default
export {
java,
logo,
dsa,
dl,
ds,
boy,
ml,
neural,
phone
}
Then, in your file, you'd import all inside brackets
import { java, logo, dsa.. } from './yourFilePath'