@idea-ionic/editor

IDEA Ionic extra ≫ Editor

HTML Editor.

Package on NPM.

To install

npm i --save @idea-ionic/editor

Be sure to install all the requested peer dependencies.

Then, add this imports into the global.scss file, after the import on the top of the page:

@use '@idea-ionic/editor/css/global.scss' as idea-ionic-editor;

To make sure the translations are loaded into the project:

• add a reference to this module in the environment variable idea.ionicExtraModules (see environment.ts);
• copy the i18n/editor folder (you can filter the languages you need) of the module in the project's assets/i18n folder.

List of available SCSS variables for customisation

:root {
  --idea-html-editor-background-color: var(--ion-color-light);
  --idea-html-editor-border-color: var(--ion-color-light-shade);
  --idea-html-editor-color: var(--ion-color-light-contrast);
  --idea-html-editor-toolbar-background-color: var(--ion-color-light);
  --idea-html-editor-toolbar-color: var(--ion-color-light-contrast);
  --idea-html-editor-toolbar-border-color: var(--ion-color-light);
  --idea-html-editor-button-background-color: var(--ion-color-light);
  --idea-html-editor-button-border-color: var(--ion-color-light);
  --idea-html-editor-button-color: var(--ion-color-light-contrast);
  --idea-html-editor-button-focused: var(--ion-color-medium);
  --idea-html-editor-button-selected: var(--ion-color-medium-tint);

  --idea-html-editor-view-margin: 0;
  --idea-html-editor-view-padding: 20px;
  --idea-html-editor-view-background-color: var(--ion-color-white);
  --idea-html-editor-view-color: var(--ion-color-white-contrast);
  --idea-html-editor-view-box-shadow: none;
  --idea-html-editor-view-border-width: 1px;
  --idea-html-editor-view-border-color: var(--ion-border-color);
  --idea-html-editor-view-border-radius: 0;
}