ng2-ckeditor
ng2-ckeditor copied to clipboard
Change CKEditor config does not reflect
I need to support RTL text and LTR text with ckeditor.
Then
public responsibilities = 'Angular CkEditor';
public editorConfig = {}
ngOnInit(): void {
let removeButtons: string = "exportPdf,Source,Templates,Save,NewPage,Print,Replace,Scayt,SelectAll,Form,Radio,TextField,Textarea,Select,Button,ImageButton"
this.editorConfig = {
allowedContent: true,
contentsLangDirection: "ltr",
forcePasteAsPlainText: true,
removePlugins: "easyimage, cloudservices, exportpdf,dialog,tableselection,scayt",
extraPlugins: `${'divarea'}`,
removeButtons: removeButtons,
baseFloatZIndex: 9999999999,
timestamp: +new Date,
language: 'en'
}
}
app.component.html:
<ckeditor required class="editor form-control input-sm w-100" [(ngModel)]="responsibilities" name="responsibilities"
id="insert-editor" [config]="editorConfig" [readonly]="false" debounce="500">
</ckeditor>
<br />
<button type="button" (click)="refreshConfig('rtl')">
Refresh CKEditor Config - (RTL)
</button>
<button type="button" (click)="refreshConfig('ltr')">
Refresh CKEditor Config - (LTR)
</button>
NOTE: based on this question I used timestamp, which does not work
Code to change config:
refreshConfig(type: "rtl" | "ltr" = "ltr") {
type == "rtl" ? this.rtlConfig() : this.ltrConfig();
}
private rtlConfig() {
this.editorConfig = {
...this.editorConfig,
language: 'fa',
contentsLangDirection: "rtl",
timestamp: +new Date
}
}
private ltrConfig() {
this.editorConfig = {
...this.editorConfig,
language: 'en',
contentsLangDirection: "ltr",
timestamp: +new Date
}
}
NOTE
if set language
to fa
and contentsLangDirection
to rtl
in ngOnInit hook
or set language
to en
and contentsLangDirection
to ltr
it works.