react-ckeditor5-component - npm Package Compare versions

Comparing version 1.0.2 to 1.0.3

dist/index.js

@@ -114,3 +114,5 @@ "use strict";
 
-        editor.model.document.on('change', onChange);
+        editor.model.document.on('change', function (e) {
+          onChange(editor.getData());
+        });
         _this3.setState({ instance: editor });
@@ -117,0 +119,0 @@ }).catch(function (error) {

package.json

 {
   "name": "react-ckeditor5-component",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "react-ckeditor5-component",
@@ -26,2 +26,3 @@ "main": "dist/index.js",
   "devDependencies": {
+    "babel-cli": "^6.26.0",
     "babel-core": "^6.26.3",
@@ -28,0 +29,0 @@ "babel-loader": "^7.1.4",

README.md

@@ -0,1 +1,7 @@
+## As of 18-06-27
+
+I thought I added the onChange property but I was passing some weird value. But it's fixed now! You can check the editor content by assinging onChange of your own. It passes the content value as a param, see the example for the usage.
+
+By the way, frankly i have never been a ckeditor user since a few weeks ago, so I'm wondering what kinds of event handlers are preferred or needed. Inform me on github then I will add the requested(Don't need to be just events) as soon as possible.
+
 ## Install
@@ -5,2 +11,5 @@
 
+npm install react-ckeditor5-component
+
+in document: import CKEDITOR5 from 'react-ckeditor5-component';
 ## Feature
@@ -18,18 +27,45 @@ Based on the lastest version of CKEditor5, providing ONLY standard edition currently.
 import { render} from 'react-dom';
-import CKEDITOR5 from '../../src';
+import CKEDITOR5 from 'react-ckeditor5-component';
 const App = () => (
-  <div style={{border:'1px solid black'}}>
-    <CKEDITOR5
-      type="inline"
-      height="500px"
-      />
+class App extends React.Component {
+  constructor(props){
+    super(props);
+    this.state = {
+      content: '',
+    }
 
-    <p style={{borderTop: '1px solid black'}}>
-      border has been given to show there is a div component right below the editor.<br></br>
-    type is inline, and height has been given '500px'
-    </p>
-  </div>
+    this.onChange = this.onChange.bind(this);
+  }
 
-);
+  onChange( content ) {
+    console.log( content );
+    this.setState({
+      content: content,
+    })
+  }
+
+  render(){
+    return (
+      <div style={{border:'1px solid black'}}>
+        <CKEDITOR5
+          type="inline"
+          height="500px"
+          onChange = {this.onChange}
+          />
+
+        <p style={{borderTop: '1px solid black'}}>
+          <div>this is where data is displayed </div>
+          {this.state.content}
+        </p>
+
+        <p style={{borderTop: '1px solid black'}}>
+          border has been given to show there is a div component right below the editor.<br></br>
+        type is inline, and height has been given '500px'
+        </p>
+      </div>
+    );
+  }
+};
 render(<App />, document.getElementById("root"));
+
 ```
@@ -36,0 +72,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

10563

increased by13.85%

Lines of code

140

increased by1.45%

Number of lines in readme file

108

increased by50%

Worsened metrics

Dev dependency count

13

increased by8.33%

No dependency changes