How to integrate wordcount plugin with ckeditor4-react?

[kul1010]

Hi, Kindly let me know, How to integrate wordcount plugin with ckeditor4-react? `import CKEditor from 'ckeditor4-react'; <CKEditor data={content && content} onBeforeLoad={ CKEDITOR => { // If namespace was already loaded, this callback will be never called! // There will be only one attempt to add external plugin. // console.log("PPPPPP", CKEDITOR.plugins); CKEDITOR.plugins.addExternal( 'wordcount', '/node_modules/ckeditor-wordcount-plugin/wordcount/', 'plugin.js' ); } } onChange={onChange} config={{ ...ckEditorConfig }} id= "description" name= "description"

  />`

[w8tcha]

Sorry but i dont know how that works, but according to the documentation you would need something like this....

<CKEditor initData="This is a CKEditor 4 WYSIWYG editor instance created by ️⚛️ React." config={{ extraPlugins: 'wordcount' />

[w8tcha]

i tested the code and it works with react...

function App() {
    return (
        <div>
            <section>
                <CKEditor
                    debug={true}
                     onBeforeLoad={ CKEDITOR => {
            CKEDITOR.plugins.addExternal( 'wordcount', '/node_modules/ckeditor-wordcount-plugin/wordcount/', 'plugin.js' );
        }
    }
                    config={{
                    toolbar: [
                        [ 'Source' ],
                        [ 'Styles', 'Format', 'Font', 'FontSize' ],
                        [ 'Bold', 'Italic' ],
                        [ 'Undo', 'Redo' ],
                        [ 'EasyImageUpload' ],
                        [ 'About' ]
                    ],
                    extraPlugins: 'wordcount'
                }}
                    initData="<p>Hello <strong>world</strong>!</p>"
                />
            </section>
            <footer>{`Running React v${ React.version }`}</footer>
        </div>
    );
}

export default App;

[kul1010]

Thanks @w8tcha . still i am getting below error. Line 29:14: 'e' is assigned a value but never used no-unused-vars printWarnings @ webpackHotDevClient.js:138 handleWarnings @ webpackHotDevClient.js:143 push../node_modules/react-dev-utils/webpackHotDevClient.js.connection.onmessage @ webpackHotDevClient.js:210 plugin.js?t=L4K9:1 Uncaught SyntaxError: Unexpected token '<' ckeditor.js:253 Uncaught TypeError: Cannot read property 'icons' of null at window.CKEDITOR.window.CKEDITOR.dom.CKEDITOR.resourceManager. (ckeditor.js:253) at window.CKEDITOR.window.CKEDITOR.dom.CKEDITOR.resourceManager. (ckeditor.js:253) at n (ckeditor.js:248) at Array.r (ckeditor.js:248)

[w8tcha]

Sorry but then I can't help you

[kul1010]

Okay. No problem. But i think error in your plugin. Have you integrated wordcount plugin with React and ckeditor4-react component? Please try.

[w8tcha]

Yes i tried it with the above code i posted it worked without problem

[kul1010]

Then Kindly share me git repo.

[w8tcha]

I uploaded the react sample to ..

https://github.com/w8tcha/CKEditor-WordCount-Plugin/tree/master/wordcount/samples/ckeditor4-react/basic

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.