Ckeditor5 custom library: Using it in an Angular library

21 Views Asked by At

I am creating a ckeditor 5 library (rich-text-lib) that has ClassicEditor + extra plugins like Font & some custom plugins.

Something like this:

rich-text-lib:
In package.json, I have "name": "@xxx/rich-text-lib"

ckeditor.js:

import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic';
:
import { Font } from '@ckeditor/ckeditor5-font';
:
import CustomPlugin from './plugins/CustomPlugin/CustomPlugin';
:

class CustomCkEditor extends ClassicEditor {
public static override builtinPlugins = [
:
Font,
:
CustomPlugin,
:
];
public static override defaultConfig = {
toolbar: {
:
:
},
};
}

export default CustomCkEditor;

I build the library (npm run-script build), and pack it (npm pack) which gives me xxx-rich-text-lib-1.0.0.tgz. This is installed in an angular library core-lib (npm i --save lib\xxx-rich-text-lib-1.0.0.tgz), where the ckeditor is used in a component (rich-text/components/rich-text-editor).

I want to use this angular library in another angular library/app (say ui-app). How can I achieve this without installing the rich-text-lib in ui-app?

Please note: Currently, I get this error when I try to build ui-app

node_modules/@xxx/core-lib/rich-text/components/rich-text-editor/rich-text-editor.component.d.ts:4:24 - error TS2307: Cannot find module '@xxx/rich-text-lib' or its corresponding type declarations.

This is for import CustomCkEditor from '@xxx/rich-text-lib';

It works if I run npm i --save lib\rich-text-lib-1.0.0.tgz inside ui-app

0

There are 0 best solutions below