Smart.Editor - configuration and usage

Getting Started with Angular Editor Component

Setup Angular Environment

Angular provides the easiest way to set angular CLI projects using Angular CLI tool.

Install the CLI application globally to your machine.

npm install -g @angular/cli

Create a new Application

ng new smart-angular-editor

Navigate to the created project folder

cd smart-angular-editor

Setup the Editor

Smart UI for Angular is distributed as smart-webcomponents-angular NPM package

1. Download and install the package.
   

   npm install smart-webcomponents-angular

2. Adding CSS reference
   
   The following CSS file is available in ../node_modules/smart-webcomponents-angular/ package folder. This can be referenced in [src/styles.css] using following code.
   
   

   @import 'smart-webcomponents-angular/source/styles/smart.default.css';

   
   Another way to achieve the same is to edit the angular.json file and in the styles add the style.
   
   

   "styles": [
   		"node_modules/smart-webcomponents-angular/source/styles/smart.default.css"
   	]

   If you want to use Bootstrap, Fluent or other themes available in the package, you need to add them after 'smart.default.css'.
3. Example with Angular Standalone Components
   
   
   app.component.html
   
   

    <smart-editor #editor id="editor" [toolbarItems]="toolbarItems">
       <div>
            <h2>What is Lorem Ipsum?</h2>
           <p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting
               industry. Lorem Ipsum has been the industry's standard dummy text ever
               since the 1500s, when an unknown printer took a galley of type and scrambled
               it to make a type specimen book. It has survived not only five centuries,
               but also the leap into electronic typesetting, remaining essentially unchanged.
               It was popularised in the 1960s with the release of Letraset sheets containing
               Lorem Ipsum passages, and more recently with desktop publishing software
               like Aldus PageMaker including versions of Lorem Ipsum. <a href="www.htmlelements.com"
               title="Smart Elements">Smart Elements</a>
           </p>
           <table class="wd-Table">
               <thead>
                   <tr>
                       <th>First Name</th>
                       <th>Last Name</th>
                       <th>Email</th>
                       <th>Actions</th>
                   </tr>
               </thead>
               <tbody>
                   <tr>
                       <td>Jane</td>
                       <td>Doe</td>
                       <td>sample@example.org</td>
                       <td><a href="#">View</a> - <a href="#">Edit</a> - <a href="#">Delete</a>
                       </td>
                   </tr>
                   <tr>
                       <td>Jane</td>
                       <td>Doe</td>
                       <td>sample@example.org</td>
                       <td><a href="#">View</a> - <a href="#">Edit</a> - <a href="#">Delete</a>
                       </td>
                   </tr>
                   <tr>
                       <td>Jane</td>
                       <td>Doe</td>
                       <td>sample@example.org</td>
                       <td><a href="#">View</a> - <a href="#">Edit</a> - <a href="#">Delete</a>
                       </td>
                   </tr>
               </tbody>
           </table>
       </div>
       <div>
            <h2>Why do we use it?</h2>
           <p>It is a long established fact that a reader will be distracted by the
               readable content of a page when looking at its layout. The point of using
               Lorem Ipsum is that it has a more-or-less normal distribution of letters,
               as opposed to using 'Content here, content here', making it look like readable
               English. Many desktop publishing packages and web page editors now use
               Lorem Ipsum as their default model text, and a search for 'lorem ipsum'
               will uncover many web sites still in their infancy. Various versions have
               evolved over the years, sometimes by accident, sometimes on purpose (injected
               humour and the like).</p>
           <p>
               <img src="./../../../src/images/Album.png" width="100px" height="100px"/>
           </p>
       </div>
       <br>
       <div>
            <h2>Where does it come from?</h2>
           <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It
               has roots in a piece of classical Latin literature from 45 BC, making it
               over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney
               College in Virginia, looked up one of the more obscure Latin words, consectetur,
               from a Lorem Ipsum passage, and going through the cites of the word in
               classical literature, discovered the undoubtable source. Lorem Ipsum comes
               from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The
               Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a
               treatise on the theory of ethics, very popular during the Renaissance.
               The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from
               a line in section 1.10.32.</p>
           <p>The standard chunk of Lorem Ipsum used since the 1500s is reproduced below
               for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum
               et Malorum" by Cicero are also reproduced in their exact original form,
               accompanied by English versions from the 1914 translation by H. Rackham.</p>
       </div>
       <div>
            <h2>Where can I get some?</h2>
           <p>There are many variations of passages of Lorem Ipsum available, but the
               majority have suffered alteration in some form, by injected humour, or
               randomised words which don't look even slightly believable. If you are
               going to use a passage of Lorem Ipsum, you need to be sure there isn't
               anything embarrassing hidden in the middle of text. All the Lorem Ipsum
               generators on the Internet tend to repeat predefined chunks as necessary,
               making this the first true generator on the Internet. It uses a dictionary
               of over 200 Latin words, combined with a handful of model sentence structures,
               to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum
               is therefore always free from repetition, injected humour, or non-characteristic
               words etc.</p>
       </div>
   </smart-editor>

   
   app.component.ts
   
   

    import { Component, ViewChild, OnInit, AfterViewInit, ViewEncapsulation } from '@angular/core';
   import { EditorComponent } from 'smart-webcomponents-angular/editor';
   
   import { CommonModule } from '@angular/common';
   import { RouterOutlet } from '@angular/router';
   import { EditorModule } from 'smart-webcomponents-angular/editor';
   
   @Component({
       selector: 'app-root',
   	standalone: true,
   	imports: [CommonModule, EditorModule, RouterOutlet],
       templateUrl: './app.component.html',
       styleUrls: ['./app.component.css'],
       encapsulation: ViewEncapsulation.None
   })
   
   export class AppComponent implements AfterViewInit, OnInit {
       @ViewChild('editor', { read: EditorComponent, static: false }) editor!: EditorComponent;
   
       toolbarItems: any = ['Bold', 'Italic', 'Underline', 'StrikeThrough',
           'FontName', 'FontSize', 'FontColor', 'BackgroundColor',
           'LowerCase', 'UpperCase', '|',
           'Formats', 'Alignment', 'OrderedList', 'UnorderedList',
           'Outdent', 'Indent', '|',
           'hyperlink', 'table', 'Image', '|', 'ClearFormat', 'Print',
           'SourceCode', 'splitmode', 'FullScreen', '|', 'Undo', 'Redo', 'subscript', 'superscript', 'delete'];
   
       ngOnInit(): void {
           // onInit code.
       }
   
       ngAfterViewInit(): void {
           // afterViewInit code.
           this.init();
       }
   
       init(): void {
           // init code.
           this.editor.expandToolbar();
       };
   }

   
   
4. Example with Angular NGModule
   
   
   app.component.html
   
   

    <smart-editor #editor id="editor" [toolbarItems]="toolbarItems">
       <div>
            <h2>What is Lorem Ipsum?</h2>
           <p><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting
               industry. Lorem Ipsum has been the industry's standard dummy text ever
               since the 1500s, when an unknown printer took a galley of type and scrambled
               it to make a type specimen book. It has survived not only five centuries,
               but also the leap into electronic typesetting, remaining essentially unchanged.
               It was popularised in the 1960s with the release of Letraset sheets containing
               Lorem Ipsum passages, and more recently with desktop publishing software
               like Aldus PageMaker including versions of Lorem Ipsum. <a href="www.htmlelements.com"
               title="Smart Elements">Smart Elements</a>
           </p>
           <table class="wd-Table">
               <thead>
                   <tr>
                       <th>First Name</th>
                       <th>Last Name</th>
                       <th>Email</th>
                       <th>Actions</th>
                   </tr>
               </thead>
               <tbody>
                   <tr>
                       <td>Jane</td>
                       <td>Doe</td>
                       <td>sample@example.org</td>
                       <td><a href="#">View</a> - <a href="#">Edit</a> - <a href="#">Delete</a>
                       </td>
                   </tr>
                   <tr>
                       <td>Jane</td>
                       <td>Doe</td>
                       <td>sample@example.org</td>
                       <td><a href="#">View</a> - <a href="#">Edit</a> - <a href="#">Delete</a>
                       </td>
                   </tr>
                   <tr>
                       <td>Jane</td>
                       <td>Doe</td>
                       <td>sample@example.org</td>
                       <td><a href="#">View</a> - <a href="#">Edit</a> - <a href="#">Delete</a>
                       </td>
                   </tr>
               </tbody>
           </table>
       </div>
       <div>
            <h2>Why do we use it?</h2>
           <p>It is a long established fact that a reader will be distracted by the
               readable content of a page when looking at its layout. The point of using
               Lorem Ipsum is that it has a more-or-less normal distribution of letters,
               as opposed to using 'Content here, content here', making it look like readable
               English. Many desktop publishing packages and web page editors now use
               Lorem Ipsum as their default model text, and a search for 'lorem ipsum'
               will uncover many web sites still in their infancy. Various versions have
               evolved over the years, sometimes by accident, sometimes on purpose (injected
               humour and the like).</p>
           <p>
               <img src="./../../../src/images/Album.png" width="100px" height="100px"/>
           </p>
       </div>
       <br>
       <div>
            <h2>Where does it come from?</h2>
           <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It
               has roots in a piece of classical Latin literature from 45 BC, making it
               over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney
               College in Virginia, looked up one of the more obscure Latin words, consectetur,
               from a Lorem Ipsum passage, and going through the cites of the word in
               classical literature, discovered the undoubtable source. Lorem Ipsum comes
               from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The
               Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a
               treatise on the theory of ethics, very popular during the Renaissance.
               The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from
               a line in section 1.10.32.</p>
           <p>The standard chunk of Lorem Ipsum used since the 1500s is reproduced below
               for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum
               et Malorum" by Cicero are also reproduced in their exact original form,
               accompanied by English versions from the 1914 translation by H. Rackham.</p>
       </div>
       <div>
            <h2>Where can I get some?</h2>
           <p>There are many variations of passages of Lorem Ipsum available, but the
               majority have suffered alteration in some form, by injected humour, or
               randomised words which don't look even slightly believable. If you are
               going to use a passage of Lorem Ipsum, you need to be sure there isn't
               anything embarrassing hidden in the middle of text. All the Lorem Ipsum
               generators on the Internet tend to repeat predefined chunks as necessary,
               making this the first true generator on the Internet. It uses a dictionary
               of over 200 Latin words, combined with a handful of model sentence structures,
               to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum
               is therefore always free from repetition, injected humour, or non-characteristic
               words etc.</p>
       </div>
   </smart-editor>

   
   app.component.ts
   
   

    import { Component, ViewChild, OnInit, AfterViewInit, ViewEncapsulation } from '@angular/core';
   import { EditorComponent } from 'smart-webcomponents-angular/editor';
   
   @Component({
       selector: 'app-root',
       templateUrl: './app.component.html',
       styleUrls: ['./app.component.css'],
       encapsulation: ViewEncapsulation.None
   })
   
   export class AppComponent implements AfterViewInit, OnInit {
       @ViewChild('editor', { read: EditorComponent, static: false }) editor!: EditorComponent;
   
       toolbarItems: any = ['Bold', 'Italic', 'Underline', 'StrikeThrough',
           'FontName', 'FontSize', 'FontColor', 'BackgroundColor',
           'LowerCase', 'UpperCase', '|',
           'Formats', 'Alignment', 'OrderedList', 'UnorderedList',
           'Outdent', 'Indent', '|',
           'hyperlink', 'table', 'Image', '|', 'ClearFormat', 'Print',
           'SourceCode', 'splitmode', 'FullScreen', '|', 'Undo', 'Redo', 'subscript', 'superscript', 'delete'];
   
       ngOnInit(): void {
           // onInit code.
       }
   
       ngAfterViewInit(): void {
           // afterViewInit code.
           this.init();
       }
   
       init(): void {
           // init code.
           this.editor.expandToolbar();
       };
   }

   
   app.module.ts
   
   

    import { NgModule } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   
   import { EditorModule } from 'smart-webcomponents-angular/editor';
   
   import { AppComponent } from './app.component';
   
   @NgModule({
       declarations: [ AppComponent ],
       imports: [ BrowserModule, EditorModule ],
       bootstrap: [ AppComponent ]
   })
   
   export class AppModule { }

   
   

Running the Angular application

After completing the steps required to render a Editor, run the following command to display the output in your web browser

ng serve

Read more about using Smart UI for Angular: https://www.htmlelements.com/docs/angular-cli/.