CkEditor5-angular.md

CKEditor 5 editor generated with the online builder

• Step 1: Import this cURL to Postman:

curl 'https://cke5-online-builder.cke-cs.com/build' \
  -H 'authority: cke5-online-builder.cke-cs.com' \
  -H 'accept: */*' \
  -H 'accept-language: en-US,en;q=0.9,vi;q=0.8' \
  -H 'content-type: application/json' \
  -H 'dnt: 1' \
  -H 'origin: https://ckeditor.com' \
  -H 'referer: https://ckeditor.com/' \
  -H 'sec-ch-ua: "Not_A Brand";v="8", "Chromium";v="120", "Microsoft Edge";v="120"' \
  -H 'sec-ch-ua-mobile: ?0' \
  -H 'sec-ch-ua-platform: "macOS"' \
  -H 'sec-fetch-dest: empty' \
  -H 'sec-fetch-mode: cors' \
  -H 'sec-fetch-site: cross-site' \
  -H 'user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36 Edg/120.0.0.0' \
  --data-raw '{"plugins":["Alignment","Autoformat","Autosave","BlockQuote","CloudServices","CodeBlock","Code","SpecialCharactersEssentials","SpecialCharacters","FindAndReplace","FontSize","FontFamily","FontColor","FontBackgroundColor","Heading","Highlight","HorizontalLine","HtmlEmbed","MediaEmbed","MediaEmbedToolbar","GeneralHtmlSupport","Image","Indent","Link","List","PasteFromOffice","RemoveFormat","SelectAll","SourceEditing","Table","TableColumnResize","TableCellProperties","TableToolbar","TableProperties","ImageUpload","SimpleUploadAdapter","WordCount","Bold","ImageResize","ImageStyle","ImageToolbar","ImageInsert","AutoImage","IndentBlock","Italic","Strikethrough","Subscript","Superscript","Underline","Essentials","Paragraph","Undo"],"language":"en","toolbar":["heading","|","removeFormat","alignment","bold","italic","underline","strikethrough","link","imageUpload","mediaEmbed","highlight","|","outdent","indent","specialCharacters","|","fontSize","fontBackgroundColor","fontColor","fontFamily","bulletedList","numberedList","insertTable","subscript","superscript","blockQuote","undo","redo","findAndReplace","codeBlock","code","htmlEmbed","horizontalLine","selectAll","|","sourceEditing"],"editor":"ClassicEditor"}' \
  --compressed

• Step 2: Execute postman request and recieve builder id, Eg. {"id":"jc7k2if1t5r1-lwf4mmgl6sa0"}

• Step 3: Access this URL: https://cke5-online-builder.cke-cs.com/build-progress/<id> and refesh sometimes till it show event: done

• Step 4: Download built ZIP file at: https://cke5-online-builder.cke-cs.com/download/<id>/ckeditor5.zip

How to Integrating with Angular

• Step 0: Add to .gitignore:

/ckeditor5/node_modules
/ckeditor5/sample

• Step 1: Unpack it into you application’s main directory. (in the same level with src, node_modules, dist)

• Step 2: Install dependencies: npm i @ckeditor/ckeditor5-angular

• Step 3: Install Online built package: npm i ./ckeditor5

• Step 4: Import CKEditorModule from @ckeditor/ckeditor5-angular to module that you need

• Step 5.1: In the .component.ts file:

import Editor from 'ckeditor5-custom-build/build/ckeditor';
import { EditorConfig } from '@ckeditor/ckeditor5-core';

// ...

editor = Editor;
cfgEditor = SystemConstant.CkEditorCfg as unknown as EditorConfig;
ckeData = '';

• Step 5.2: In the .component.html file:

<ckeditor [config]="cfgEditor" [editor]="editor" [(ngModel)]="ckeData"></ckeditor>

Update

Just update @ckeditor/ckeditor5-angular and unzip new ZIP file to ./ckeditor5 folder

Sample Editor Config.txt

public static CkEditorCfg = {
    toolbar: {
      items: [
        'heading', '|', 'removeFormat', 'alignment', 'bold', 'italic', 'underline',
        'strikethrough', 'link', 'insertImage', 'mediaEmbed', 'highlight', '|',
        'outdent', 'indent', 'specialCharacters', '|', 'fontSize',
        'fontBackgroundColor', 'fontColor', 'fontFamily', 'bulletedList',
        'numberedList', 'insertTable', 'subscript', 'superscript', 'blockQuote',
        'undo', 'redo', 'findAndReplace', 'codeBlock', 'code', 'htmlEmbed',
        'horizontalLine', 'selectAll', '|', 'sourceEditing'
      ]
    },
    language: 'en',
    image: {
      toolbar: ['imageTextAlternative', 'toggleImageCaption', 'imageStyle:inline', 'imageStyle:block', 'imageStyle:side', 'linkImage', 'resizeImage'],
      resizeOptions: [
        { name: 'resizeImage:original', value: null },
        { name: 'resizeImage:50', value: '75' },
        { name: 'resizeImage:50', value: '50' },
        { name: 'resizeImage:50', value: '25' },
      ],
      resizeUnit: '%',
    },
    table:
    {
      contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells', 'tableCellProperties', 'tableProperties']
    },
    simpleUpload: {
      // uploadUrl: UrlConstant.API.CKE_IMG,
      uploadUrl: 'http://aaa.aaa',
      withCredentials: true,
      headers: {
        Authorization: `Bearer ${JSON.parse(localStorage.getItem(SystemConstant.CURRENT_INFO) ?? '{}')?.token}`
      }
    },
    mediaEmbed: {
      previewsInData: true,
      // Block mediaEmbed from domain;
      // Docs: https://ckeditor.com/docs/ckeditor5/latest/api/module_media-embed_mediaembed-MediaEmbedConfig.html
      // removeProviders: [],
    },
    extraPlugins: [],
    removePlugins: ['MediaEmbedToolbar'],
  };