Angular Drag And Drop Html Editor

6 min read Jun 28, 2024

Angular Drag and Drop HTML Editor

This article will guide you through creating an Angular drag-and-drop HTML editor, empowering users to effortlessly build web pages by simply dragging and dropping components.

Prerequisites

Before diving in, ensure you have the following:

Node.js and npm: Installed on your system.
Angular CLI: Globally installed. Use npm install -g @angular/cli to install it.

Project Setup

Create a new Angular project:

ng new drag-and-drop-editor
cd drag-and-drop-editor

Install necessary packages:
```
npm install ngx-extended-dropzone ngx-quill --save
```
- ngx-extended-dropzone: Provides drag-and-drop functionality for file uploads.
- ngx-quill: Enables a rich text editor with drag-and-drop capabilities.

Component Creation

Create a new component for the editor:
```
ng generate component html-editor
```

Open html-editor.component.ts:

import { Component, OnInit } from '@angular/core';
import { QuillModule } from 'ngx-quill';

@Component({
  selector: 'app-html-editor',
  templateUrl: './html-editor.component.html',
  styleUrls: ['./html-editor.component.css'],
  imports: [QuillModule.forRoot()], // Import QuillModule in the component
})
export class HtmlEditorComponent implements OnInit {
  editorModules = {
    toolbar: [
      ['bold', 'italic', 'underline', 'strike'],
      ['blockquote', 'code-block'],
      [{ list: 'ordered' }, { list: 'bullet' }],
      [{ header: [1, 2, 3, 4, 5, 6] }],
      [{ script: 'sub' }, { script: 'super' }],
      [{ indent: '-1' }, { indent: '+1' }],
      ['direction', 'link', 'image'],
    ],
  };

  constructor() {}

  ngOnInit(): void {}
}

HTML Template

Open html-editor.component.html:
```
  



  Components
  
    {{ component.name }}
  



  Drop components here
```
- The quill-editor component renders the rich text editor.
- The component-palette displays available components for dragging.
- The drop-zone is the area where components can be dropped.

Component Logic

Implement drag-and-drop logic:

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { QuillModule } from 'ngx-quill';

@Component({
  selector: 'app-html-editor',
  templateUrl: './html-editor.component.html',
  styleUrls: ['./html-editor.component.css'],
  imports: [QuillModule.forRoot()],
})
export class HtmlEditorComponent implements OnInit {
  @ViewChild('editor', { static: true }) editorRef: ElementRef;

  editorModules = {
    toolbar: [
      ['bold', 'italic', 'underline', 'strike'],
      ['blockquote', 'code-block'],
      [{ list: 'ordered' }, { list: 'bullet' }],
      [{ header: [1, 2, 3, 4, 5, 6] }],
      [{ script: 'sub' }, { script: 'super' }],
      [{ indent: '-1' }, { indent: '+1' }],
      ['direction', 'link', 'image'],
    ],
  };

  components = [
    { name: 'Heading', tag: 'h1' },
    { name: 'Paragraph', tag: 'p' },
    { name: 'Image', tag: 'img' },
    // Add more components as needed
  ];

  htmlContent = '';

  constructor() {}

  ngOnInit(): void {}

  onDragStart(event: DragEvent, component: any) {
    event.dataTransfer.setData('text/plain', JSON.stringify(component));
  }

  onDragOver(event: DragEvent) {
    event.preventDefault();
  }

  onDrop(event: DragEvent) {
    event.preventDefault();

    const componentData = JSON.parse(event.dataTransfer.getData('text/plain'));
    const quill = this.editorRef.nativeElement.quill;

    const range = quill.getSelection();
    const insertHtml = `<${componentData.tag}>Insert Content Here`;

    quill.insertText(range.index, insertHtml, 'silent');
    quill.setSelection(range.index + insertHtml.length);
  }
}

CSS Styling

Create html-editor.component.css:

.editor-container {
  width: 60%;
  height: 400px;
  margin: 20px auto;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.component-palette {
  width: 20%;
  height: 400px;
  margin: 20px auto;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
}

.component-item {
  padding: 10px;
  margin: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
  cursor: pointer;
  background-color: #f5f5f5;
}

.drop-zone {
  width: 60%;
  height: 50px;
  margin: 20px auto;
  border: 1px dashed #ccc;
  border-radius: 5px;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
}

Running the Application

Start the Angular development server:
```
ng serve
```
Access the application in your browser: Open http://localhost:4200/ in your browser.

Now you have a functional Angular drag-and-drop HTML editor, allowing users to drag components from the palette and drop them into the editor, making it easier to create web pages without extensive HTML knowledge.

Angular Drag And Drop Html Editor