Gagri Global | Enterprise AI & IT Solutions

A complete guide on implementing CKEditor 5 with an Angular frontend and a C# Web API backend, including database interactions through Business Logic (BL) methods and model classes.

Backend (C# Web API)

There's a Web API controller in C# for updating and getting the content. Business logic (BL) methods handle the database interactions, and Model classes are defined to match the structure of the data.

Controller Methods

#region Update
[System.Web.Http.HttpPost]
public dynamic class()
{
    try
    {
        var Message = System.Web.HttpContext.Current.Request.Form["filed_name"];
        var data = BL.business_logic_name(Message);
        return data;
    }
    catch (Exception ex)
    {
        exp.ExceptionHandler(ex);
        BL.saveExceptions((ex.Message + ex.StackTrace).ToString(), "1", "Webapi");
        throw ex;
    }
}
#endregion

#region Get
[HttpGet]
public dynamic Name()
{
    try
    {
        var data = BL.Business_logic_name();
        return data;
    }
    catch (Exception ex)
    {
        exp.ExceptionHandler(ex);
        BL.saveExceptions((ex.Message + ex.StackTrace).ToString(), "1", "Webapi");
        throw ex;
    }
}
#endregion

Business Logic (BL)

#region Update
public dynamic Name(string Param1)
{
    try
    {
        string MSG = "";
        ds = db.GetDataWithSingleParam(SPS.Sp_name.ToString(), Param1);
        bool CheckDb = db.CheckDatainDS(ds, 0);
        if (CheckDb == true)
        {
            MSG = db.GetMessage(ds);
        }
        return MSG;
    }
    catch (Exception ex)
    {
        exp.ExceptionHandler(ex);
        throw ex;
    }
}
#endregion

#region Get
public dynamic Name()
{
    try
    {
        var MSG = "";
        List data = new List();
        ds = db.GetData(SPS.Sp_name.ToString());
        var CheckDb = db.CheckDatainDS(ds, 0);
        if (CheckDb == true)
        {
            data = ds.Tables[0].AsEnumerable().Select(
                A => new Model_Class_Name()
                {
                    field_name = A.Field("field_name") + 0,
                    field_name = A.Field("field_name") + "",
                }).ToList();
            return data;
        }
        return MSG;
    }
    catch (Exception ex)
    {
        exp.ExceptionHandler(ex);
        saveExceptions((ex.Message + ex.StackTrace).ToString(), "1", "Webapi");
        return " ";
    }
}
#endregion

Model Class

public class Name
{
    public Int32? Field_name { get; set; }
    public string Field_name { get; set; }
}

Stored Procedures

Please mention which Sp’s write for this task that Sp’s mentioned in stored procedures file.

Frontend (Angular)

The Angular component SettingsComponent handles the user interface. CKEditor is integrated to provide a rich text editing experience, while HTTP requests are used to communicate with the Web API.

TypeScript Implementation

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { GeneralService } from '../../../general.service';
import { FormGroup, FormControl, AbstractControl, FormBuilder, Validators } from '@angular/forms';
import { HttpClient } from '@angular/common/http';
import { Router, ActivatedRoute } from '@angular/router';

declare var $: any;

@Component({
  selector: 'app-settings',
  templateUrl: './settings.component.html',
  styleUrls: ['./settings.component.scss']
})
export class SettingsComponent implements OnInit {
  public ckeditorContent: any;
  public config: any;
  HomeURL: any;
  Field_name: any;
  Message: any;
  gridview: number;
  form: FormGroup;
  arr1: any[];

  constructor(public generalService: GeneralService, public fb: FormBuilder, public http: HttpClient, public router: Router) {
    this.http.get('../assets/WebService.json').subscribe((data: any) => {
      this.HomeURL = data.Webservice;
      this.ckeditorContent = 'Hey we are testing CKEditor';
      this.config = {
        uiColor: '#F0F3F4',
        height: '350',
        extraPlugins: 'divarea'
      };
    });
  }

  ngOnInit(): void {
    this.GetTerms();
  }

  terms() {
    this.gridview = 1;
  }

  updateContent() {
    if (this.gridview === 1) {
      this.TextBoxChanged1();
    }
  }

  TextBoxChanged1() {
    let arr = [];
    arr.push({});
    const formData = new FormData();
    this.Variable = encodeURIComponent(this.Field_name);
    formData.append("Field_name", this.Variable);
    var url = "api_url";
    
    this.generalService.PostData(url, formData).then((data: any) => {
      this.generalService.ShowAlert('SUCCESS', 'Terms and Conditions Updated successfully', 'success');
    });
  }

  GetTerms() {
    var url = 'api_url';
    this.generalService.GetData(url).then((data: any) => {
      this.variable = data[0].Field_name;
      this.Field_name = decodeURIComponent(this.Variable);
    }, err => {
      this.generalService.ShowAlert('ERROR', 'Something went wrong. Please try again later.', 'error');
    });
  }

  onChange(event: any) {
    setTimeout(() => {
      this.ckeditorContent = event;
    });
  }

  onReady(event: any) {
    event.editor.focus();
  }

  onFocus(event: any) {
    console.log("editor is focused");
  }

  onBlur(event: any) {}
}