switchon@lavalamp.biz
+27(0) 83 419 4851 / +27(0) 21 036 1165
Application & software development
Get A Quote

    • Home
    • Services
      • Application & software development
      • Outsourced software development
      • Project based resourcing
      • Digital marketing & consulting
      • Graphic design & consulting
      • UI / UX design & consulting
      • Recruitment services
      • Lease an expert
    • About
      • How we work
      • NBConsult Group
      • Partners
      • Lightbox Digital
    • Blog
    • Join us
    • Contact

    • Home
    • Services
      • Application & software development
      • Outsourced software development
      • Project based resourcing
      • Digital marketing & consulting
      • Graphic design & consulting
      • UI / UX design & consulting
      • Recruitment services
      • Lease an expert
    • About
      • How we work
      • NBConsult Group
      • Partners
      • Lightbox Digital
    • Blog
    • Join us
    • Contact

    • Home
    • Services
      • Application & software development
      • Outsourced software development
      • Project based resourcing
      • Digital marketing & consulting
      • Graphic design & consulting
      • UI / UX design & consulting
      • Recruitment services
      • Lease an expert
    • About
      • How we work
      • NBConsult Group
      • Partners
      • Lightbox Digital
    • Blog
    • Join us
    • Contact

    • Home
    • Services
      • Application & software development
      • Outsourced software development
      • Project based resourcing
      • Digital marketing & consulting
      • Graphic design & consulting
      • UI / UX design & consulting
      • Recruitment services
      • Lease an expert
    • About
      • How we work
      • NBConsult Group
      • Partners
      • Lightbox Digital
    • Blog
    • Join us
    • Contact
    system environment variables on windows
    System Environment Variables On Windows
    Sep 18, 2019
    how to deploy a backend api to azure
    How To Deploy A Backend API To Azure
    Oct 7, 2019

    How To Use CKEditor 5 In Angular With Server Side Rendering Support

    Categories
    • Software Development
    • Web Design
    • Web Development
    Tags
    • angular
    • cdn
    • ckeditor
    • javascript
    • stackoverflow
    • Wordpress
    how to use ckeditor 5 in angular with server side rendering support
    how to use ckeditor 5 in angular with server side rendering support

    What is CKEditor and why would you be interested in using it?


    So if you have ever added a comment to an online forum or written a blog on Wordpress, you may have noticed that the text-area in which you enter your very emotionally invested few lines of opinions has a bar at the top which lets you italicise , bold, or even put your text in "quotes" to highlight the important bits of whatever message your getting across.

    This amazing piece of software is called a WYSIWYG  (What you see is what you get ) editor and I am using one variant of it right now as I type out this blog post.

    ckeditor in angular

    For everyone else this great tool offered on most websites to structure text from users is convenience at the "click of a widget". For software developers, this becomes an implementation problem. How best to get this to work with your web development framework of choice, mine and yours if your are reading this being faced with the same problem I was, Angular.


    Enter CKEditor


    CKEditor  one variant of WYSIWYG editors out there that has great documentation and customisation support as well as community plugins to add extra functionality to it.


    The Integration with Angular problem


    If you have built an angular production site recently, you may have run into the nifty angular server side rendering support that was added with angular universal  . There is a great article explaining how server side rendering works here. Another article explaining how to build your angular app with SSR here. Also here's how to deploy after you have build your app here.

    Now while angular is built to work with third party npm packages like the one that brings CKEditor support to your angular app, not all of them are compatible with angular universal.

    After some deep internet diving, "I came up" with with following solution that only uses plain old including the CKEditor library via  CDN into your angular application without requiring the npm package built for angular to support CKEditor.


    The HACK (How to use CKEditor 5 in Angular with server side rendering support)


    Now that we have the origin story out of the way. . .  Don't worry you will not be judged for not reading it. everyone goes straight for the code.



    Using Angular's renderer2 .  we can load CDN JS libraries at a component level and even run init scripts on them and here is how.


    Step 1: create a new angular project, cd into it and serve it


    ng new ckeditorDemo
    cd ckeditorDemo
    ng serve
    

    now if you open a browser and go to http://localhost: 4200, you should see your newly created angular app


    Step 2: generate a new component


    ng g c editor -m=app.module

    this is where we are going to put our ckeditor code


    Step  3: modify "src/app/app.component.html"  file to  show  editor component content


    delete all the code in the file and replace it with

    app editor code

    Step 4:  Lets bring in angular renderer 2


    in the file "src/app/editor/editor.component.ts" make the following imports

    import { Component, OnInit, Inject, Renderer2 } from '@angular/core';
    import { DOCUMENT } from '@angular/common';
    

    What we are doing here is importing renderer2 , the module from angular that we will use to inject javascript into the the component at load time.

    We are also importing DOCUMENT, we will use this to reference the  dom as _document in "this" component's context.


    Still in the file "src/app/editor/editor.component.ts" add the following code


      ...
      
      ckEditorData;
    
      constructor(
        private _renderer2: Renderer2,
        @Inject(DOCUMENT) private _document,
      ) {
        this.loadCkEditor();
      }
      
      ...
    

    Here we are adding the dependencies we just mentioned above into the constructor. Notice we are calling the function "this.loadCkEditor();"  this is where we will add the code that  loads ckEditor at load time. the global variable ckeditorData will hold the data from the editor as we type into it.


    Step 5: load CKEditor


    Still in the file "src/app/editor/editor.component.ts" add the following code

    loadCkEditor() {
        const script = this._renderer2.createElement('script');
        script.type = 'application/javascript';
        script.src =
          'https://cdn.ckeditor.com/ckeditor5/12.4.0/classic/ckeditor.js';
        script.text = `
          ${(script.onload = async () => {
            const CKEditor = (window as any).ClassicEditor;
            const editor = await CKEditor.create(
              document.querySelector('#editor'),
              {
                toolbar: [
                  'heading',
                  '|',
                  'bold',
                  'italic',
                  'link',
                  'bulletedList',
                  'numberedList',
                  'blockQuote',
                  'insertTable',
                  'undo',
                  'redo'
                ]
              }
            );
            editor.model.document.on('change', () => {
              this.ckEditorData = JSON.stringify(editor.getData());
            });
          })}
        `;
    
        this._renderer2.appendChild(this._document.body, script);
      }
    

    Here in lines 1 - 5 , we tell renderer 2 that we are loading javascript from the CKEditor 5 cdn

    In lines 6 - 26 we do some config to our CKEditor , so remember that bar at the top with all the widgets , this is where you define which ones you want to make available to user  in the the toolbar array

    In lines 27 to the end 33  we make an event handler that gets fired every time the text in the editor changes  and save it in the gloabal variable we defined earlier "ckEditorData".

    Lastly we use “this._renderer2.appendChild(this._document.body, script);” to bind the script to the dom;


    Step 6: hook up the editor in the Dom


    in the file “src/app/editor/editor.component.html” add the following code

    code

    Here we make a div and give it an Id of editor , the same Id we reference in the renderer 2 script.


    Awesome Result


    asweome result

    The app should still be getting served on http://localhost:4200, you should see the amazing WYSIWYG editor in all its glory waiting for you to type out some world changing information for the entire Internet to read.

    What is even better is if you build it for deployment using angular universal, It will not break.


    You can find the source code here.

    Thanks for reading.

    Contact us


      Related posts:

      laravel livewireLaravel Livewire angularUpdating A Primitive Type Variable From A Service In Angular dynamic doughnut graph using laravel vue componentDynamic Doughnut Graph Using Laravel Vue Component how to setup git-ftp for windowsHow To Setup Git-ftp For Windows
      Share
      78
      Ronald Hove
      Ronald Hove

      Leave a Reply Cancel reply

      Your email address will not be published. Required fields are marked *

      Lava Lamp Lab


      Like technology, a lava lamp constantly changes form, producing new conditions with every passing moment



      lava lamp lab facebook   lava lamp lab twitter   lava lamp lab linkedin   lava lamp lab instgram

      Services


      Application & software development

      Outsourced software development

      Project based resourcing

      Digital marketing & consulting

      Graphic design & consulting

      UI / UX design & consulting

      Contact Us


      +27(0) 83 419 4851

      +27(0) 21 036 1165


      switchon@lavalamp.biz


      Unit 4 Monaco Square,
      14 Church Street,
      Durbanville,
      Cape Town, 7550

      NBConsult Group


      nbconsult
      nbconnect msp
      nbclearning
      river broadband
      designer needed
      © 2023 Lava Lamp Lab (Pty) Ltd | All Rights Reserved | Privacy Policy
      Contact us now

        Application & software development

          Outsourced software development

            Project based resourcing

              Digital marketing & consulting

                Graphic design & consulting

                  UI/UX design & consulting

                    Lease an expert

                      Recruitment services

                        We are using cookies to give you the best experience on our website.

                        You can find out more about which cookies we are using or switch them off in settings.

                        Lava Lamp Lab
                        Powered by  GDPR Cookie Compliance
                        Privacy Overview

                        This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.

                        Strictly Necessary Cookies

                        Strictly Necessary Cookie should be enabled at all times so that we can save your preferences for cookie settings.

                        If you disable this cookie, we will not be able to save your preferences. This means that every time you visit this website you will need to enable or disable cookies again.

                        3rd Party Cookies

                        This website uses Google Analytics to collect anonymous information such as the number of visitors to the site, and the most popular pages.

                        Keeping this cookie enabled helps us to improve our website.

                        Please enable Strictly Necessary Cookies first so that we can save your preferences!

                        Cookie Policy

                        More information about our Cookie Policy