Textarea is created without id in ckeditor4-angular causing the missed possibility to replace configuration at runtime

gcorsaro commented 4 years ago

BUG

I'm using ckeditor4-angular component. My definition is: <ckeditor #ckeditortextarea id="myEditor" editorUrl="{{envs.ckeditorUrl}}" tagName="textarea" (dataChange)="change($event)" (blur)="touched($event)" (ready)="ready($event)"></ckeditor>

and @ViewChild ('ckeditortextarea') ckEdCmp: CKEditorComponent;

On ready event I want to make some changes in the default configuration. According to documentation, this should be done by using CKEDITOR.replace. I expected to use:

CKEDITOR.replace('myEditor', /*new config object with modifications*/); but I have the error:

TypeError: Cannot read property 'forEach' of undefined
    at FormArray.push../node_modules/@angular/forms/fesm5/forms.js.FormArray._forEachChild (forms.js:4131)
    at FormArray.push../node_modules/@angular/forms/fesm5/forms.js.FormArray._setUpControls (forms.js:4147)
    at new FormArray (forms.js:3887)
    at Object.clone (ckeditor.js:24)
    at Object.clone (ckeditor.js:25)
    at new a (ckeditor.js:276)
    at a (ckeditor.js:368)
    at Object.CKEDITOR.replace (ckeditor.js:372)

So I tried to pass the textarea element name as first parameter: CKEDITOR.replace(this.ckEdCmp.instance.element.name, /*new config object with modifications*/); but name is undefined (as well as the id) and I have the error: [CKEDITOR] Error code: editor-incorrect-element.

I also tried to pass the textarea element: this.CKEDITOR.replace(this.ckEdCmp.instance.element, /*new config object with modifications*/); but in this case I have the error: [CKEDITOR] Error code: editor-element-conflict

Expected result

I expected to replace some settings on the default configuration (which is loaded by config.js file) but apparently there's no way unless (hopefully) textarea name can be set.

Actual result

Textarea name can't be set and only default configuration can be loaded.

Other details

Please note that I can't customize my configuration inside config.js because I don't have access to angular models at that level.

Browser: Chrome
OS: Windows 10
CKEditor version: 4.14

gcorsaro commented 4 years ago

I could find a workaround to fulfil my goal but it's really ugly. First of all, my goal is to customize the toolbar according to some conditions. What I was trying to do above was to change the default config but, as depicted, it didn't work.

So what I did is:

I bounded the ckeditor config parameter to a local variable <ckeditor #ckeditortextarea [config]="localConfig">
I moved the whole toolbar configuration from config.js to another angular file which I imported in my component.
I created a getter for the localConfig variable in which I customize the toolbar.
During the initialization, ckeditorAngular component reads the localConfig parameter and gets my customizations. This happens before the ready event.

Apparently once the component is created there's no way to change the configuration. But before the initialization I don't have any way to get the config.js settings (instance is still undefined) and customize it. As I said this workaround is quite ugly because it forces me to split configurations in two places (or totally externalize it by defeating the utility of the config.js file). You should add a way to "refresh" the configuration also when the instance is already created as it can be done by CKEDITOR.replace method in normal (not angular) usage.

Dumluregn commented 4 years ago

Hi! Sorry for a bit late response. I'm afraid you misunderstood the CKEDITOR.replace() method - it is used turn target DOM element into a CKEditor instance. It isn't possible to change the editor config in already created instance, so it is also not possible in the Angular component version - what you have to do is destroy a component and create it again.

ckeditor / ckeditor4-angular