CK Editor implementation guide

Posted on August 24, 2023 by Upendra

Backend (C# Web API)

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

Controller

Update :

          
            #region Name
            [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
        

Get :

            #region Name
            [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:

Update :

 
            #region Name
            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
        

Get:

            #region Name
            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)

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

Type Script code:

            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.loginDet = JSON.parse(localStorage.getItem("LoginDetails"));
            this.http.get('../assets/WebService.json').subscribe((data: any) => {
            this.HomeURL = data.Webservice;
            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) {
            }
            }