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 multiple images on React

I'm trying to build a react app and I have to use multiple images
,now do i have to import every images i'll use like:
import image from '/img/img1.png';
<img src={img} />
or is there another way to it???,
PS: I've tried "require" and it gave an error also :
<img src={windows.location.origin +'/img/img1.png'}/>
gives no output

Since you are using webpack, have a look at require.context . You should be able to import all png files in '/img' to images variable. Then you can use image by images["img(n).png"].
function importAll(r) {
let images = {};
r.keys().map((item, index) => { images[item.replace('./', '')] = r(item); });
return images;
}
const images = importAll(require.context('/img', false, '/\.jpg/'));
<img src={images["img1.png"]} />
In another way, you can use a file dedicated to these imports :
images.js :
import img1 from "/img/img1.jpg"
import img2 from "/img/img2.jpg"
import img3 from "/img/img3.jpg"
.
.
.
import img(n) from "/img/img(n).jpg"
export default [
img1,
img2,
...
];
Then import this array in one line in other files :
import imgs from './images';
P.S. please refer my accepted answer on similar question.

If you're using ES6+, you can use iteral. Something like below.
const imageNames = ['img1.jpg', 'img2.jpg', 'img3.jpg']
render() {
...
imageNames.map(image => <img src={`/img/${image}`}></img>)
...
}

instead of using array [] as mentioned #koko-js478 export js like this:
icons.js:
import animals_for_sale from '../Assets/icons/animals_for_sale.svg';
import baby_toys from '../Assets/icons/baby_toys.svg';
import cars_and_vehicles from '../Assets/icons/cars_and_vehicles.svg';
import contact_us from '../Assets/icons/contact_us.svg';
import devices from '../Assets/icons/devices.svg';
import electronic_appliances from '../Assets/icons/electronic_appliances.svg';
import fashion from '../Assets/icons/fashion.svg';
import home_and_garden from '../Assets/icons/home_and_garden.svg';
import homepage_icon from '../Assets/icons/homepage_icon.svg';
import login from '../Assets/icons/login.svg';
import my_account from '../Assets/icons/my_account.svg';
import privacy_policy from '../Assets/icons/privacy_policy.svg';
import real_estate_for_rent from '../Assets/icons/real_estate_for_rent.svg';
import real_estate from '../Assets/icons/real_estate.svg';
import services from '../Assets/icons/services.svg';
import use_app from '../Assets/icons/use_app.svg';
export default {
'animals_for_sale':animals_for_sale,
'baby_toys':baby_toys,
'cars_and_vehicles':cars_and_vehicles,
'contact_us':contact_us,
'devices':devices,
'electronic_appliances':electronic_appliances,
'fashion':fashion,
'home_and_garden':home_and_garden,
'homepage_icon':homepage_icon,
'login':login,
'my_account':my_account,
'privacy_policy':privacy_policy,
'real_estate_for_rent':real_estate_for_rent,
'real_estate':real_estate,
'services' :services,
'use_app':use_app
};
and then import a hole json like this:
import icons from './icons';
after that you can use every single icon like this:
<li><a className='dropdown-item'><img src={icons.cars_and_vehicles} className="img-section"/>Voitures et véhicules »</a>

maybe this can help you
function importAll(r) {
let images = {};
r.keys().forEach((item, index) => { images[item.replace('./', '')] = r(item); });
return images
}
const images = importAll(require.context('../assets', false, /\.(png|jpe?g|svg)$/));
know more from here

How to Import dozens of svg file in vue/nuxt

I am currently importing alot of svg files using the normal import statement like the following.
index.vue
<script>
import danalock from "~/assets/img/smarthome/list-icon_danalock.svg"
import smartlock from "~/assets/img/smarthome/list-icon_smart-lock.svg"
import light from "~/assets/img/smarthome/list-icon_light.svg"
import clicker from "~/assets/img/smarthome/list-icon_clicker.svg"
import battery100 from "~/assets/img/smarthome/icon-battery-100.svg"
import environmental from "~/assets/img/smarthome/list-icon_environmental.svg"
import batter25charge from "~/assets/img/smarthome/icon-battery-25_charge.svg"
import doorWindow from "~/assets/img/smarthome/list-icon_door-window.svg"
import battery50 from "~/assets/img/smarthome/icon-battery-50.svg"
import motion from "~/assets/img/smarthome/list-icon_motion.svg"
import battery75 from "~/assets/img/smarthome/icon-battery-75.svg"
import airConditioner from "~/assets/img/smarthome/list-icon_air-cononditioner.svg"
import tv from "~/assets/img/smarthome/list-icon_tv.svg"
import fan from "~/assets/img/smarthome/list-icon_fan.svg"
import airCleaner from "~/assets/img/smarthome/list-icon_air-cleaner.svg"
import mediaPlayer from "~/assets/img/smarthome/list-icon_media-player.svg"
import speaker from "~/assets/img/smarthome/list-icon_speaker.svg"
import remoteController from "~/assets/img/smarthome/list-icon_remote-controller.svg"
export default {
components: {
danalock,
smartlock,
light,
clicker,
battery100,
environmental,
batter25charge,
...
},
I already searching for some workarounds like making a folder in components like components/images/ and made an image.js and put all the import statement there like the following
components/images/images.js
import danalock from "~/assets/img/smarthome/list-icon_danalock.svg"
import smartlock from "~/assets/img/smarthome/list-icon_smart-lock.svg"
import light from "~/assets/img/smarthome/list-icon_light.svg"
import clicker from "~/assets/img/smarthome/list-icon_clicker.svg"
import battery100 from "~/assets/img/smarthome/icon-battery-100.svg"
import environmental from "~/assets/img/smarthome/list-icon_environmental.svg"
import batter25charge from "~/assets/img/smarthome/icon-battery-25_charge.svg"
import doorWindow from "~/assets/img/smarthome/list-icon_door-window.svg"
import battery50 from "~/assets/img/smarthome/icon-battery-50.svg"
import motion from "~/assets/img/smarthome/list-icon_motion.svg"
import battery75 from "~/assets/img/smarthome/icon-battery-75.svg"
import airConditioner from "~/assets/img/smarthome/list-icon_air-cononditioner.svg"
import tv from "~/assets/img/smarthome/list-icon_tv.svg"
import fan from "~/assets/img/smarthome/list-icon_fan.svg"
import airCleaner from "~/assets/img/smarthome/list-icon_air-cleaner.svg"
import mediaPlayer from "~/assets/img/smarthome/list-icon_media-player.svg"
import speaker from "~/assets/img/smarthome/list-icon_speaker.svg"
import remoteController from "~/assets/img/smarthome/list-icon_remote-controller.svg"
export default {
danalock,
smartlock,
light,
clicker,
...
}
and tried accessing it in my vue file like the follow but can't find good results
index.vue
<script>
import { danalock, smartlock } from "~/components/images/images.js"
export default {
components: {
danalock,
smartlock,
...
}
the template of my index.vue
<template>
<smartlock />
</template>
throws the following error
Unknown custom element: <smartlock> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

how to evaluate the source of an image from properties of a react component which I have give it as a prop?

I'm not able to use the component's prop for giving the src of an image which I imported from the path in my component's JavaScript file. I have already broken the props using syntax.
I have tried many formats:
src={`${src}`}
src =src
src={src}
src={{src}}
src={`${src}`}
No compiling error
This is my code>
import React from 'react';
import './Card.css';
import 'tachyons';
import aryan from "./images/aryan.jpg";
import azeem from "./images/azeem.jpg";
import simran from "./images/simran.jpg";
import vidushi from "./images/vidushi.jpg";
import shubham from "./images/shubham.jpg";
import bobby from "./images/bobby.jpg";
const Card=({id,name,source,username,email}) =>{
return (
<div className='pa3 br3 dib bg-light-green ma2 grow bw2 shadow-5'>
<img src= {source}
alt="Test"/>
<div className='tc f3'>
<h4>{`${name}`}</h4>
<h5>{`${username}`}</h5>
<p className='f5'>{`${email}`}</p>
</div>
</div>
)
}
export default Card;

for your reference:
<img src="/assets/img/background.png"/>
<img src={"/assets/img/background.png"}/>

Import images from another file in React

I am using create-react-app to build a simple web page:
index.js:
import lostImage from './assets/img/illustrations/lost.svg';
function Image(props) {
return (
<img src={lostImage} />
);
}
It works as expected, however I plan to import dozens of images, so I decided to move the import calls in a separate file in the same directory:
images.js:
import lostImage from './assets/img/illustrations/lost.svg';
index.js:
import './images.js';
function Image(props) {
return (
<img src={lostImage} />
);
}
However I get the lostImage not defined error. How do I properly do this?

You need to export them from images.js file. Then import them to the index.js file to use.
images.js:
import lostImage from './assets/img/illustrations/lost.svg';
export { lostImage };
index.js:
import {lostImage} from './images.js';
function Image(props) {
return (
<img src={lostImage} />
);
}