ngx-suneditor is an Angular module for the SunEditor WYSIWYG Editor.

Supported Angular Versions: 12+

ngx-suneditor is a angular module for SunEditor implementing all features The Angular Way.

SunEditor is a pure javscript based WYSIWYG web editor, with no dependencies.

For further information please visit on Github or Web 🌎

Install the SunEditor

• npm

  npm install suneditor --save

  
  

Install the ngx-suneditor

• npm

  npm install ngx-suneditor

After installation just import the NgxSuneditorModule to the imports array of your preffered module.

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { NgxSuneditorModule } from "../../projects/ngx-suneditor/src/public-api";
import { AppComponent } from "./app.component";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, NgxSuneditorModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Import css in your styles.css or in angular.json styles array from CDN or node_modules

@import "https://cdn.jsdelivr.net/npm/suneditor@latest/dist/css/suneditor.min.css"; 

or

@import "../node_modules/suneditor/dist/css/suneditor.min";

Edit compilerOptions lib array in tsconfig.json to include APIs for the Windows Script Hosting System as SunEditor uses ActiveXObject

Add "scripthost" - tsconfig.json

{
  ...
  "compilerOptions": {
    ...
    "lib": [... "scripthost"]
  }
}  

Use the ngx-suneditor component in your HTML.

<ngx-suneditor></ngx-suneditor>

There are two ways to pass the options object. You can pass the option on the Module with forRoot() or pass it by @Input as described below.

You can pass it in your module to define a standard configuration for the imported editor. With this approch the configuration will be shared over all editor instances.

example:

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    NgxSuneditorModule.forRoot({
      plugins: plugins,
      minWidth: '100%',
      height: '70vh',
      buttonList: [
        ['undo', 'redo'],
        ['font', 'fontSize', 'formatBlock'],
        ['paragraphStyle', 'blockquote'],
        ['bold', 'underline', 'italic', 'strike', 'subscript', 'superscript'],
        ['fontColor', 'hiliteColor', 'textStyle'],
        ['removeFormat'],
        ['outdent', 'indent'],
        ['align', 'horizontalRule', 'list', 'lineHeight'],
        ['table', 'link', 'image', 'video', 'audio'],
        ['fullScreen', 'showBlocks', 'codeView'],
        ['preview', 'print'],
        ['save'],
      ],
    }),
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

If you now use multiple editor instances, the options will be shared

component 1

<ngx-suneditor></ngx-suneditor>

component 2

<ngx-suneditor></ngx-suneditor>

Pass the configuration as input to give this instance a specific configuration or override the default configuration that was passed by forRoot.

example:

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, NgxSuneditorModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
})
export class AppComponent {
  editorOptions: SunEditorOptions = {
    minWidth: "100%",
    height: "80vh",
    buttonList: [
      ["undo", "redo"],
      ["font", "fontSize", "formatBlock"],
      ["paragraphStyle", "blockquote"],
      ["bold", "underline", "italic", "strike", "subscript", "superscript"],
      ["fontColor", "hiliteColor", "textStyle"],
      ["removeFormat"],
      ["outdent", "indent"],
      ["align", "horizontalRule", "list", "lineHeight"],
      ["table", "link", "image", "video", "audio"],
      ["fullScreen", "showBlocks", "codeView"],
      ["preview", "print"],
      ["save", "template"],
    ],
  };
}

<ngx-suneditor [options]="editorOptions"></ngx-suneditor>

Combining forRoot and Input approach

example:

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    NgxSuneditorModule.forRoot({
      minWidth: "100%",
      height: "80vh",
      buttonList: [
        ["undo", "redo"],
        ["font", "fontSize", "formatBlock"],
        ["paragraphStyle", "blockquote"],
        ["bold", "underline", "italic", "strike", "subscript", "superscript"],
      ],
    }),
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

component 1

<!-- Uses the default configuration passed by forRoot -->
<ngx-suneditor></ngx-suneditor>

<!-- Override the default options -->
<ngx-suneditor [options]="editorOptions"></ngx-suneditor>

All events from SunEditor are mapped to this component and passed by @Output. Plese see the original documentation here and here

You can use all listed events as usual in angular:

<ngx-suneditor
  (onChange)="initContent"
  (onClick)="myClickHandler($event)"
></ngx-suneditor>

The NgxSunEditorComponent has multiple inputs as described below:

editorID
HTML DOM id Property. default: auto generated id

• Type: string

content
Content to show in the Editor. If this value is set the content will be set.

• Type: string

options
SunEditorOptions Object is used once when the editor is created

• Type: SunEditorOptions

onDrop_param
Parameter that is passed to the onDrop event to control the behavior. default: true

• Type: boolean

onCopy_param
Parameter that is passed to the onCopy event to control the behavior. default: true

• Type: boolean

onCut_param
Parameter that is passed to the onCut event to control the behavior. default: true

• Type: boolean

onAudioUploadError_param
Parameter that is passed to the onAudioUploadError event to control the behavior. default: true

• Type: boolean | undefined

onImageUploadBefore_param
Parameter that is passed to the onImageUploadBefore event to control the behavior. default: true

• Type: boolean | undefined

onImageUploadError_param
Parameter that is passed to the onImageUploadError event to control the behavior. default: true

• Type: boolean | undefined

onVideoUploadBefore_param
Parameter that is passed to the onVideoUploadBefore event to control the behavior. default: true

• Type: boolean | undefined

onVideoUploadError_param
Parameter that is passed to the onVideoUploadError event to control the behavior. default: true

• Type: boolean | undefined

onAudioUploadBefore_param
Parameter that is passed to the onAudioUploadBefore event to control the behavior. default: true

• Type: boolean | undefined

onResizeEditor_param
Parameter that is passed to the onResizeEditor event to control the behavior. default: {}

• Type: Object | undefined

imageUploadHandler
Callback to replace the default imageUploadHandler function

• Type: (xmlHttp: XMLHttpRequest, info: imageInputInformation, core: Core) => void

videoUploadHandler
Callback to replace the default videoUploadHandler function

• Type: (xmlHttp: XMLHttpRequest, info: videoInputInformation, core: Core) => void

audioUploadHandler
Callback to replace the default audioUploadHandler function

• Type: (xmlHttp: XMLHttpRequest, info: audioInputInformation, core: Core) => void

localStorageConfig
localStorageConfig Object {id: string, autoSave: boolean, autoLoad: boolean}

id - localStorageKey where the Content gets saved. autoSave - decides if the content should be automaticly saved in the onChange event autoLoad - decides if the content should be automaticly loaded on startUp default: {id: 'ngxSunEditor', autoSave: false, autoLoad: false}

• Type: {id: string, autoSave: boolean, autoLoad: boolean}

As described in the SunEdtior documentation there are plenty functions the editor provides.

All functions provided by the original SunEditor can be used directly on the NgxSunEditorComponent. Here you can find Additional Functions that are only available in this Angular Module.

You can get the NgxSunEditorComponent to your component by using @Viewchild or listening to the created event which also returns the instance after it has been created. It's also possible to get the raw SunEditor object that is returned by the editor internal even if it shouldn't be needed for the most usecases.

example (@Viewchild):

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
})
export class AppComponent implements AfterViewInit {
  @ViewChild(NgxSuneditorComponent) ngxSunEditor: NgxSuneditorComponent;

  // Make sure that you access it in ngAfterViewInit at the earliest
  // so you can be sure that the viewchild is set
  ngAfterViewInit() {
    // Call some method on the Viewchild instance
    const history = this.ngxSunEditor.getHistory();
    
    console.log(history); // do your logic ...
  }
}

<!-- Use the component as usual -->
<ngx-suneditor></ngx-suneditor>

example (created event):

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements AfterViewInit {
  private ngxSunEditor: NgxSuneditorComponent;

  onEditorCreated(comp: NgxSuneditorComponent) {
    // Set the editor that is passed as event payload
    this.ngxSunEditor = comp;
    // Call some method on the Viewchild instance
    const history = this.ngxSunEditor.getHistory();
    
    console.log(history); // do your logic ...
  }
}

<!-- Use the event as usual -->
<ngx-suneditor (created)="onEditorCreated($event)"></ngx-suneditor>

example (raw editor):

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
})
export class AppComponent implements AfterViewInit {
  ngAfterViewInit() {
    // Get the raw editor object instance
    const rawEditor = this.ngxSunEditor.getEditor();
    console.log(rawEditor); // do something wiht the instance
  }
}

You can use all listed functions:

setToolbarButtons
Set the toolbar buttons

• Param: buttonList - any[]
• Return: none

  const buttonList = [
      ['undo', 'redo'],
      ['font', 'fontSize', 'formatBlock'],
      ['paragraphStyle', 'blockquote'],
      ['bold', 'underline', 'italic', 'strike', 'subscript', 'superscript'],
      ['fontColor', 'hiliteColor', 'textStyle'],
      ['removeFormat'],
      ['outdent', 'indent'],
      ['align', 'horizontalRule', 'list', 'lineHeight'],
      ['table', 'link', 'image', 'video', 'audio'],
      ['fullScreen', 'showBlocks', 'codeView'],
      ['preview', 'print'],
      ['save', 'template'],
    ];
    this.ngxSunEditor.setToolbarButtons(buttonList);

setOptions
Pass a SunEditorOptions object to the editor to change the options after the editor was created

• Param: options - SunEditorOptions
• Return: none

  const options: SunEditorOptions = {
      plugins: plugins,
      minWidth: '100%',
      height: '80vh',
      buttonList: [
        ['undo', 'redo'],
      ],
  }  
  this.ngxSunEditor.setOptions(options);

setDefaultStyle
Define the style of the edit area without re render

• Param: string
• Return: none

  const styles = 'background-color: coral;' 
  this.ngxSunEditor.setDefaultStyle(styles);

noticeOpen
Opens a message in the notice panel (Alert)

• Param: string
• Return: none

   const message = 'I ! <3 any';
    this.ngxSunEditor.noticeOpen(message);

noticeClose
Closes the notice panel (Alert)

• Param: none
• Return: none

    this.ngxSunEditor.noticeClose();

save
Copying the contents of the editor to the original textarea and return the content or the full textarea. When passed true as param it only returns the content. Otherwise the original HTMLInputElement is returned

• Param: boolean
• Return: string | HTMLInputElement

    // when called with false the full textarea is returned
    const textarea = this.ngxSunEditor.save(false) as HTMLInputElement;
    console.log(textarea.value);

    // when called with true the content returned
    const content = this.ngxSunEditor.save(true);
    console.log(content);

getContext
Gets the SunEditor's context object. Contains settings, plugins, and cached element objects

• Param: none
• Return: Context

    const ctx = this.ngxSunEditor.getContext();

getContents
Gets the contents of the suneditor

• Param: boolean Return only the contents of the body without headers when the "fullPage" option is true
• Return: string

    const content = this.ngxSunEditor.getContents(true);

getText
Gets only the text of the suneditor contents

• Param: none
• Return: string

    const rawText = this.ngxSunEditor.getText();

insertImage
Upload images using image plugin

• Param: FileList
• Return: none

    this.ngxSunEditor.insertImage(files);

setContents
Change the contents of the suneditor

• Param: string
• Return: none

    this.ngxSunEditor.setContents('I ! <3 any');

appendContents
Change the contents of the suneditor

• Param: string
• Return: none

    this.ngxSunEditor.appendContents('I ! <3 any');

readOnly
Switch "ReadOnly" mode.

• Param: boolean
• Return: none

    this.ngxSunEditor.readOnly(true);

disabled
Disable the suneditor

• Param: none
• Return: none

    this.ngxSunEditor.disabled();

enabled
Enables the suneditor

• Param: none
• Return: none

    this.ngxSunEditor.enabled();

show
Show the suneditor

• Param: none
• Return: none

    this.ngxSunEditor.show();

hide
Hide the suneditor

• Param: none
• Return: none

    this.ngxSunEditor.hide();

toggleDisplayBlocks
Toggle display blocks

• Param: none
• Return: none

    this.ngxSunEditor.toggleDisplayBlocks()

toggleCodeViewMode
Toggle codeView on/off

• Param: none
• Return: none

    this.ngxSunEditor.toggleCodeViewMode()

undo
Undo changes

• Param: none
• Return: none

    this.ngxSunEditor.undo()

redo
Redo changes

• Param: none
• Return: none

    this.ngxSunEditor.redo()

removeFormat
Remove format of the currently selected range

• Param: none
• Return: none

    this.ngxSunEditor.removeFormat()

print
Prints the current contents of the editor.

• Param: none
• Return: none

    this.ngxSunEditor.print()

toggleFullScreenMode
Toggle the editor fullscreen mode

• Param: none
• Return: none

    this.ngxSunEditor.toggleFullScreenMode()

showBlocks
Display blocks in the editor

• Param: none
• Return: none

    this.ngxSunEditor.showBlocks()

insertHTML
Inserts an HTML element or HTML string or plain string at the current cursor position

• Param: string | Element, boolean | undefiend, boolean | undefined, boolean | undefined
• Return: none

    this.ngxSunEditor.insertHTML('<p> I ! <3 any </p>');

getCharCount
Get the editor's number of characters or binary data size. You can use the "charCounterType" option format.

• Param: string | undefined
• Return: number

    const charCount = this.ngxSunEditor.getCharCount()

preview
Open a new tab as preview window.

• Param: none
• Return: none

    this.ngxSunEditor.preview()

getHistory
Get the actual history Stack

• Param: none
• Return: any[]

    const history = this.ngxSunEditor.getHistory()

selectAll
Select all in the editor

• Param: none
• Return: none

    this.ngxSunEditor.selectAll()

getSelection
Get window selection obejct

• Param: none
• Return: Selection

    const selectionObj = this.ngxSunEditor.getSelection()

showLoading
Set the editor in loading mode. Show a loading spinner, disable inputs and grey out

• Param: none
• Return: none

    this.ngxSunEditor.showLoading()

closeLoading
Remove the loading mode

• Param: none
• Return: none

    this.ngxSunEditor.closeLoading()

submenuOn
Enabled submenu

• Param: Element
• Return: none

    this.ngxSunEditor.submenuOn(ele);

submenuOff
Disable submenu

• Param: none
• Return: none

    this.ngxSunEditor.submenuOff()

containerOn
Enable container

• Param: Element
• Return: none

    this.ngxSunEditor.containerOn(ele);

containerOff
Disable container

• Param: none
• Return: none

    this.ngxSunEditor.containerOff()

addClass
Append the className value of the argument value element

• Param: Element, string
• Return: none

    this.ngxSunEditor.addClass(ele, 'custom-class');

removeClass
Delete the className value of the argument value element

• Param: Element, string
• Return: none

    this.ngxSunEditor.removeClass(ele, 'custom-class');

setStyle
Set style, if all styles are deleted, the style properties are deleted

• Param: Element, string, string | number
• Return: none

    this.ngxSunEditor.setStyle(ele, 'marginLeft', 50);

addDocEvent
Add an event to document. When created as an Iframe, the same event is added to the document in the Iframe.

• Param: string, EventListener, boolean
• Return: none

    this.ngxSunEditor.addDocEvent('click', listener, false);

removeDocEvent
Remove events from document. * When created as an Iframe, the event of the document inside the Iframe is also removed.

• Param: string, EventListener
• Return: none

    this.ngxSunEditor.removeDocEvent('click', listener);

actionCall
Run plugin calls and basic commands.

• Param: string, 'dialog' | 'command' | 'submenu' | 'container', Element
• Return: none

    this.ngxSunEditor.actionCall('custom command', 'command', ele);

indent_outdent
Set indentation separator "indent" or "outdent"

• Param: 'indent' | 'outdent'
• Return: none

    this.ngxSunEditor.indent_outdent('indent');

getImagesInfo
Gets uploaded images informations

• Param: none
• Return: fileInfo[]

    const img_info = this.ngxSunEditor.getImagesInfo()

getFilesInfo
Gets uploaded files(plugin using fileManager) information list.

• Param: string
• Return: fileInfo[]

    const filesInfo = this.ngxSunEditor.getFilesInfo('video');

commandHandler
Execute command of command button(All Buttons except submenu and dialog) (undo, redo, bold, underline, italic, strikethrough, subscript, superscript, removeFormat, indent, outdent, fullscreen, showBlocks, codeview, preview, print, copy, cut, paste)

• Param: Element | null, commands
• Return: none

    this.ngxSunEditor.commandHandler(ele, 'strikethrough');

There are some functions that are only available on this Angular module as they are not part of the original SunEditor. This functions are our implementation! We provide this while having in mind the most convenient usage without conflicting the original behavior.

Everyone is welcome to report a feature request by opening a new issue: Feature request to help us improve this module 🚀

These are the functions we provide:

getEditorID
Returns the HTML id Attribute that is randomly generated on startup on every editor instance.

• Param: none
• Return: string

  const id = this.ngxSunEditor.getEditorID();

getEditor
Returns the raw editor instance.

• Param: none
• Return: SunEditor

  const rawEditor = this.ngxSunEditor.getEditor();

loadLocalStorageContent
loads the localStorageContent to the Editor

• Param: none
• Return: none

  this.ngxSunEditor.loadLocalStorageContent();

saveToLocalStorage
Save Content to LocalStorage

• Param: none
• Return: none

  this.ngxSunEditor.saveToLocalStorage();

getLocalStorageKey
Returns the LocalStorageKey

• Param: none
• Return: none

  const lsKey = this.ngxSunEditor.getLocalStorageKey();

getIsAutoSaveToLocalStorage
Returns the current state of AutoSaveToLocalStorage

• Param: none
• Return: none

  const autoSaveLs = this.ngxSunEditor.getIsAutoSaveToLocalStorage();

getIsAutoLoadToLocalStorage
Returns the current state of AutoLoadToLocalStorage

• Param: none
• Return: none

  const autoLoadLs = this.ngxSunEditor.getIsAutoLoadToLocalStorage();

isReadOnly
Returns the readonly state of the SunEditor

• Param: none
• Return: boolean

    const readonly = this.ngxSunEditor.isReadOnly()
    if (readonly) {
      // do something while editor is readonly
    };

isHidden
Returns the hidden state of the editor

• Param: none
• Return: boolean

    const hidden = this.ngxSunEditor.isHidden()
    if (hidden) {
      // do something while editor is hidden
    };

isDisplayBlocks
Returns the displayBlocks state of the editor

• Param: none
• Return: boolean

    const isDisplayBlocks = this.ngxSunEditor.isDisplayBlocks()
    if (isDisplayBlocks) {
      // do something while editor is isDisplayBlocks
    };

isDisabled
Returns the disabled state of the SunEditor

• Param: none
• Return: boolean

    const disabled = this.ngxSunEditor.isDisabled()
    if (disabled) {
      // do something while editor is disabled
    };

isCodeViewMode
Returns the CodeViewMode state of the editor

• Param: none
• Return: boolean

    const isCodeViewMode = this.ngxSunEditor.isCodeViewMode()
    if (isCodeViewMode) {
      // do something while editor is isCodeViewMode
    };

isFullScreenMode
Returns the fullScreenMode state of the editor

• Param: none
• Return: boolean

    const isFullScreenMode = this.ngxSunEditor.isFullScreenMode()
    if (isFullScreenMode) {
      // do something when editor is isFullScreenMode
    }

isLoading
Returns the loading state of the SunEditor

• Param: none
• Return: boolean

    const loading = this.ngxSunEditor.isLoading()
    if (loading) {
      // do something while editor is loading
    };

How to use plugins is shown in the documentation. Just import the plugins to your module or component as pass it through the options like described in Configuration section.

example:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgxSuneditorModule } from '../../projects/ngx-suneditor/src/public-api';
import { AppComponent } from './app.component';
import plugins from 'suneditor/src/plugins'; // Import all offical available plugins

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    NgxSuneditorModule.forRoot({
      plugins: plugins, // pass the imported plugins
      minWidth: '100%',
      height: '80vh',
      buttonList: [
        ['undo', 'redo'],
        ['font', 'fontSize', 'formatBlock'],
        ['paragraphStyle', 'blockquote'],
        ['bold', 'underline', 'italic', 'strike', 'subscript', 'superscript'],
        ['fontColor', 'hiliteColor', 'textStyle'],
        ['removeFormat'],
        ['outdent', 'indent'],
        ['align', 'horizontalRule', 'list', 'lineHeight'],
        ['table', 'link', 'image', 'video', 'audio'],
        ['fullScreen', 'showBlocks', 'codeView'],
        ['preview', 'print'],
        ['save', 'template'],
      ],
    }),
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Please visit CustomPlugins if you wan't to create your own plugin.

You can override the default callback functions for upload handlers to include your logic on uploads.

• imageUploadHandler - Callback to replace the default imageUploadHandler function
• videoUploadHandler - Callback to replace the default videoUploadHandler function
• audioUploadHandler - Callback to replace the default audioUploadHandler function

To overrite the default callback pass your function as @Input to the NgxSunEditorComponent

  ngAfterViewInit() {
    
    this.ngxSunEditor.audioUploadHandler = (xmlHttp: XMLHttpRequest, info: audioInputInformation, core: Core) => {
      // do something here ...
      return;
    };

  }

Please see the original Documentation for further information.

In addition to the editor, there is also a view component ngx-sunview to display the content. This component can bypass angular's DomSanitizer using a SafeHtmlPipe.

The component has two @Input properties.

• content - HTML content generated by the editor to display

• bypassSantiziser - Bypass angular's DomSanitizer

remember to import the suneditor-contents.css before using it!

example:

<ngx-sunview [bypassSantiziser]="true" [content]="initContent"></ngx-sunview>

Special Thanks to JiHong88 - The creator of SunEditor.

Contributions are welcome ❤️ - please read CONTRIBUTING.md

ngx-suneditor may be freely distributed under the MIT license.