How to add npm ckeditor4 in stenciljs? - ckeditor4.x

Question

I have installed npm i ckeditor4 to my stencil project and I have used it like this. But Im not getting the ckeditor, tell me where to add the script tag I am completely new to stencil
ui-editor.tsx
import { Component, h } from '#stencil/core';
#Component({
tag: 'ui-editor',
styleUrl: 'style.scss',
shadow: true
})
export class UiEditor {
render() {
return (
<div id="editor">
<p>This is the editor content.</p>
</div>
)
}
}
As said in the documentation https://www.npmjs.com/package/ckeditor4 where should I add the scripts
<script src="./node_modules/ckeditor4/ckeditor.js"></script>
<script>
CKEDITOR.replace( 'editor' );
</script>

Answer 1

Try removing the script tag from your index.html file. The following component will automatically add the script tag from unpkg.
Example on webcomponents.dev
import { h, Component, State, Host } from "#stencil/core";
#Component({
tag: "ck-editor"
})
export class CkEditor {
_textarea: HTMLTextAreaElement;
componentWillLoad() {
return this.appendScript();
}
componentDidLoad() {
//#ts-ignore
let editor = CKEDITOR.replace(this._textarea, {
width: "99%",
height: "300px",
});
}
private async submit() {
// #ts-ignore
console.log(
CKEDITOR.instances[
this._textarea.nextSibling.id.replace("cke_", "")
].getData()
);
}
appendScript() {
return new Promise((resolve) => {
if (document.getElementById("ckeditor-script")) {
resolve();
return;
}
const ckeditorScript = document.createElement("script");
ckeditorScript.id = "ckeditor-script";
ckeditorScript.src = "https://unpkg.com/ckeditor4#4.14.1/ckeditor.js";
ckeditorScript.onload = () => resolve();
document.body.appendChild(ckeditorScript);
});
}
render() {
return (
<Host>
<textarea ref={(el) => (this._textarea = el)}></textarea>
<button onClick={() => this.submit()}>Submit</button>
</Host>
);
}
}
You should be able to import ckeditor but I haven't tested to see how that handles in rollup. The project I was recently working on was already loading ckeditor from unpkg so we went that direction instead.