Unanswered

A PCF component that encapsulates an npm JavaScript control like ckeditor?

(0) Share

Report

Posted on by Community Power Pla... Microsoft Employee

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-)

Categories:

Power Apps Pro Dev & ISV

I have the same question (0)

All responses (7)

Answers (0)

Sort by

Diana Birkelbach 3,072 Most Valuable Professional on at

Like (0)

Report
Copy link

Link copied!

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?

Was this reply helpful? Yes No
Community Power Pla... Microsoft Employee on at

Like (0)

Report
Copy link

Link copied!
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.

Was this reply helpful? Yes No
Diana Birkelbach 3,072 Most Valuable Professional on at

Like (0)

Report
Copy link

Link copied!

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!

Was this reply helpful? Yes No
Community Power Pla... Microsoft Employee on at

Like (0)

Report
Copy link

Link copied!

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.

Was this reply helpful? Yes No
Diana Birkelbach 3,072 Most Valuable Professional on at

Like (0)

Report
Copy link

Link copied!
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

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!

Was this reply helpful? Yes No
Community Power Pla... Microsoft Employee on at

Like (0)

Report
Copy link

Link copied!

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:
CKEDITOR.plugins.addExternal('timestamp', '/plugins/timestamp/', 'plugin.js');
But I'm not sure what the path should be. Whatever I put in there I get an error like:
Error: [CKEDITOR.resourceManager.load] Resource name "timestamp" was not found at "/plugins/timestamp/plugin.js?t=LAHF"
Somehow I need to get the timestamp folder included in bundle.js. I'm thinking maybe I need to add another "import" or possibly "require".

I assume it's trying to load the file via URL, e.g.: http://127.0.0.1:8181/plugins/timestamp/plugin.js, but I don't know for sure. Can the PowerApps Component handle loading content from bundle.js using a URL?

Was this reply helpful? Yes No
Diana Birkelbach 3,072 Most Valuable Professional on at

Like (0)

Report
Copy link

Link copied!

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!

Was this reply helpful? Yes No