score:15
you should add the content of the zip file to the root of your project like this:
├── ckeditor5
│ ├── build
│ ├── sample
│ ├── src
│ ├── ...
│ ├── package.json
│ └── webpack.config.js
├── node_modules
├── public
├── src
├── ...
└── package.json
then run this command yarn add file:./ckeditor5
or npm add file:./ckeditor5
.
now you can use your custom editor in this way:
import react, { component } from 'react';
import editor from 'ckeditor5-custom-build/build/ckeditor';
import { ckeditor } from '@ckeditor/ckeditor5-react'
const editorconfiguration = {
toolbar: [ 'bold', 'italic' ]
};
class app extends component {
render() {
return (
<div classname="app">
<h2>using ckeditor 5 from online builder in react</h2>
<ckeditor
editor={ editor }
config={ editorconfiguration }
data="<p>hello from ckeditor 5!</p>"
onready={ editor => {
// you can store the "editor" and use when it is needed.
console.log( 'editor is ready to use!', editor );
} }
onchange={ ( event, editor ) => {
const data = editor.getdata();
console.log( { event, editor, data } );
} }
onblur={ ( event, editor ) => {
console.log( 'blur.', editor );
} }
onfocus={ ( event, editor ) => {
console.log( 'focus.', editor );
} }
/>
</div>
);
}
}
export default app;
score:-1
add eslint disabled at the top, like this
/* eslint-disabled */
your code of ckeditor.js inside build/ckeditor.js
/* eslint-enabled */
score:1
there are two scenarios where you need to change your custom build time to time. in that case, either you can keep on publishing on npm after running
npm run build
on your custom build or you can keep that in your github and install using
npm install git+git@github.com:<your username>/<custom ckeditor>.git
you can rename the name so that whenever you install it goes into
node_modules/@ckeditor/ckeditor5-custom-build
{
"name": "@ckeditor/ckeditor5-custom-build",
....
}
now you need to import like this
import { editor } from '@ckeditor/ckeditor5-custom-build';
and thus all your code would look like this
import react from 'react';
import { ckeditor } from '@ckeditor/ckeditor5-react';
import { editor } from '@ckeditor/ckeditor5-custom-build';
export const ckeditor = () => {
return (
<div classname="app">
<h2>using ckeditor 5 build in react</h2>
<ckeditor
data="<p>hello from ckeditor 5!</p>"
onready={ editor => {
// you can store the "editor" and use when it is needed.
console.log( 'editor is ready to use!', editor );
} }
onchange={ ( event, editor ) => {
const data = editor.getdata();
console.log( {"data": data } );
} }
onblur={ ( event, editor ) => {
console.log( 'blur.', editor );
} }
onfocus={ ( event, editor ) => {
console.log( 'focus.', editor );
} }
/>
</div>
);
}
Source: stackoverflow.com
Related Query
- REACTJS - Import CKEditor 5 from online build
- Import ReactJS component from another file?
- moving from twig to ReactJS: how to extend a template/component to build full reactJS pages? implement react-router and redux into symfony?
- Javascript code gets "Attempted import error:" in react-scripts build when importing from Typescript file
- import firebase from "firebase" module not working in reactjs even the module is already installed
- How to import 2,3 object from another file in reactJS
- ReactJS - Can't Import Component from Another File
- How to remove path from import filenames in react for NPM build
- import module.fucntion working but import { function } from '../../module' not working in ReactJS
- Conditional styling import gets bundle together after build in reactjs
- Reactjs import from another repo
- Import components(.tsx) from outside src ReactJs
- How to import function from another file into reactjs component?
- ImportError: cannot import name 'OrderDetailView' from 'core.api.views' in Django and ReactJs
- reactJs import ckeditor config correctly - CORS
- Reactjs how to import constant array from another JavaScript file
- backgroundImage path for css from public folder not working after build in reactjs
- Import from nested components ReactJS
- Getting broken image icon when displaying image from online url in ReactJS
- import css file from node modules using css module in reactjs
- ReactJS Import react from 'react' issue
- Attempted import error: 'Switch' is not exported from 'react-router-dom'
- Attempted import error: 'useHistory' is not exported from 'react-router-dom'
- Dynamically import images from a directory using webpack
- How to make a rest post call from ReactJS code?
- import * as React from 'react'; vs import React from 'react';
- How do you import a javascript package from a cdn/script tag in React?
- Import JavaScript file and call functions using webpack, ES6, ReactJS
- How to access the "key" property from a reactjs component
- ReactJS can't set state from an event with event.persist()
More Query from same tag
- static file image path in gatsby
- Resize SVG component to fit parent
- Why is it saving a state variable looks like one render behind whenever I update a state?
- How to fix import/no-named-as-default ESlint rule when you want to change the name of a default import?
- Setting state array in react
- Reload ReactJS page in development returns me blank
- How to change img src onmouseover in ReactJs
- onClick in reactjs not showing items
- VictoryPie Custom Colors
- React hooks event listener re-added on each render (exhaustive-deps error)
- Animating element onClick with GatsbyJS
- React Hooks change single value of object with multiple keys without repetition
- label and input not on the same margin in react
- props.names.map is not a function
- Please change the parent <Route path="/"> to <Route path="*">
- Stuck at "Cannot read property 'props' of undefined"
- React-intl use json tree format
- Run npm build with specific .env file
- Element besides another
- Error when using React three fiber and trying to use TextGeomerty
- Cannot save an object in the state with its keys in react
- Clear Search value on focus out of a Multiselect - multiselect-react-dropdown (React JS)
- Next.js getServerSideProps use /api locally, in PR preview, and in production
- CSS class selector styles not being applied in React Project
- TypeScript Error (TS2345) argument of type Person | undefined is not assignable to paramater of type Person
- Slider API of Material is not render the slider properly in case of fraction number as step, marks | material ui | Slider | React
- Updating array on child 2, from child 1
- ReactJS properties validation
- cancel all subscriptions and asynchronous tasks
- Error: React Hook "useDocumentOnce" is called conditionally. React Hooks must be called in the exact same order in every component render