@dignite-ng/expand.ck-editor 3.0.0-rc.2 → 3.0.0-rc.4

package/fesm2022/dignite-ng-expand.ck-editor.mjs

@@ -1,346 +1,168 @@
 import * as i0 from '@angular/core';
-import { Injectable, inject, Component, NgModule, Input, ViewChild, Pipe } from '@angular/core';
-import * as i1$1 from '@angular/router';
+import { NgModule, inject, ChangeDetectorRef, Component, Input, ViewChild, Injectable } from '@angular/core';
+import * as i1 from '@angular/router';
 import { RouterModule } from '@angular/router';
-import { AccessibilityHelp, Alignment, Autoformat, AutoImage, Autosave, Base64UploadAdapter, BlockQuote, Bold, CloudServices, Code, Essentials, FontBackgroundColor, FontColor, FontFamily, FontSize, GeneralHtmlSupport, Heading, Highlight, HorizontalLine, ImageBlock, ImageCaption, ImageInline, ImageInsert, ImageInsertViaUrl, ImageResize, ImageStyle, ImageTextAlternative, ImageToolbar, ImageUpload, Indent, IndentBlock, Italic, Link, LinkImage, List, ListProperties, MediaEmbed, Paragraph, PasteFromOffice, RemoveFormat, SelectAll, SpecialCharacters, SpecialCharactersArrows, SpecialCharactersCurrency, SpecialCharactersEssentials, SpecialCharactersLatin, SpecialCharactersMathematical, SpecialCharactersText, Strikethrough, Style, Subscript, Superscript, Table, TableCaption, TableCellProperties, TableColumnResize, TableProperties, TableToolbar, TextTransformation, TodoList, Underline, Undo, ClassicEditor } from 'ckeditor5';
-import * as i2$1 from '@abp/ng.core';
-import { ConfigStateService, LazyLoadService, SubscriptionService, LOADING_STRATEGY, RestService, CoreModule } from '@abp/ng.core';
-import * as i1 from '@angular/forms';
-import { FormBuilder, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i3 from '@abp/ng.core';
+import { mapEnumToOptions, ConfigStateService, RestService, LazyLoadService, SubscriptionService, LOADING_STRATEGY, CoreModule } from '@abp/ng.core';
+import { ThemeSharedModule } from '@abp/ng.theme.shared';
+import * as i1$1 from '@angular/forms';
+import { FormBuilder, Validators } from '@angular/forms';
 import * as i2 from '@angular/common';
-import * as i4 from '@ckeditor/ckeditor5-angular';
+import * as i4 from '@ngx-validate/core';
+import * as i4$1 from '@ckeditor/ckeditor5-angular';
 import { CKEditorModule } from '@ckeditor/ckeditor5-angular';
-import { ThemeSharedModule } from '@abp/ng.theme.shared';
-import * as i3 from '@ngx-validate/core';
-import { DomSanitizer } from '@angular/platform-browser';
 
-var easy = {
-    toolbar: {
-        items: [
-            'undo',
-            'redo',
-            '|',
-            'heading',
-            '|',
-            'link',
-            'bold',
-            'italic',
-            'underline',
-        ],
-        shouldNotGroupWhenFull: false,
-    },
-    plugins: [
-        AccessibilityHelp,
-        Alignment,
-        Autoformat,
-        AutoImage,
-        Autosave,
-        Base64UploadAdapter,
-        BlockQuote,
-        Bold,
-        CloudServices,
-        Code,
-        Essentials,
-        FontBackgroundColor,
-        FontColor,
-        FontFamily,
-        FontSize,
-        GeneralHtmlSupport,
-        Heading,
-        Highlight,
-        HorizontalLine,
-        ImageBlock,
-        ImageCaption,
-        ImageInline,
-        ImageInsert,
-        ImageInsertViaUrl,
-        ImageResize,
-        ImageStyle,
-        ImageTextAlternative,
-        ImageToolbar,
-        ImageUpload,
-        Indent,
-        IndentBlock,
-        Italic,
-        Link,
-        LinkImage,
-        List,
-        ListProperties,
-        MediaEmbed,
-        Paragraph,
-        PasteFromOffice,
-        RemoveFormat,
-        SelectAll,
-        SpecialCharacters,
-        SpecialCharactersArrows,
-        SpecialCharactersCurrency,
-        SpecialCharactersEssentials,
-        SpecialCharactersLatin,
-        SpecialCharactersMathematical,
-        SpecialCharactersText,
-        Strikethrough,
-        Style,
-        Subscript,
-        Superscript,
-        Table,
-        TableCaption,
-        TableCellProperties,
-        TableColumnResize,
-        TableProperties,
-        TableToolbar,
-        TextTransformation,
-        TodoList,
-        Underline,
-        Undo,
-    ],
-    heading: {
-        options: [
-            {
-                model: 'paragraph',
-                title: 'Paragraph',
-                class: 'ck-heading_paragraph',
-            },
-            {
-                model: 'heading1',
-                view: 'h1',
-                title: 'Heading 1',
-                class: 'ck-heading_heading1',
-            },
-            {
-                model: 'heading2',
-                view: 'h2',
-                title: 'Heading 2',
-                class: 'ck-heading_heading2',
-            },
-            {
-                model: 'heading3',
-                view: 'h3',
-                title: 'Heading 3',
-                class: 'ck-heading_heading3',
-            },
-            {
-                model: 'heading4',
-                view: 'h4',
-                title: 'Heading 4',
-                class: 'ck-heading_heading4',
-            },
-            {
-                model: 'heading5',
-                view: 'h5',
-                title: 'Heading 5',
-                class: 'ck-heading_heading5',
-            },
-            {
-                model: 'heading6',
-                view: 'h6',
-                title: 'Heading 6',
-                class: 'ck-heading_heading6',
-            },
-        ],
-    },
-    link: {
-        addTargetToExternalLinks: true,
-        defaultProtocol: 'https://',
-        decorators: {
-            toggleDownloadable: {
-                mode: 'manual',
-                label: 'Downloadable',
-                attributes: {
-                    download: 'file',
-                },
-            },
-        },
-    },
-};
-var defaults = {
-    toolbar: {
-        items: [
-            'undo',
-            'redo',
-            '|',
-            'heading',
-            '|',
-            'fontSize',
-            'fontFamily',
-            'fontColor',
-            'fontBackgroundColor',
-            'link',
-            '|',
-            'bold',
-            'italic',
-            'underline',
-            '|',
-            'insertImage',
-        ],
-        shouldNotGroupWhenFull: false,
-    },
-    plugins: [
-        Undo,
-        Heading,
-        FontSize,
-        FontColor,
-        FontFamily,
-        FontBackgroundColor,
-        Link,
-        Bold,
-        Italic,
-        Underline,
-        Base64UploadAdapter,
-        ImageToolbar,
-        ImageUpload,
-        LinkImage,
-        AccessibilityHelp,
-        Alignment,
-        Autoformat,
-        AutoImage,
-        Autosave,
-        BlockQuote,
-        CloudServices,
-        Code,
-        Essentials,
-        GeneralHtmlSupport,
-        Highlight,
-        HorizontalLine,
-        ImageBlock,
-        ImageCaption,
-        ImageInline,
-        ImageInsert,
-        ImageInsertViaUrl,
-        ImageResize,
-        ImageStyle,
-        ImageTextAlternative,
-        Indent,
-        IndentBlock,
-        List,
-        ListProperties,
-        MediaEmbed,
-        Paragraph,
-        PasteFromOffice,
-        RemoveFormat,
-        SelectAll,
-        SpecialCharacters,
-        SpecialCharactersArrows,
-        SpecialCharactersCurrency,
-        SpecialCharactersEssentials,
-        SpecialCharactersLatin,
-        SpecialCharactersMathematical,
-        SpecialCharactersText,
-        Strikethrough,
-        Style,
-        Subscript,
-        Superscript,
-        Table,
-        TableCaption,
-        TableCellProperties,
-        TableColumnResize,
-        TableProperties,
-        TableToolbar,
-        TextTransformation,
-        TodoList,
-    ],
-    heading: {
-        options: [
-            {
-                model: 'paragraph',
-                title: 'Paragraph',
-                class: 'ck-heading_paragraph',
-            },
-            {
-                model: 'heading1',
-                view: 'h1',
-                title: 'Heading 1',
-                class: 'ck-heading_heading1',
-            },
-            {
-                model: 'heading2',
-                view: 'h2',
-                title: 'Heading 2',
-                class: 'ck-heading_heading2',
-            },
-            {
-                model: 'heading3',
-                view: 'h3',
-                title: 'Heading 3',
-                class: 'ck-heading_heading3',
-            },
-            {
-                model: 'heading4',
-                view: 'h4',
-                title: 'Heading 4',
-                class: 'ck-heading_heading4',
-            },
-            {
-                model: 'heading5',
-                view: 'h5',
-                title: 'Heading 5',
-                class: 'ck-heading_heading5',
-            },
-            {
-                model: 'heading6',
-                view: 'h6',
-                title: 'Heading 6',
-                class: 'ck-heading_heading6',
-            },
-        ],
-    },
-    fontSize: {
-        options: [10, 12, 14, 'default', 18, 20, 22, 24, 26, 28, 30, 32],
-    },
-    link: {
-        addTargetToExternalLinks: true,
-        defaultProtocol: 'https://',
-        decorators: {
-            toggleDownloadable: {
-                mode: 'manual',
-                label: 'Downloadable',
-                attributes: {
-                    download: 'file',
-                },
-            },
-        },
-    },
-    image: {
-        toolbar: [
-            'toggleImageCaption',
-            'imageTextAlternative',
-            '|',
-            'imageStyle:inline',
-            'imageStyle:wrapText',
-            'imageStyle:breakText',
-            '|',
-            'resizeImage',
-        ],
-        styles: {
-            options: [
-                'inline', 'alignLeft', 'alignRight',
-                'alignCenter', 'alignBlockLeft', 'alignBlockRight',
-                'block', 'side'
-            ]
-        },
-        resizeOptions: [{
-                name: 'resizeImage:original',
-                label: 'Original',
-                value: null
-            },
-            {
-                name: 'resizeImage:25',
-                label: '25%',
-                value: '25'
-            },
-            {
-                name: 'resizeImage:50',
-                label: '50%',
-                value: '50'
-            },
-            {
-                name: 'resizeImage:75',
-                label: '75%',
-                value: '75'
+const routes = [];
+class CkEditorRoutingModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: CkEditorRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.5", ngImport: i0, type: CkEditorRoutingModule, imports: [i1.RouterModule], exports: [RouterModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: CkEditorRoutingModule, imports: [RouterModule.forChild(routes), RouterModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: CkEditorRoutingModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [RouterModule.forChild(routes)],
+                    exports: [RouterModule],
+                }]
+        }] });
+
+class CkEditorConfig {
+    constructor(data) {
+        /**类型 */
+        this['Ckeditor.Mode'] = ['', []];
+        /**文件容器名称 */
+        // placeholder: any = new FormControl('', Validators.required);
+        this['Ckeditor.ImagesContainerName'] = ['', []];
+        /**多选 */
+        // placeholder: any = new FormControl('', Validators.required);
+        this['Ckeditor.InitialContent'] = ['', []];
+        if (data) {
+            for (const key in data) {
+                if (data.hasOwnProperty(key)) {
+                    this[key] = data[key];
+                }
             }
-        ],
-    },
+        }
+    }
+}
+
+var CkEditorModeEnum;
+(function (CkEditorModeEnum) {
+    CkEditorModeEnum[CkEditorModeEnum["Simple"] = 0] = "Simple";
+    CkEditorModeEnum[CkEditorModeEnum["Classic"] = 1] = "Classic";
+})(CkEditorModeEnum || (CkEditorModeEnum = {}));
+const CkEditorModeEnumOptions = mapEnumToOptions(CkEditorModeEnum);
+
+class CkEditorConfigComponent {
+    constructor(fb) {
+        this.fb = fb;
+        this.CkEditorModeEnum = CkEditorModeEnum;
+        this.CkEditorModeEnumOptions = CkEditorModeEnumOptions;
+        this.cdr = inject(ChangeDetectorRef);
+    }
+    set Entity(v) {
+        this._Entity = v;
+        this.dataLoaded();
+    }
+    set selected(v) {
+        this._selected = v || '';
+        // this.dataLoaded()
+    }
+    set type(v) {
+        this._type = v;
+        // this.dataLoaded()
+    }
+    //
+    get formConfiguration() {
+        return this._Entity.get('formConfiguration');
+    }
+    async dataLoaded() {
+        if (this._Entity && this._type) {
+            await this.AfterInit();
+            this.cdr.detectChanges(); // 手动触发变更检测
+            this.submitclick?.nativeElement?.click();
+        }
+    }
+    AfterInit() {
+        return new Promise((resolve, rejects) => {
+            this._Entity.setControl('formConfiguration', this.fb.group(new CkEditorConfig()));
+            if (this._selected && this._selected.formControlName == this._type) {
+                this.formConfiguration.patchValue({
+                    ...this._selected.formConfiguration,
+                });
+            }
+            resolve(true);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: CkEditorConfigComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.5", type: CkEditorConfigComponent, selector: "ck-editor-config", inputs: { Entity: "Entity", selected: "selected", type: "type" }, viewQueries: [{ propertyName: "submitclick", first: true, predicate: ["submitclick"], descendants: true, static: true }], ngImport: i0, template: "<form [formGroup]=\"_Entity\">\n    <div formGroupName=\"formConfiguration\">\n        <div class=\"mb-3\">\n            <label class=\"form-label\">{{'DigniteAbpDynamicFormsCkEditor::EditorMode' | abpLocalization}}</label>\n            <!-- <input type=\"text\" class=\"form-control\" formControlName=\"Ckeditor.Mode\"> -->\n            <select class=\"form-select\" formControlName=\"Ckeditor.Mode\" >\n                <ng-container *ngFor=\"let item of CkEditorModeEnumOptions\">\n                    <option [value]=\"item.value\">{{'DigniteAbpDynamicFormsCkEditor::EditorMode.' + item.key|abpLocalization}}</option>\n                </ng-container>\n            </select>\n        </div>\n        <div class=\"mb-3\">\n            <label class=\"form-label\">{{'DigniteAbpDynamicFormsCkEditor::ImagesContainerName' | abpLocalization}}</label>\n            <input type=\"text\" class=\"form-control\" formControlName=\"Ckeditor.ImagesContainerName\">\n        </div>\n        <div class=\"mb-3\">\n            <label class=\"form-label\">{{'DigniteAbpDynamicFormsCkEditor::InitialContent' | abpLocalization}}</label>\n            <input type=\"text\" class=\"form-control\" formControlName=\"Ckeditor.InitialContent\">\n        </div>\n        <button type=\"submit\" (abpInit)=\"submitclick?.nativeElement?.click()\" style=\"display: none;\"\n            #submitclick></button>\n    </div>\n</form>", styles: [""], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i3.InitDirective, selector: "[abpInit]", outputs: ["abpInit"] }, { kind: "directive", type: i4.ValidationGroupDirective, selector: "[formGroup],[formGroupName]", exportAs: ["validationGroup"] }, { kind: "directive", type: i4.ValidationDirective, selector: "[formControl],[formControlName]", exportAs: ["validationDirective"] }, { kind: "pipe", type: i3.LocalizationPipe, name: "abpLocalization" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: CkEditorConfigComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ck-editor-config', template: "<form [formGroup]=\"_Entity\">\n    <div formGroupName=\"formConfiguration\">\n        <div class=\"mb-3\">\n            <label class=\"form-label\">{{'DigniteAbpDynamicFormsCkEditor::EditorMode' | abpLocalization}}</label>\n            <!-- <input type=\"text\" class=\"form-control\" formControlName=\"Ckeditor.Mode\"> -->\n            <select class=\"form-select\" formControlName=\"Ckeditor.Mode\" >\n                <ng-container *ngFor=\"let item of CkEditorModeEnumOptions\">\n                    <option [value]=\"item.value\">{{'DigniteAbpDynamicFormsCkEditor::EditorMode.' + item.key|abpLocalization}}</option>\n                </ng-container>\n            </select>\n        </div>\n        <div class=\"mb-3\">\n            <label class=\"form-label\">{{'DigniteAbpDynamicFormsCkEditor::ImagesContainerName' | abpLocalization}}</label>\n            <input type=\"text\" class=\"form-control\" formControlName=\"Ckeditor.ImagesContainerName\">\n        </div>\n        <div class=\"mb-3\">\n            <label class=\"form-label\">{{'DigniteAbpDynamicFormsCkEditor::InitialContent' | abpLocalization}}</label>\n            <input type=\"text\" class=\"form-control\" formControlName=\"Ckeditor.InitialContent\">\n        </div>\n        <button type=\"submit\" (abpInit)=\"submitclick?.nativeElement?.click()\" style=\"display: none;\"\n            #submitclick></button>\n    </div>\n</form>" }]
+        }], ctorParameters: () => [{ type: i1$1.FormBuilder }], propDecorators: { Entity: [{
+                type: Input
+            }], selected: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], submitclick: [{
+                type: ViewChild,
+                args: ['submitclick', { static: true }]
+            }] } });
+
+let isBase64UploadAdapter$1 = class isBase64UploadAdapter {
+    constructor(loader, ImagesContainerName, restService) {
+        this.reader = new FileReader();
+        this.Base64 = false;
+        this.createFile = (input, config) => this.restService.request({
+            method: 'POST',
+            url: '/api/file-explorer/files',
+            params: { containerName: input.containerName, cellName: input.cellName, directoryId: input.directoryId, entityId: input.entityId },
+            body: input.file,
+        }, { apiName: 'FileExplorer', ...config });
+        this.loader = loader;
+        this.ImagesContainerName = ImagesContainerName;
+        this.restService = restService;
+    }
+    upload() {
+        return new Promise((resolve, reject) => {
+            const reader = this.reader;
+            if (this.Base64) {
+                reader.addEventListener('load', () => {
+                    resolve({ default: reader.result });
+                });
+                reader.addEventListener('error', err => {
+                    reject(err);
+                });
+                reader.addEventListener('abort', () => {
+                    reject();
+                });
+                this.loader.file.then((file) => {
+                    reader.readAsDataURL(file);
+                });
+            }
+            else {
+                this.loader.file.then((file) => {
+                    var formData = new FormData();
+                    formData.append('file', file, file.name);
+                    this.createFile({
+                        file: formData,
+                        containerName: this.ImagesContainerName,
+                        directoryId: '',
+                        entityId: ''
+                    }).subscribe((response) => {
+                        resolve({ default: response.url });
+                    }, (error) => {
+                        reject(error);
+                    });
+                });
+            }
+        });
+    }
 };
-var standard = {
+
+var Simple = {
     toolbar: {
         items: [
             'undo',
@@ -348,95 +170,15 @@ var standard = {
             '|',
             'heading',
             '|',
-            'fontSize',
-            'fontFamily',
-            'fontColor',
-            'fontBackgroundColor',
-            '|',
+            'link',
             'bold',
             'italic',
             'underline',
-            'strikethrough',
-            '|',
-            'link',
-            'insertImage',
-            'insertTable',
-            '|',
-            'alignment',
-            '|',
-            'bulletedList',
-            'numberedList',
+            'insertImage'
         ],
         shouldNotGroupWhenFull: false,
     },
-    plugins: [
-        AccessibilityHelp,
-        Alignment,
-        Autoformat,
-        AutoImage,
-        Autosave,
-        Base64UploadAdapter,
-        BlockQuote,
-        Bold,
-        CloudServices,
-        Code,
-        Essentials,
-        FontBackgroundColor,
-        FontColor,
-        FontFamily,
-        FontSize,
-        GeneralHtmlSupport,
-        Heading,
-        Highlight,
-        HorizontalLine,
-        ImageBlock,
-        ImageCaption,
-        ImageInline,
-        ImageInsert,
-        ImageInsertViaUrl,
-        ImageResize,
-        ImageStyle,
-        ImageTextAlternative,
-        ImageToolbar,
-        ImageUpload,
-        Indent,
-        IndentBlock,
-        Italic,
-        Link,
-        LinkImage,
-        List,
-        ListProperties,
-        MediaEmbed,
-        Paragraph,
-        PasteFromOffice,
-        RemoveFormat,
-        SelectAll,
-        SpecialCharacters,
-        SpecialCharactersArrows,
-        SpecialCharactersCurrency,
-        SpecialCharactersEssentials,
-        SpecialCharactersLatin,
-        SpecialCharactersMathematical,
-        SpecialCharactersText,
-        Strikethrough,
-        Style,
-        Subscript,
-        Superscript,
-        Table,
-        TableCaption,
-        TableCellProperties,
-        TableColumnResize,
-        TableProperties,
-        TableToolbar,
-        TextTransformation,
-        TodoList,
-        Underline,
-        Undo,
-    ],
-    fontSize: {
-        options: [10, 12, 14, 'default', 18, 20, 22, 24, 26, 28, 30, 32],
-        supportAllValues: true,
-    },
+    plugins: [],
     heading: {
         options: [
             {
@@ -458,78 +200,28 @@ var standard = {
             },
             {
                 model: 'heading3',
-                view: 'h3',
-                title: 'Heading 3',
-                class: 'ck-heading_heading3',
-            },
-            {
-                model: 'heading4',
-                view: 'h4',
-                title: 'Heading 4',
-                class: 'ck-heading_heading4',
-            },
-            {
-                model: 'heading5',
-                view: 'h5',
-                title: 'Heading 5',
-                class: 'ck-heading_heading5',
-            },
-            {
-                model: 'heading6',
-                view: 'h6',
-                title: 'Heading 6',
-                class: 'ck-heading_heading6',
-            },
-        ],
-    },
-    htmlSupport: {
-        allow: [
-            {
-                name: /^.*$/,
-                styles: true,
-                attributes: true,
-                classes: true,
-            },
-        ],
-    },
-    image: {
-        toolbar: [
-            'toggleImageCaption',
-            'imageTextAlternative',
-            '|',
-            'imageStyle:inline',
-            'imageStyle:wrapText',
-            'imageStyle:breakText',
-            '|',
-            'resizeImage',
-        ],
-        styles: {
-            options: [
-                'inline', 'alignLeft', 'alignRight',
-                'alignCenter', 'alignBlockLeft', 'alignBlockRight',
-                'block', 'side'
-            ]
-        },
-        resizeOptions: [{
-                name: 'resizeImage:original',
-                label: 'Original',
-                value: null
+                view: 'h3',
+                title: 'Heading 3',
+                class: 'ck-heading_heading3',
             },
             {
-                name: 'resizeImage:25',
-                label: '25%',
-                value: '25'
+                model: 'heading4',
+                view: 'h4',
+                title: 'Heading 4',
+                class: 'ck-heading_heading4',
             },
             {
-                name: 'resizeImage:50',
-                label: '50%',
-                value: '50'
+                model: 'heading5',
+                view: 'h5',
+                title: 'Heading 5',
+                class: 'ck-heading_heading5',
             },
             {
-                name: 'resizeImage:75',
-                label: '75%',
-                value: '75'
-            }
+                model: 'heading6',
+                view: 'h6',
+                title: 'Heading 6',
+                class: 'ck-heading_heading6',
+            },
         ],
     },
     link: {
@@ -545,73 +237,341 @@ var standard = {
             },
         },
     },
-    list: {
-        properties: {
-            styles: true,
-            startIndex: true,
-            reversed: true,
-        },
-    },
-    style: {
-        definitions: [
-            {
-                name: 'Article category',
-                element: 'h3',
-                classes: ['category'],
-            },
-            {
-                name: 'Title',
-                element: 'h2',
-                classes: ['document-title'],
-            },
-            {
-                name: 'Subtitle',
-                element: 'h3',
-                classes: ['document-subtitle'],
-            },
-            {
-                name: 'Info box',
-                element: 'p',
-                classes: ['info-box'],
-            },
-            {
-                name: 'Side quote',
-                element: 'blockquote',
-                classes: ['side-quote'],
-            },
-            {
-                name: 'Marker',
-                element: 'span',
-                classes: ['marker'],
-            },
-            {
-                name: 'Spoiler',
-                element: 'span',
-                classes: ['spoiler'],
-            },
-            {
-                name: 'Code (dark)',
-                element: 'pre',
-                classes: ['fancy-code', 'fancy-code-dark'],
-            },
-            {
-                name: 'Code (bright)',
-                element: 'pre',
-                classes: ['fancy-code', 'fancy-code-bright'],
-            },
-        ],
-    },
-    table: {
-        contentToolbar: [
-            'tableColumn',
-            'tableRow',
-            'mergeTableCells',
-            'tableProperties',
-            'tableCellProperties',
-        ],
-    },
 };
-var full = {
+// export var defaults: any= {
+//     toolbar: {
+//         items: [
+//             'undo',
+//             'redo',
+//             '|',
+//             'heading',
+//             '|',
+//             'fontSize',
+//             'fontFamily',
+//             'fontColor',
+//             'fontBackgroundColor',
+//             'link',
+//             '|',
+//             'bold',
+//             'italic',
+//             'underline',
+//             '|',
+//             'insertImage',
+//         ],
+//         shouldNotGroupWhenFull: false,
+//     },
+//     plugins: [],
+//     heading: {
+//         options: [
+//             {
+//                 model: 'paragraph',
+//                 title: 'Paragraph',
+//                 class: 'ck-heading_paragraph',
+//             },
+//             {
+//                 model: 'heading1',
+//                 view: 'h1',
+//                 title: 'Heading 1',
+//                 class: 'ck-heading_heading1',
+//             },
+//             {
+//                 model: 'heading2',
+//                 view: 'h2',
+//                 title: 'Heading 2',
+//                 class: 'ck-heading_heading2',
+//             },
+//             {
+//                 model: 'heading3',
+//                 view: 'h3',
+//                 title: 'Heading 3',
+//                 class: 'ck-heading_heading3',
+//             },
+//             {
+//                 model: 'heading4',
+//                 view: 'h4',
+//                 title: 'Heading 4',
+//                 class: 'ck-heading_heading4',
+//             },
+//             {
+//                 model: 'heading5',
+//                 view: 'h5',
+//                 title: 'Heading 5',
+//                 class: 'ck-heading_heading5',
+//             },
+//             {
+//                 model: 'heading6',
+//                 view: 'h6',
+//                 title: 'Heading 6',
+//                 class: 'ck-heading_heading6',
+//             },
+//         ],
+//     },
+//     fontSize: {
+//         options: [10, 12, 14, 'default', 18, 20, 22, 24, 26, 28, 30, 32],
+//     },
+//     link: {
+//         addTargetToExternalLinks: true,
+//         defaultProtocol: 'https://',
+//         decorators: {
+//             toggleDownloadable: {
+//                 mode: 'manual',
+//                 label: 'Downloadable',
+//                 attributes: {
+//                     download: 'file',
+//                 },
+//             },
+//         },
+//     },
+//     image: {
+//         toolbar: [
+//             'toggleImageCaption',
+//             'imageTextAlternative',
+//             '|',
+//             'imageStyle:inline',
+//             'imageStyle:wrapText',
+//             'imageStyle:breakText',
+//             '|',
+//             'resizeImage',
+//         ],
+//         styles: {
+//             options: [
+//                 'inline', 'alignLeft', 'alignRight',
+//                 'alignCenter', 'alignBlockLeft', 'alignBlockRight',
+//                 'block', 'side'
+//             ]
+//         },
+//         resizeOptions: [{
+//             name: 'resizeImage:original',
+//             label: 'Original',
+//             value: null
+//         },
+//         {
+//             name: 'resizeImage:25',
+//             label: '25%',
+//             value: '25'
+//         },
+//         {
+//             name: 'resizeImage:50',
+//             label: '50%',
+//             value: '50'
+//         },
+//         {
+//             name: 'resizeImage:75',
+//             label: '75%',
+//             value: '75'
+//         }
+//         ],
+//     },
+// }
+// export var standard: any= {
+//     toolbar: {
+//         items: [
+//             'undo',
+//             'redo',
+//             '|',
+//             'heading',
+//             '|',
+//             'fontSize',
+//             'fontFamily',
+//             'fontColor',
+//             'fontBackgroundColor',
+//             '|',
+//             'bold',
+//             'italic',
+//             'underline',
+//             'strikethrough',
+//             '|',
+//             'link',
+//             'insertImage',
+//             'insertTable',
+//             '|',
+//             'alignment',
+//             '|',
+//             'bulletedList',
+//             'numberedList',
+//         ],
+//         shouldNotGroupWhenFull: false,
+//     },
+//     plugins: [],
+//     fontSize: {
+//         options: [10, 12, 14, 'default', 18, 20, 22, 24, 26, 28, 30, 32],
+//         supportAllValues: true,
+//     },
+//     heading: {
+//         options: [
+//             {
+//                 model: 'paragraph',
+//                 title: 'Paragraph',
+//                 class: 'ck-heading_paragraph',
+//             },
+//             {
+//                 model: 'heading1',
+//                 view: 'h1',
+//                 title: 'Heading 1',
+//                 class: 'ck-heading_heading1',
+//             },
+//             {
+//                 model: 'heading2',
+//                 view: 'h2',
+//                 title: 'Heading 2',
+//                 class: 'ck-heading_heading2',
+//             },
+//             {
+//                 model: 'heading3',
+//                 view: 'h3',
+//                 title: 'Heading 3',
+//                 class: 'ck-heading_heading3',
+//             },
+//             {
+//                 model: 'heading4',
+//                 view: 'h4',
+//                 title: 'Heading 4',
+//                 class: 'ck-heading_heading4',
+//             },
+//             {
+//                 model: 'heading5',
+//                 view: 'h5',
+//                 title: 'Heading 5',
+//                 class: 'ck-heading_heading5',
+//             },
+//             {
+//                 model: 'heading6',
+//                 view: 'h6',
+//                 title: 'Heading 6',
+//                 class: 'ck-heading_heading6',
+//             },
+//         ],
+//     },
+//     htmlSupport: {
+//         allow: [
+//             {
+//                 name: /^.*$/,
+//                 styles: true,
+//                 attributes: true,
+//                 classes: true,
+//             },
+//         ],
+//     },
+//     image: {
+//         toolbar: [
+//             'toggleImageCaption',
+//             'imageTextAlternative',
+//             '|',
+//             'imageStyle:inline',
+//             'imageStyle:wrapText',
+//             'imageStyle:breakText',
+//             '|',
+//             'resizeImage',
+//         ],
+//         styles: {
+//             options: [
+//                 'inline', 'alignLeft', 'alignRight',
+//                 'alignCenter', 'alignBlockLeft', 'alignBlockRight',
+//                 'block', 'side'
+//             ]
+//         },
+//         resizeOptions: [{
+//             name: 'resizeImage:original',
+//             label: 'Original',
+//             value: null
+//         },
+//         {
+//             name: 'resizeImage:25',
+//             label: '25%',
+//             value: '25'
+//         },
+//         {
+//             name: 'resizeImage:50',
+//             label: '50%',
+//             value: '50'
+//         },
+//         {
+//             name: 'resizeImage:75',
+//             label: '75%',
+//             value: '75'
+//         }
+//         ],
+//     },
+//     link: {
+//         addTargetToExternalLinks: true,
+//         defaultProtocol: 'https://',
+//         decorators: {
+//             toggleDownloadable: {
+//                 mode: 'manual',
+//                 label: 'Downloadable',
+//                 attributes: {
+//                     download: 'file',
+//                 },
+//             },
+//         },
+//     },
+//     list: {
+//         properties: {
+//             styles: true,
+//             startIndex: true,
+//             reversed: true,
+//         },
+//     },
+//     style: {
+//         definitions: [
+//             {
+//                 name: 'Article category',
+//                 element: 'h3',
+//                 classes: ['category'],
+//             },
+//             {
+//                 name: 'Title',
+//                 element: 'h2',
+//                 classes: ['document-title'],
+//             },
+//             {
+//                 name: 'Subtitle',
+//                 element: 'h3',
+//                 classes: ['document-subtitle'],
+//             },
+//             {
+//                 name: 'Info box',
+//                 element: 'p',
+//                 classes: ['info-box'],
+//             },
+//             {
+//                 name: 'Side quote',
+//                 element: 'blockquote',
+//                 classes: ['side-quote'],
+//             },
+//             {
+//                 name: 'Marker',
+//                 element: 'span',
+//                 classes: ['marker'],
+//             },
+//             {
+//                 name: 'Spoiler',
+//                 element: 'span',
+//                 classes: ['spoiler'],
+//             },
+//             {
+//                 name: 'Code (dark)',
+//                 element: 'pre',
+//                 classes: ['fancy-code', 'fancy-code-dark'],
+//             },
+//             {
+//                 name: 'Code (bright)',
+//                 element: 'pre',
+//                 classes: ['fancy-code', 'fancy-code-bright'],
+//             },
+//         ],
+//     },
+//     table: {
+//         contentToolbar: [
+//             'tableColumn',
+//             'tableRow',
+//             'mergeTableCells',
+//             'tableProperties',
+//             'tableCellProperties',
+//         ],
+//     },
+// }
+var Classic = {
     toolbar: {
         items: [
             'undo',
@@ -651,69 +611,7 @@ var full = {
         ],
         shouldNotGroupWhenFull: false,
     },
-    plugins: [
-        AccessibilityHelp,
-        Alignment,
-        Autoformat,
-        AutoImage,
-        Autosave,
-        Base64UploadAdapter,
-        BlockQuote,
-        Bold,
-        CloudServices,
-        Code,
-        Essentials,
-        FontBackgroundColor,
-        FontColor,
-        FontFamily,
-        FontSize,
-        GeneralHtmlSupport,
-        Heading,
-        HorizontalLine,
-        ImageBlock,
-        ImageCaption,
-        ImageInline,
-        ImageInsert,
-        ImageInsertViaUrl,
-        ImageResize,
-        ImageStyle,
-        ImageTextAlternative,
-        ImageToolbar,
-        ImageUpload,
-        Indent,
-        IndentBlock,
-        Italic,
-        Link,
-        LinkImage,
-        List,
-        ListProperties,
-        MediaEmbed,
-        Paragraph,
-        PasteFromOffice,
-        RemoveFormat,
-        SelectAll,
-        SpecialCharacters,
-        SpecialCharactersArrows,
-        SpecialCharactersCurrency,
-        SpecialCharactersEssentials,
-        SpecialCharactersLatin,
-        SpecialCharactersMathematical,
-        SpecialCharactersText,
-        Strikethrough,
-        Style,
-        Subscript,
-        Superscript,
-        Table,
-        TableCaption,
-        TableCellProperties,
-        TableColumnResize,
-        TableProperties,
-        TableToolbar,
-        TextTransformation,
-        TodoList,
-        Underline,
-        Undo,
-    ],
+    plugins: [],
     fontFamily: {
         supportAllValues: true,
     },
@@ -896,10 +794,10 @@ var full = {
     },
 };
 var CkEditorTypesObject = {
-    default: defaults,
-    easy: easy,
-    standard: standard,
-    full: full
+    // default: defaults,
+    Simple: Simple,
+    // standard: standard,
+    Classic: Classic
 };
 
 var LanguagesMap;
@@ -924,12 +822,15 @@ var LanguagesMap;
     LanguagesMap["vi"] = "vi";
 })(LanguagesMap || (LanguagesMap = {}));
 
+// import { CkEditorModeEnum } from '../enums/ck-editor-mode-enum';
 class SetCkEditorConfigsService {
     constructor() { }
     async get(input) {
-        let { language } = input;
+        let { language, type } = input;
         return new Promise(async (resolve, rejects) => {
-            let configs = CkEditorTypesObject['easy'];
+            let configs = CkEditorTypesObject[CkEditorModeEnum[type]];
+            let { AccessibilityHelp, Highlight, Alignment, Autoformat, AutoImage, Autosave, Base64UploadAdapter, BlockQuote, Bold, CloudServices, Code, Essentials, FontBackgroundColor, FontColor, FontFamily, FontSize, GeneralHtmlSupport, Heading, HorizontalLine, ImageBlock, ImageCaption, ImageInline, ImageInsert, ImageInsertViaUrl, ImageResize, ImageStyle, ImageTextAlternative, ImageToolbar, ImageUpload, Indent, IndentBlock, Italic, Link, LinkImage, List, ListProperties, MediaEmbed, Paragraph, PasteFromOffice, RemoveFormat, SelectAll, SpecialCharacters, SpecialCharactersArrows, SpecialCharactersCurrency, SpecialCharactersEssentials, SpecialCharactersLatin, SpecialCharactersMathematical, SpecialCharactersText, Strikethrough, Style, Subscript, Superscript, Table, TableCaption, TableCellProperties, TableColumnResize, TableProperties, TableToolbar, TextTransformation, TodoList, Underline, Undo } = await import('ckeditor5');
+            configs.plugins = [AccessibilityHelp, Highlight, Alignment, Autoformat, AutoImage, Autosave, Base64UploadAdapter, BlockQuote, Bold, CloudServices, Code, Essentials, FontBackgroundColor, FontColor, FontFamily, FontSize, GeneralHtmlSupport, Heading, HorizontalLine, ImageBlock, ImageCaption, ImageInline, ImageInsert, ImageInsertViaUrl, ImageResize, ImageStyle, ImageTextAlternative, ImageToolbar, ImageUpload, Indent, IndentBlock, Italic, Link, LinkImage, List, ListProperties, MediaEmbed, Paragraph, PasteFromOffice, RemoveFormat, SelectAll, SpecialCharacters, SpecialCharactersArrows, SpecialCharactersCurrency, SpecialCharactersEssentials, SpecialCharactersLatin, SpecialCharactersMathematical, SpecialCharactersText, Strikethrough, Style, Subscript, Superscript, Table, TableCaption, TableCellProperties, TableColumnResize, TableProperties, TableToolbar, TextTransformation, TodoList, Underline, Undo];
             configs.language = LanguagesMap[language];
             await import(`@ckeditor/ckeditor5-build-decoupled-document/build/translations/${LanguagesMap[language]}`);
             resolve(configs);
@@ -945,201 +846,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
-class CkEditorDomeComponent {
-    constructor() {
-        this.config = inject(ConfigStateService);
-        this.currentCulture = this.config.getOne('localization')?.currentCulture?.name;
-        this.Editor = ClassicEditor;
-        this._config = {
-            plugins: [Bold, Essentials, Italic, Paragraph, Undo],
-            toolbar: ['undo', 'redo', '|', 'bold', 'italic'],
-        };
-        this.configType = 'default';
-        this.editorValue = '<p>12233</p>';
-        this._SetCkEditorConfigsService = inject(SetCkEditorConfigsService);
-        this.lazyLoadService = inject(LazyLoadService);
-        this.subscriptionService = inject(SubscriptionService);
-        this._config_ck = CkEditorTypesObject['full'];
-    }
-    /**切换类型 */
-    switchType(type) {
-        this.configType = type;
-        this._config_ck = '';
-        setTimeout(async () => {
-            this.loadStyle();
-            let configs = await this._SetCkEditorConfigsService.get({
-                language: this.currentCulture,
-            });
-            this._config_ck = configs;
-        }, 0);
-    }
-    loadStyle() {
-        const loaded$ = this.lazyLoadService.load(LOADING_STRATEGY.AppendAnonymousStyleToHead('ckeditor5.css'));
-        this.subscriptionService.addOne(loaded$);
-    }
-    clearconfig() {
-        this._config = null;
-    }
-    /**加载完成 */
-    ckReady(editor) {
-        const element = editor.ui.getEditableElement();
-        const parent = element.parentElement;
-        parent.insertBefore(editor.ui.view.toolbar.element, element);
-    }
-    /**内容改变 */
-    ckChange({ editor }) {
-        const data = editor.getData();
-        this.editorValue = data;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: CkEditorDomeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.5", type: CkEditorDomeComponent, selector: "lib-ck-editor-dome", ngImport: i0, template: "<button class=\"btn btn-sm btn-primary mx-2 mb-3\" (click.stop)=\"switchType('easy')\">\u6781\u7B80</button>\r\n<button class=\"btn btn-sm btn-primary mx-2 mb-3\" (click.stop)=\"switchType('default')\">\u9ED8\u8BA4</button>\r\n<button class=\"btn btn-sm btn-primary mx-2 mb-3\" (click.stop)=\"switchType('standard')\">\u6807\u51C6</button>\r\n<button class=\"btn btn-sm btn-primary mx-2 mb-3\" (click.stop)=\"switchType('full')\">\u5B8C\u6574</button>\r\n\r\n<button class=\"btn btn-sm btn-primary mx-2 mb-3\" (click.stop)=\"clearconfig()\">\u6E05\u7A7A\u914D\u7F6E</button>\r\n\r\n<h3>\u81EA\u5B9A\u4E49\u914D\u7F6E</h3>\r\n<ckeditor #editor  [editor]=\"Editor\" *ngIf=\"_config_ck\" [(ngModel)]=\"editorValue\" [config]=\"_config\" ></ckeditor>\r\n\r\n<h3>\u7C7B\u578B</h3>\r\n<ckeditor #editor  [editor]=\"Editor\" *ngIf=\"_config_ck\" [(ngModel)]=\"editorValue\" [config]=\"_config_ck\"  (change)=\"ckChange($event)\" (ready)=\"ckReady($event)\"></ckeditor>\r\n\r\n{{editorValue}}", styles: [""], dependencies: [{ kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.StopPropagationDirective, selector: "[click.stop]", outputs: ["click.stop"] }, { kind: "component", type: i4.CKEditorComponent, selector: "ckeditor", inputs: ["editor", "config", "data", "tagName", "watchdog", "editorWatchdogConfig", "disableTwoWayDataBinding", "disabled"], outputs: ["ready", "change", "blur", "focus", "error"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: CkEditorDomeComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'lib-ck-editor-dome', template: "<button class=\"btn btn-sm btn-primary mx-2 mb-3\" (click.stop)=\"switchType('easy')\">\u6781\u7B80</button>\r\n<button class=\"btn btn-sm btn-primary mx-2 mb-3\" (click.stop)=\"switchType('default')\">\u9ED8\u8BA4</button>\r\n<button class=\"btn btn-sm btn-primary mx-2 mb-3\" (click.stop)=\"switchType('standard')\">\u6807\u51C6</button>\r\n<button class=\"btn btn-sm btn-primary mx-2 mb-3\" (click.stop)=\"switchType('full')\">\u5B8C\u6574</button>\r\n\r\n<button class=\"btn btn-sm btn-primary mx-2 mb-3\" (click.stop)=\"clearconfig()\">\u6E05\u7A7A\u914D\u7F6E</button>\r\n\r\n<h3>\u81EA\u5B9A\u4E49\u914D\u7F6E</h3>\r\n<ckeditor #editor  [editor]=\"Editor\" *ngIf=\"_config_ck\" [(ngModel)]=\"editorValue\" [config]=\"_config\" ></ckeditor>\r\n\r\n<h3>\u7C7B\u578B</h3>\r\n<ckeditor #editor  [editor]=\"Editor\" *ngIf=\"_config_ck\" [(ngModel)]=\"editorValue\" [config]=\"_config_ck\"  (change)=\"ckChange($event)\" (ready)=\"ckReady($event)\"></ckeditor>\r\n\r\n{{editorValue}}" }]
-        }] });
-
-const routes = [{
-        path: 'dome',
-        component: CkEditorDomeComponent,
-    }];
-class CkEditorRoutingModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: CkEditorRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.5", ngImport: i0, type: CkEditorRoutingModule, imports: [i1$1.RouterModule], exports: [RouterModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: CkEditorRoutingModule, imports: [RouterModule.forChild(routes), RouterModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: CkEditorRoutingModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [RouterModule.forChild(routes)],
-                    exports: [RouterModule],
-                }]
-        }] });
-
-class CkEditorConfig {
-    constructor(data) {
-        /**文件容器名称 */
-        // placeholder: any = new FormControl('', Validators.required);
-        this['Ckeditor.ImagesContainerName'] = ['', []];
-        /**多选 */
-        // placeholder: any = new FormControl('', Validators.required);
-        this['Ckeditor.InitialContent'] = ['', []];
-        if (data) {
-            for (const key in data) {
-                if (data.hasOwnProperty(key)) {
-                    this[key] = data[key];
-                }
-            }
-        }
-    }
-}
-
-class CkEditorConfigComponent {
-    constructor(fb) {
-        this.fb = fb;
-    }
-    set Entity(v) {
-        this._Entity = v;
-        this.dataLoaded();
-    }
-    set selected(v) {
-        this._selected = v || '';
-        // this.dataLoaded()
-    }
-    set type(v) {
-        this._type = v;
-        // this.dataLoaded()
-    }
-    // 
-    get formConfiguration() {
-        return this._Entity.get('formConfiguration');
-    }
-    async dataLoaded() {
-        // if (this.Entity && (this._selected || this._selected === '')) {
-        if (this._Entity && this._type) {
-            await this.AfterInit();
-            this.submitclick.nativeElement.click();
-        }
-    }
-    AfterInit() {
-        return new Promise((resolve, rejects) => {
-            this._Entity.setControl('formConfiguration', this.fb.group(new CkEditorConfig()));
-            if (this._selected && this._selected.formControlName == this._type) {
-                this.formConfiguration.patchValue({
-                    ...this._selected.formConfiguration,
-                });
-            }
-            resolve(true);
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: CkEditorConfigComponent, deps: [{ token: i1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.5", type: CkEditorConfigComponent, selector: "ck-editor-config", inputs: { Entity: "Entity", selected: "selected", type: "type" }, viewQueries: [{ propertyName: "submitclick", first: true, predicate: ["submitclick"], descendants: true, static: true }], ngImport: i0, template: "<form [formGroup]=\"_Entity\">\n    <div formGroupName=\"formConfiguration\">\n        <div class=\"mb-3\">\n            <label class=\"form-label\">{{'DigniteAbpDynamicFormsCkEditor::ImagesContainerName' | abpLocalization}}</label>\n            <input type=\"text\" class=\"form-control\" formControlName=\"Ckeditor.ImagesContainerName\">\n        </div>\n        <div class=\"mb-3\">\n            <label class=\"form-label\">{{'DigniteAbpDynamicFormsCkEditor::InitialContent' | abpLocalization}}</label>\n            <input type=\"text\" class=\"form-control\" formControlName=\"Ckeditor.InitialContent\">\n        </div>\n        <button type=\"submit\" (abpInit)=\"submitclick?.nativeElement?.click()\" style=\"display: none;\"\n            #submitclick></button>\n    </div>\n</form>", styles: [""], dependencies: [{ kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i2$1.InitDirective, selector: "[abpInit]", outputs: ["abpInit"] }, { kind: "directive", type: i3.ValidationGroupDirective, selector: "[formGroup],[formGroupName]", exportAs: ["validationGroup"] }, { kind: "directive", type: i3.ValidationDirective, selector: "[formControl],[formControlName]", exportAs: ["validationDirective"] }, { kind: "pipe", type: i2$1.LocalizationPipe, name: "abpLocalization" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: CkEditorConfigComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ck-editor-config', template: "<form [formGroup]=\"_Entity\">\n    <div formGroupName=\"formConfiguration\">\n        <div class=\"mb-3\">\n            <label class=\"form-label\">{{'DigniteAbpDynamicFormsCkEditor::ImagesContainerName' | abpLocalization}}</label>\n            <input type=\"text\" class=\"form-control\" formControlName=\"Ckeditor.ImagesContainerName\">\n        </div>\n        <div class=\"mb-3\">\n            <label class=\"form-label\">{{'DigniteAbpDynamicFormsCkEditor::InitialContent' | abpLocalization}}</label>\n            <input type=\"text\" class=\"form-control\" formControlName=\"Ckeditor.InitialContent\">\n        </div>\n        <button type=\"submit\" (abpInit)=\"submitclick?.nativeElement?.click()\" style=\"display: none;\"\n            #submitclick></button>\n    </div>\n</form>" }]
-        }], ctorParameters: () => [{ type: i1.FormBuilder }], propDecorators: { Entity: [{
-                type: Input
-            }], selected: [{
-                type: Input
-            }], type: [{
-                type: Input
-            }], submitclick: [{
-                type: ViewChild,
-                args: ['submitclick', { static: true }]
-            }] } });
-
-let isBase64UploadAdapter$1 = class isBase64UploadAdapter {
-    constructor(loader, ImagesContainerName, restService) {
-        this.reader = new FileReader();
-        this.Base64 = false;
-        this.createFile = (input, config) => this.restService.request({
-            method: 'POST',
-            url: '/api/file-explorer/files',
-            params: { containerName: input.containerName, cellName: input.cellName, directoryId: input.directoryId, entityId: input.entityId },
-            body: input.file,
-        }, { apiName: 'FileExplorer', ...config });
-        this.loader = loader;
-        this.ImagesContainerName = ImagesContainerName;
-        this.restService = restService;
-    }
-    upload() {
-        return new Promise((resolve, reject) => {
-            const reader = this.reader;
-            if (this.Base64) {
-                reader.addEventListener('load', () => {
-                    resolve({ default: reader.result });
-                });
-                reader.addEventListener('error', err => {
-                    reject(err);
-                });
-                reader.addEventListener('abort', () => {
-                    reject();
-                });
-                this.loader.file.then((file) => {
-                    reader.readAsDataURL(file);
-                });
-            }
-            else {
-                this.loader.file.then((file) => {
-                    var formData = new FormData();
-                    formData.append('file', file, file.name);
-                    this.createFile({
-                        file: formData,
-                        containerName: this.ImagesContainerName,
-                        directoryId: '',
-                        entityId: ''
-                    }).subscribe((response) => {
-                        resolve({ default: response.url });
-                    }, (error) => {
-                        reject(error);
-                    });
-                });
-            }
-        });
-    }
-};
-
 class CkEditorControlComponent {
     constructor() {
         this.config = inject(ConfigStateService);
@@ -1148,18 +854,17 @@ class CkEditorControlComponent {
         this.ckEditorValue = '';
         /**系统语言 */
         this.currentCulture = this.config.getOne('localization')?.currentCulture?.name;
-        this.Editor = ClassicEditor;
+        this.CkEditorModeEnum = CkEditorModeEnum;
         this.fb = inject(FormBuilder);
         /**字段配置列表 */
         this._fields = '';
-        this.languagesMap = LanguagesMap;
+        this.cdr = inject(ChangeDetectorRef);
         this._SetCkEditorConfigsService = inject(SetCkEditorConfigsService);
         this.lazyLoadService = inject(LazyLoadService);
         this.subscriptionService = inject(SubscriptionService);
         this.invalidfeedback = false;
         /**图片容器名称 */
         this.imagesContainerName = '';
-        this.loadckeditor();
     }
     onReady(editor) {
         let _this = this;
@@ -1197,16 +902,36 @@ class CkEditorControlComponent {
             this.ckEditorValue =
                 this._selected || this._fields.field.formConfiguration['Ckeditor.InitialContent'];
             this.setckeditorInput(this.ckEditorValue);
-            this.submitclick.nativeElement.click();
+            this.cdr.detectChanges(); // 手动触发变更检测
+            await this.loadckeditor();
+            this.submitclick?.nativeElement?.click();
         }
     }
     loadckeditor() {
+        let _that = this;
+        let formConfiguration = this._fields.field.formConfiguration;
         return new Promise(async (resolve) => {
-            this.loadStyle();
-            let configs = await this._SetCkEditorConfigsService.get({
-                language: this.currentCulture,
+            await import('ckeditor5').then(async (res) => {
+                this.loadStyle();
+                if (formConfiguration['Ckeditor.Mode'] == CkEditorModeEnum.Simple) {
+                    _that.Editor = res.InlineEditor;
+                }
+                else if (formConfiguration['Ckeditor.Mode'] == CkEditorModeEnum.Classic) {
+                    _that.Editor = res.ClassicEditor;
+                }
+                else {
+                    formConfiguration['Ckeditor.Mode'] = CkEditorModeEnum.Simple;
+                    _that.Editor = res.InlineEditor;
+                }
+                let configs = await _that._SetCkEditorConfigsService.get({
+                    language: _that.currentCulture,
+                    type: formConfiguration['Ckeditor.Mode']
+                });
+                if (!this.imagesContainerName) {
+                    configs?.toolbar?.items?.splice(configs?.toolbar?.items?.indexOf('insertImage'), 1);
+                }
+                _that.ckOptions = configs;
             });
-            this.ckOptions = configs;
             resolve(true);
         });
     }
@@ -1229,19 +954,17 @@ class CkEditorControlComponent {
                 ? this._selected
                 : this._fields.field.formConfiguration['Ckeditor.InitialContent'], ValidatorsArray);
             this.extraProperties.setControl(this._fields.field.name, newControl);
-            this.imagesContainerName = this._fields.field.formConfiguration['Ckeditor.ImagesContainerName'];
-            if (!this.imagesContainerName) {
-                this.ckOptions?.toolbar?.items?.splice(this.ckOptions?.toolbar?.items?.indexOf('insertImage'), 1);
-            }
+            this.imagesContainerName =
+                this._fields.field.formConfiguration['Ckeditor.ImagesContainerName'];
             resolve(true);
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: CkEditorControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.5", type: CkEditorControlComponent, selector: "ck-editor-control", inputs: { fields: "fields", parentFiledName: "parentFiledName", selected: "selected", entity: "entity" }, viewQueries: [{ propertyName: "submitclick", first: true, predicate: ["submitclick"], descendants: true, static: true }], ngImport: i0, template: "<form [formGroup]=\"_entity\">\n    <div formGroupName=\"extraProperties\">\n        <div class=\"mb-3\">\n            <label class=\"form-label\" *ngIf=\"_fields.displayName\">{{ _fields.displayName }}</label>\n            <ng-container *ngIf=\"ckOptions\">\n\n                <ckeditor [editor]=\"Editor\" *ngIf=\"Editor\" [config]=\"ckOptions\" (ready)=\"onReady($event)\"\n                    [formControlName]=\"_fields.field.name\">\n                </ckeditor>\n            </ng-container>\n            <small class=\"form-text text-muted d-block\"\n                *ngIf=\"_fields.field.description\">{{_fields.field.description}}</small>\n        </div>\n    </div>\n    <button type=\"submit\" style=\"display: none;\" #submitclick></button>\n</form>", styles: [""], dependencies: [{ kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i3.ValidationGroupDirective, selector: "[formGroup],[formGroupName]", exportAs: ["validationGroup"] }, { kind: "directive", type: i3.ValidationDirective, selector: "[formControl],[formControlName]", exportAs: ["validationDirective"] }, { kind: "component", type: i4.CKEditorComponent, selector: "ckeditor", inputs: ["editor", "config", "data", "tagName", "watchdog", "editorWatchdogConfig", "disableTwoWayDataBinding", "disabled"], outputs: ["ready", "change", "blur", "focus", "error"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.5", type: CkEditorControlComponent, selector: "ck-editor-control", inputs: { fields: "fields", parentFiledName: "parentFiledName", selected: "selected", entity: "entity" }, viewQueries: [{ propertyName: "submitclick", first: true, predicate: ["submitclick"], descendants: true, static: true }], ngImport: i0, template: "<form [formGroup]=\"_entity\">\n    <div formGroupName=\"extraProperties\">\n        <div class=\"mb-3\">\n            <label class=\"form-label\" *ngIf=\"_fields.displayName\">{{ _fields.displayName }}</label>\n            <ng-container *ngIf=\"ckOptions\">\n                <ckeditor class=\"form-textarea\" [editor]=\"Editor\" *ngIf=\"Editor\" [config]=\"ckOptions\" (ready)=\"onReady($event)\"\n                    [formControlName]=\"_fields.field.name\">\n                </ckeditor>\n            </ng-container>\n            <small class=\"form-text text-muted d-block\"\n                *ngIf=\"_fields.field.description\">{{_fields.field.description}}</small>\n        </div>\n    </div>\n    <button type=\"submit\" style=\"display: none;\" #submitclick></button>\n</form>", styles: ["@charset \"UTF-8\";:root .ck.ck-editor__editable_inline{min-height:160px!important}.ck.ck-editor__main>.ck-editor__editable{background:var(--bs-body-bg)!important}.ck.ck-toolbar,.ck.ck-button.ck-list-item-button,.ck.ck-button.ck-list-item-button.ck-on,.ck.ck-dropdown__panel{background:var(--bs-body-bg)!important}.ck.ck-editor__editable_inline{border-color:var(--ck-color-base-border)!important}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i4.ValidationGroupDirective, selector: "[formGroup],[formGroupName]", exportAs: ["validationGroup"] }, { kind: "directive", type: i4.ValidationDirective, selector: "[formControl],[formControlName]", exportAs: ["validationDirective"] }, { kind: "component", type: i4$1.CKEditorComponent, selector: "ckeditor", inputs: ["editor", "config", "data", "tagName", "watchdog", "editorWatchdogConfig", "disableTwoWayDataBinding", "disabled"], outputs: ["ready", "change", "blur", "focus", "error"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: CkEditorControlComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ck-editor-control', template: "<form [formGroup]=\"_entity\">\n    <div formGroupName=\"extraProperties\">\n        <div class=\"mb-3\">\n            <label class=\"form-label\" *ngIf=\"_fields.displayName\">{{ _fields.displayName }}</label>\n            <ng-container *ngIf=\"ckOptions\">\n\n                <ckeditor [editor]=\"Editor\" *ngIf=\"Editor\" [config]=\"ckOptions\" (ready)=\"onReady($event)\"\n                    [formControlName]=\"_fields.field.name\">\n                </ckeditor>\n            </ng-container>\n            <small class=\"form-text text-muted d-block\"\n                *ngIf=\"_fields.field.description\">{{_fields.field.description}}</small>\n        </div>\n    </div>\n    <button type=\"submit\" style=\"display: none;\" #submitclick></button>\n</form>" }]
+            args: [{ selector: 'ck-editor-control', template: "<form [formGroup]=\"_entity\">\n    <div formGroupName=\"extraProperties\">\n        <div class=\"mb-3\">\n            <label class=\"form-label\" *ngIf=\"_fields.displayName\">{{ _fields.displayName }}</label>\n            <ng-container *ngIf=\"ckOptions\">\n                <ckeditor class=\"form-textarea\" [editor]=\"Editor\" *ngIf=\"Editor\" [config]=\"ckOptions\" (ready)=\"onReady($event)\"\n                    [formControlName]=\"_fields.field.name\">\n                </ckeditor>\n            </ng-container>\n            <small class=\"form-text text-muted d-block\"\n                *ngIf=\"_fields.field.description\">{{_fields.field.description}}</small>\n        </div>\n    </div>\n    <button type=\"submit\" style=\"display: none;\" #submitclick></button>\n</form>", styles: ["@charset \"UTF-8\";:root .ck.ck-editor__editable_inline{min-height:160px!important}.ck.ck-editor__main>.ck-editor__editable{background:var(--bs-body-bg)!important}.ck.ck-toolbar,.ck.ck-button.ck-list-item-button,.ck.ck-button.ck-list-item-button.ck-on,.ck.ck-dropdown__panel{background:var(--bs-body-bg)!important}.ck.ck-editor__editable_inline{border-color:var(--ck-color-base-border)!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { fields: [{
                 type: Input
             }], parentFiledName: [{
@@ -1278,17 +1001,12 @@ function AddFieldControlGroup(array = []) {
 class CkEditorModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: CkEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.5", ngImport: i0, type: CkEditorModule, declarations: [CkEditorControlComponent,
-            CkEditorConfigComponent,
-            CkEditorDomeComponent], imports: [FormsModule,
-            CoreModule,
+            CkEditorConfigComponent], imports: [CoreModule,
             ThemeSharedModule,
-            ReactiveFormsModule,
             CkEditorRoutingModule,
             CKEditorModule] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: CkEditorModule, imports: [FormsModule,
-            CoreModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: CkEditorModule, imports: [CoreModule,
             ThemeSharedModule,
-            ReactiveFormsModule,
             CkEditorRoutingModule,
             CKEditorModule] }); }
 }
@@ -1298,17 +1016,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImpor
                     declarations: [
                         CkEditorControlComponent,
                         CkEditorConfigComponent,
-                        CkEditorDomeComponent,
                     ],
                     imports: [
-                        FormsModule,
                         CoreModule,
                         ThemeSharedModule,
-                        ReactiveFormsModule,
                         CkEditorRoutingModule,
                         CKEditorModule,
                     ],
-                    exports: []
                 }]
         }] });
 
@@ -1373,28 +1087,6 @@ class isBase64UploadAdapter {
     }
 }
 
-class SetCkeditorContentPipe {
-    constructor() {
-        this.sanitized = inject(DomSanitizer);
-    }
-    transform(value, ...args) {
-        if (value) {
-            value = value.replace(/<oembed url/ig, "<iframe   src").replace(/oembed>/ig, "iframe>");
-            value = value.replace(/<figure class="media"/ig, "<div").replace(/figure>/ig, "div>");
-        }
-        return this.sanitized.bypassSecurityTrustHtml(value);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: SetCkeditorContentPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.1.5", ngImport: i0, type: SetCkeditorContentPipe, isStandalone: true, name: "setCkeditorContent" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImport: i0, type: SetCkeditorContentPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'setCkeditorContent',
-                    standalone: true
-                }]
-        }] });
-
 /*
  * Public API Surface of ck-editor
  */
@@ -1403,5 +1095,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AddFieldControlGroup, CkEditorModule, CkEditorRoutingModule, CkEditorTypesObject, LanguagesMap, SetCkEditorConfigsService, SetCkeditorContentPipe, ckEditorFieldControlGroup, defaults, easy, full, getExcludeAssignControl, isBase64UploadAdapter, standard };
+export { AddFieldControlGroup, CkEditorModeEnum, CkEditorModeEnumOptions, CkEditorModule, SetCkEditorConfigsService, ckEditorFieldControlGroup, getExcludeAssignControl, isBase64UploadAdapter };
 //# sourceMappingURL=dignite-ng-expand.ck-editor.mjs.map