Carmelo carmelodevuz

RTL

In file '/angular/demo{#}/src/assets/sass/style.angular.scss' comment the next rows [8, 9]:

  // @import "./core/vendors/plugins/prismjs";
  // @import "./core/vendors/plugins/formvalidation";

Copy and paste rtl.config.js file.
Add packages to the package.json file (copy them from the package.json) below and re-install packages with yarn command.
Run the command: yarn run webpack --config webpack-rtl.config.js
In the file src/index.tsx file comment rows [18, 19]: // import './_metronic/assets/sass/plugins.scss' // import './_metronic/assets/sass/style.scss'
In the file src/index.tsx add the row: import './_metronic/assets/css/style.rtl.css' (! before style.react.scss).
In the file public/index.html update the html tag with: <html direction="rtl" dir="rtl" style="direction: rtl">
Find and replace next attributes in the project: data-kt-menu-placement='bottom-start' => data-kt-menu-placement='bottom-end'

Run the command: yarn add ckeditor4-angular.
import CKEditorModule to your application.
Add variable editorData and method onChange into code behind (See example in your.component.ts file).
Add ckeditor into your HTML markup (See example in your.component.html file).

Basic skeleton preparation:

Remove unnecessary modules in the folder src/app/modules. (!!!Except auth, i18n and errors folders).
Comment unnecessary routes in the src/app/pages/routing.ts file. [9-45] rows.
Clear Dashboard src/app/pages/dashboard.component.html file.
Clear Dashboard module src/app/pages/dashboard.module.ts file (!remove WidgetsModule from the code, rows [5, 17].
Remove Widgets src/_metronic/partials/content/widgets folder and the file src/app/_metronic/partials/index.ts file comment row [3].
Clear Aside menu in the file src/app/_metronic/layout/components/aside/aside-menu/aside-menu.component.html. Keep only Dashboard menu item. (For demo1 also need to clear src/app/_metronic/layout/components/sidebar/sidebar-menu/sidebar-menu.component.html file)
Clear Header menu in the file src/app/_metronic/layout/components/header/header-menu/header-menu.component.html. Keep only dashboard menu item.
In case if you don't need Aut

	{
	"name": "demo3",
	"version": "8.0.38",
	"private": true,
	"homepage": "/metronic8/react/demo3",
	"dependencies": {
	"@formatjs/intl-pluralrules": "^4.0.28",
	"@formatjs/intl-relativetimeformat": "^9.1.7",
	"@fortawesome/fontawesome-free": "^5.15.3",
	"@popperjs/core": "~2.10.1",

	// ! CKEditor doesn't have a port to the Typescript version, cause of that we use @ts-ignore a lot here:

	// @ts-ignore
	import {CKEditor} from '@ckeditor/ckeditor5-react'
	// @ts-ignore
	import ClassicEditor from '@ckeditor/ckeditor5-build-classic'

	const CKExampleComponent = () => {
	return (<CKEditor
	editor={ClassicEditor}