codeslayer1 / React Ckeditor
Licence: mit
CKEditor component for React with plugin and custom event listeners support
Stars: ✭ 124
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Ckeditor
Reactopt
A CLI React performance optimization tool that identifies potential unnecessary re-rendering
Stars: ✭ 1,975 (+1492.74%)
Mutual labels: npm, npm-package, npm-module, react-component
Ngx Smart Modal
Modal/Dialog component crafted for Angular
Stars: ✭ 256 (+106.45%)
Mutual labels: npm, npm-package, npm-module
Packagephobia
⚖️ Find the cost of adding a new dependency to your project
Stars: ✭ 1,110 (+795.16%)
Mutual labels: npm, npm-package, npm-module
Webcam Easy
javascript access webcam stream and take photo
Stars: ✭ 79 (-36.29%)
Mutual labels: npm, npm-package, npm-module
Ts ci
✅ Continuous integration setup for TypeScript projects via GitHub Actions.
Stars: ✭ 225 (+81.45%)
Mutual labels: npm, npm-package, npm-module
Awesome Node Utils
some useful npm packages for nodejs itself
Stars: ✭ 51 (-58.87%)
Mutual labels: npm, npm-package, npm-module
Homebridge Wol
A Wake on Lan plugin for Homebridge
Stars: ✭ 150 (+20.97%)
Mutual labels: npm, npm-package, npm-module
Cpx
A cli tool to watch and copy file globs.
Stars: ✭ 394 (+217.74%)
Mutual labels: npm, npm-package, npm-module
Npm Run All
A CLI tool to run multiple npm-scripts in parallel or sequential.
Stars: ✭ 4,496 (+3525.81%)
Mutual labels: npm, npm-package, npm-module
Tplink Cloud Api
A node.js npm module to remotely control TP-Link smartplugs (HS100, HS110) and smartbulbs (LB100, LB110, LB120, LB130) using their cloud web service (no need to be on the same wifi/lan)
Stars: ✭ 96 (-22.58%)
Mutual labels: npm, npm-package, npm-module
Jsonexport
{} → 📄 it's easy to convert JSON to CSV
Stars: ✭ 208 (+67.74%)
Mutual labels: npm, npm-package, npm-module
Darkmode.js
🌓 Add a dark-mode / night-mode to your website in a few seconds
Stars: ✭ 2,339 (+1786.29%)
Mutual labels: npm, npm-package, npm-module
Singlespotify
🎵 Create Spotify playlists based on one artist through the command line
Stars: ✭ 254 (+104.84%)
Mutual labels: npm, npm-package, npm-module
Eslint Plugin Node
Additional ESLint's rules for Node.js
Stars: ✭ 740 (+496.77%)
Mutual labels: npm, npm-package, npm-module
Eslint Plugin Vue
Official ESLint plugin for Vue.js
Stars: ✭ 3,592 (+2796.77%)
Mutual labels: npm, npm-package, npm-module
React Pro Sidebar
Customizable and responsive react sidebar library with dropdown menus and unlimited number of nested submenus
Stars: ✭ 359 (+189.52%)
Mutual labels: npm, npm-package, react-component
Rando.js
The world's easiest, most powerful random function.
Stars: ✭ 659 (+431.45%)
Mutual labels: npm, npm-package, npm-module
Event Target Shim
An implementation of WHATWG EventTarget interface, plus few extensions.
Stars: ✭ 89 (-28.23%)
Mutual labels: npm, npm-package, npm-module
Incompose
A inferno utility belt for function components and higher-order components
Stars: ✭ 76 (-38.71%)
Mutual labels: npm, npm-package
react-ckeditor-component
React component for CKEditor
Installation
Usage
import CKEditor from "react-ckeditor-component";
class Example extends Component {
constructor(props) {
super(props);
this.updateContent = this.updateContent.bind(this);
this.state = {
content: 'content',
}
}
updateContent(newContent) {
this.setState({
content: newContent
})
}
onChange(evt){
console.log("onChange fired with event info: ", evt);
var newContent = evt.editor.getData();
this.setState({
content: newContent
})
}
onBlur(evt){
console.log("onBlur event called with event info: ", evt);
}
afterPaste(evt){
console.log("afterPaste event called with event info: ", evt);
}
render() {
return (
<CKEditor
activeClass="p10"
content={this.state.content}
events={{
"blur": this.onBlur,
"afterPaste": this.afterPaste,
"change": this.onChange
}}
/>
)
}
}
The package also includes an in-built example under the /example
folder. Run the sample application by cloning project and running npm start.
Props
name | type | default | mandatory | description |
---|---|---|---|---|
content | any | No | Default value to be set in CKEditor | |
onChange (Deprecated) | function | No | Deprecated in v1.0.6. Is now handled via events prop. | |
config | object | No | Configs to be passed in CKEditor | |
isScriptLoaded | boolean | false | No | Pass true if ckeditor script is already loaded in project |
scriptUrl | string | Standard CKEditor | No | The CKEditor script that needs to be loaded. Pass a custom script with plugins if you need a customized CKEditor. |
activeClass | string | No | Any Css class to be used with CKEditor container div. | |
events (New) | object | No | An object of custom event handlers so that you can listen to any CKEditor event (Added in v1.0.6) |
Note- Starting v1.0.6, you can listen to change
event directly by passing its event handler in events
prop instead of passing a separate onChange prop. The onChange prop is now deprecated.
License
react-ckeditor-component
is released under the MIT license
.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].