You’re offline. This is a read only version of the page.
Hi,
I want to create a custom PCF control that "wraps" or "encapsulates" the ckeditor control that's available at https://www.npmjs.com/package/ckeditor4 I need an approach that will work with other controls. I've looked at https://github.com/rexkenley/pcf-react which uses React, but that's currently beyond my skill level. Basically, I want to do this in a PCF component:
<div id="editor"> <p>This is the editor content.</p> </div> <script src="./node_modules/ckeditor4/ckeditor.js"></script> <script> CKEDITOR.replace( 'editor' ); </script>
I appreciate any help. If you can help me get this working I'll buy you a Starbucks card. 8-)
Hi @Anonymous ,
From what I understand, the onBeforeLoad handler needs to have the plugin loaded beforehand. I suppose CKeditor.plugins.add("timestamp") is only telling the editor to use it. Not to load the code.
I have the same feeling as you, the plugin.js needs to be inside the bundle.js. The while bundle.js for your PCF is loaded together with your PCF.
Unfortunately it's not a PCF issue, but a CKEditor, und for the moment I don't get the time to try it out.
But in order to have javascript libraries inside your PCF I would consider two ways to check:
- maybe it's possible to configure your ckeditor4-react node module, and tell it what plugins you need. Then I suppose this will be automatically bundled for you inside the bundle.js.
- maybe you can declare the node_modules/ckeditor-react/timestamp/plugin.js inside your manifest
Hope this helps!
Thanks for your continued help.
The problem is they copied the code from ckeditor/plugins/timestamp/plugin.js directly into the onBeforeLoad method. I need to leave the plugin.js file where it is and have it included in the bundle.js file. The correct technique seems to be to do this:
Hi @Anonymous ,
From the stackoverflow I understand:
1. you must copy the timestamp plugin under your node_models folder:
node_modules/ckeditor4-react/plugins/timestamp/
2. you only need to import the ckeditor
Share
Report
All responses (
Answers (
import CKEditor from "ckeditor4-react";3. You define the config and onBeforeLoad to your CKEditor component
<CKEditor
...
config={{
toolbar: [["Bold"], ["Timestamp"]],
extraPlugins: "timestamp",
}}
onBeforeLoad={(CKEDITOR) => {
CKEDITOR.plugins.add("timestamp", {
///....
}}
/>I suppose after installing the timestamp plugin in your node_modules, the "timestamp/plugin.js" is added by WebPack in your bundle.js, you at runtime you'll have the code available.
Hope this helps!
This is awesome! One question: the solution was to take all the code from the ckeditor/plugins/timestamp/plugin.js file and add it under onBeforeLoad. How can this be done without copying in the code from plugin.js? I assume we can import it (or possibly use 'require'), but then what do we put under onBeforeLoad? Thanks.
Hi @Anonymous ,
I think I've found an example for you on how to use the ckeditor plugins in a react project: https://stackoverflow.com/questions/65339020/how-to-add-custom-plugin-in-ckeditor4-react.
It's exactly an example on timestamp plugin.
Hope it helps!
Unfortunately, I haven't found a solution. I'm using ckeditor4-react. My component's render method looks like this:
render() {
return (
// <input id='inputText' value={this.state.value} onChange={this.handleChange} />
<div className="App">
<h2>Using CKEditor 4 in React</h2>
<CKEditor
onBeforeLoad={CKEDITOR => {
CKEDITOR.plugins.addExternal(
'timestamp',
'/ckeditor/plugins/timestamp/',
'plugin.js'
);
CKEDITOR.editorConfig = function( config ) {
config.extraPlugins = 'timestamp';
};
/*
CKEDITOR.config.extraPlugins = 'timestamp';
*/
}}Basically I'm loading the editor via the CDN, which works, but now I'm trying to load a custom plug-in (timestamp) locally and it's not working. Part of the issue I think is I don't fully understand what "import" does vs. "require". It doesn't look like my plug-in is showing up in the bundle.js file.
Hi @Anonymous ,
I saw you've created also another thread about including a js in a PCF. If that didn't worked, (maybe because ckeditor is special , and needs to include a script at runtime), maybe you can include an IFrame in your PCF and include there what you need?
#1
WarrenBelz
69
Most Valuable Professional
#2
mmbr1606
51
Super User 2025 Season 1
#3
MS.Ragavendar
36
