Closed zbvyas closed 4 years ago
ma2ciek
commented
4 years ago Hi @zbvyas,
Could you share your tsconfig.json? Maybe your resolution system differs as the import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic'; doesn't import the editor. You could also log this object to find out what is it exactly.
zbvyas
commented
4 years ago Thanks for the fast reply @ma2ciek , the tsconfig.json is as follows:
{
"compilerOptions": {
"declaration": false,
"emitDecoratorMetadata": true
"experimentalDecorators" true,
"lib": ["es6", "dom"],
"module": "es6",
"moduleResolution": "node",
"sourceMap": true,
"target": "es5",
},
"exclude": [
"spec",
"node_modules",
"vendor",
"public"
],
"compileOnSave": false
}and console.log(this.Editor) definitely doesn't seem right...
Module{_esModule: true, Symbol(Symbol.toStringTag): "Module")Hmm. it looks correct, but something changes the module resolution system. I guess it's a duplicate of https://github.com/ckeditor/ckeditor5-angular/issues/122 and you should use import ClassicEditor from '@ckeditor/ckeditor5-build-classic'; Could you try it?
zbvyas
commented
4 years ago import ClassicEditor from '@ckeditor/ckeditor5-build-classic';The above results in: Error: [ts] Module ''@ckeditor/ckeditor5-build-classic'' has no default export
import { ClassicEditor } from '@ckeditor/ckeditor5-build-classic';The above results in: Error: [ts] Module ''ckeditor/ckeditor5-build-classic'' has no exported member 'ClassicEditor'
ma2ciek
commented
4 years ago Does it happen in both, production and non-production build?
I've found this webpack issue - https://stackoverflow.com/questions/54818030/unable-to-import-webpack-bundled-umd-library-as-an-es6-import with a workaround. However I'm still don't know why it happens to you.
ma2ciek
commented
4 years ago Also, do you have defined typings for the @ckeditor/ckeditor5-build-classic package?
zbvyas
commented
4 years ago This is from my dev (local) environment, I have not tried running this code in production since it's not working locally...
Not sure I totally understand/follow the workaround you posted? I don't think I'd want to access the editor via window ?
I have a typings.d.ts file which looks like this:
declare module '@ckeditor/ckeditor5-build-classic' {}Could you try to change it to:
declare module '@ckeditor/ckeditor5-build-classic' {
const ClassicEditorBuild: any;
export default ClassicEditorBuild;
}It will allow TS to import the default export instead.
And change to import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
zbvyas
commented
4 years ago That seemed to have done something, it changed the error from " Error: [ts] Module ''@ckeditor/ckeditor5-build-classic'' has no default export"
to this...
export 'default' (imported as 'ClassicEditor') was not found in '@ckeditor/ckeditor5-build-classic'
ma2ciek
commented
4 years ago Do you have an option to somehow share a part of the application with this editor? I can't reproduce this error and I'm out of ideas what could have gone wrong...
ma2ciek
commented
4 years ago Not sure I totally understand/follow the workaround you posted? I don't think I'd want to access the editor via window ?
This seems to be a last resort solution only.
zbvyas
commented
4 years ago Do you have an option to somehow share a part of the application with this editor? I can't reproduce this error and I'm out of ideas what could have gone wrong...
What do you mean share a part of the application with this editor? Share my source code with you all...or? No great way to do that unfortunately
ma2ciek
commented
4 years ago What do you mean share a part of the application with this editor? Share my source code with you all...or? No great way to do that unfortunately
Without steps to reproduce the issue, I'm rather unable to help. I've been trying to reproduce this issue in https://github.com/ma2ciek/ckeditor5-angular-test/tree/i/146 but with no luck.
zbvyas
commented
4 years ago What do you mean share a part of the application with this editor? Share my source code with you all...or? No great way to do that unfortunately
Without steps to reproduce the issue, I'm rather unable to help. I've been trying to reproduce this issue in https://github.com/ma2ciek/ckeditor5-angular-test/tree/i/146 but with no luck.
Understood - but your example is using Angular CLI and v6, I am not using CLI - I am using webpack as my bundler. This is a Rails/Angular app which uses Webpack.
e.g.
rails new <app-name> --webpack=angular
I'll try reproducing in a new project and link to my GitHub repo.
ma2ciek
commented
4 years ago Since the application is bundled by the custom webpack, then I guess that this error might be caused by the babel or another code transpiler. I'd check also target: 'es6' in tsconfig.json.
petarblazevski
commented
4 years ago @ma2ciek here is an example on stackblitz. Just open the console and you will see the issue. The example uses the latest Angular CLI 8.x
ma2ciek
commented
4 years ago Hi @petarblazevski,
This is a different issue, Stackblitz uses a different module resolution strategy - your issue is a duplicate of https://github.com/ckeditor/ckeditor5-angular/issues/122#issuecomment-508665643.
petarblazevski
commented
4 years ago @ma2ciek ahh I see. My bad. With a fresh angular install locally, using Angular CLI, I was getting the following error ERROR TypeError: Cannot read property 'create' of undefined. I solved it by changing the import to this
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
Maybe the docs should be updated
ma2ciek
commented
4 years ago Maybe the docs should be updated
Hm, I could mention that in case of such error the above import should be checked as well. But it's hard to maintain in docs the whole available configuration matrix. On the other hand, the stackblitz example in docs could be valuable.
Edit: I moved a follow-up to https://github.com/ckeditor/ckeditor5-angular/issues/151.
ma2ciek
commented
4 years ago I'm closing this issue due to the lack of activity.
zbvyas
commented
4 years ago sorry for the inactivity, but I had better luck with ngx-quill, it’s way easier to use and 0 issues with setup. Recommended for others as well. https://github.com/KillerCodeMonkey/ngx-quill
mosesweb
commented
4 years ago I am having the same issue and I believe I am not alone. Same issue as described here: https://stackoverflow.com/questions/59498902/ckeditor5-angular8-typeerror-this-editor-create-is-not-a-function. Not sure what to do as I keep getting
core.js:4081 ERROR Error: Uncaught (in promise): TypeError: this.editor.create is not a function
TypeError: this.editor.create is not a function
at CKEditorComponent._callee2$ (ckeditor.component.ts:275)
at tryCatch (runtime.js:45)
at Generator.invoke [as _invoke] (runtime.js:274)
at Generator.prototype.
songoo
commented
3 years ago Have same issue, on vue3 after generating from online generator after adding "Table cell properties" and "Table properties", since I wanted to change table collumn width.
raoshahid799
commented
3 years ago getting same error " this.editor.create is not a function creator" i am using custom build generated from online
songoo
commented
3 years ago (After excluding "Table cell properties" and "Table properties" in generator, it worked)
raoshahid799
commented
3 years ago i removed the Pagination plugin from custom build its started working, Title plugin disable the editor's toolbar so i excluded too.
ma2ciek
commented
3 years ago I guess that you added the Watchdog feature which should not be included in the build used by integrations.
After adding the mentioned plugins (Table cell properties, Table properties, Pagination) the editor works fine (however the Pagination plugin requires the license key and the configuration to be passed).
raoshahid799
commented
3 years ago Hello i created tutorial video for custom build from online builder and Github and integrated in Angular 10 might be it will someone here is video URL https://youtu.be/HsjCkvEvQhA
aosorio9559
commented
3 years ago I used the online builder and I keep getting this error message:
ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'rootName' of undefined
TypeError: Cannot read property 'rootName' of undefined
at ckeditor.js:5319
at ckeditor.js:649
at n (ckeditor.js:656)
at An._setUpBindToBinding (ckeditor.js:674)
at Object.using (ckeditor.js:649)
at new fa (ckeditor.js:5319)
at Jb.Hc (ckeditor.js:7504)
at Jb.dd [as constructor] (ckeditor.js:8520)
at new Jb (ckeditor.js:13735)
at ckeditor.js:8534
at resolvePromise (zone.js:832)
at resolvePromise (zone.js:784)
at zone.js:894
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (core.js:28161)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
at drainMicroTaskQueue (zone.js:601)I imported the build/ckeditor.js into my Angular component as follows:
import * as Editor from "../../../../ckeditor5/build/ckeditor";
//...
export class CreateComponent implements OnInit {
editor = Editor;
ckeditorContent = "<p>Hello, world</p>";
}This is the template
<ckeditor [editor]="editor" [(ngModel)]="ckeditorContent"> </ckeditor>This is my tsconfig.json file
{
"compileOnSave": false,
"compilerOptions": {
"allowJs": true,
"importHelpers": true,
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"module": "esnext",
"target": "es6",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"esnext",
"dom"
]
}
}@aosorio9559
same issue mentioned in this thread follow this link
https://github.com/ckeditor/ckeditor5-angular/issues/20
raoshahid799
commented
3 years ago this is my ts config of Angular 9 @aosorio9559
`{ "compileOnSave": false, "compilerOptions": { "downlevelIteration": true, "importHelpers": true, "outDir": "./dist/out-tsc", "baseUrl": "src", "sourceMap": true, "declaration": false, "moduleResolution": "node", "emitDecoratorMetadata": true, "experimentalDecorators": true }, "allowJs": true, "target": "es2015", "typeRoots": [ "node_modules/@types" ], "lib": [ "es2016", "dom" ], "module": "esnext" }, "angularCompilerOptions": { "enableIvy": false }
} `
id1945
commented
3 years ago https://stackblitz.com/edit/ngx-summernote
I spent a few days searching for a solution but it couldn't, and finally I switched to using ngx-summernote It was great.
It allows uploading base64 images and resizing images
mossykazemi
commented
2 years ago I had the same issue, tried a lot of ways to use Online Builder custom editor inside my Angular app.
First you have to set "strict": false, inside tsconfig.json to fix finding imported file type error.
Finally it get fixed when i removed watchdog plugin and build again.
psrikar045
commented
6 months ago core.js:6210 ERROR Error: Uncaught (in promise): TypeError: this.editor.create is not a function
TypeError: this.editor.create is not a function
at CKEditorComponent._callee2$ (ckeditor-ckeditor5-angular.js:254:50)
at tryCatch (ckeditor-ckeditor5-angular.js:2:1)
at Generator. Data from htmlheading 1
'
public config ={
toolbar: {
items: [
'exportPDF', 'exportWord', '|',
'findAndReplace', 'selectAll', '|',
'heading', '|',
'bold', 'italic', 'strikethrough', 'underline', 'code', 'subscript', 'superscript', 'removeFormat', '|',
'bulletedList', 'numberedList', 'todoList', '|',
'outdent', 'indent', '|',
'undo', 'redo',
'-',
'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', 'highlight', '|',
'alignment', '|',
'link', 'insertImage', 'blockQuote', 'insertTable', 'mediaEmbed', 'codeBlock', 'htmlEmbed', '|',
'specialCharacters', 'horizontalLine', 'pageBreak', '|',
'textPartLanguage', '|',
'sourceEditing'
],
shouldNotGroupWhenFull: true
},
list: {
properties: {
styles: true,
startIndex: true,
reversed: 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' }
]
},
placeholder: '',
fontFamily: {
options: [
'default',
'Arial, Helvetica, sans-serif',
'Courier New, Courier, monospace',
'Georgia, serif',
'Lucida Sans Unicode, Lucida Grande, sans-serif',
'Tahoma, Geneva, sans-serif',
'Times New Roman, Times, serif',
'Trebuchet MS, Helvetica, sans-serif',
'Verdana, Geneva, sans-serif'
],
supportAllValues: true
},
fontSize: {
options: [10, 12, 14, 'default', 18, 20, 22],
supportAllValues: true
},
htmlSupport: {
allow: [
{
name: /.*/,
attributes: true,
classes: true,
styles: true
}
]
},
htmlEmbed: {
showPreviews: true
},
link: {
decorators: {
addTargetToExternalLinks: true,
defaultProtocol: 'https://',
toggleDownloadable: {
mode: 'manual',
label: 'Downloadable',
attributes: {
download: 'file'
}
}
}
},
mention: {
feeds: [
{
marker: '@',
feed: [
'@apple', '@bears', '@brownie', '@cake', '@cake', '@candy', '@canes', '@chocolate', '@cookie', '@cotton', '@cream',
'@cupcake', '@danish', '@donut', '@dragée', '@fruitcake', '@gingerbread', '@gummi', '@ice', '@jelly-o',
'@liquorice', '@macaroon', '@marzipan', '@oat', '@pie', '@plum', '@pudding', '@sesame', '@snaps', '@soufflé',
'@sugar', '@sweet', '@topping', '@wafer'
],
minimumCharacters: 1
}
]
},
removePlugins: [
'CKBox',
'CKFinder',
// 'EasyImage',
'RealTimeCollaborativeComments',
'RealTimeCollaborativeTrackChanges',
'RealTimeCollaborativeRevisionHistory',
'PresenceList',
'Comments',
'TrackChanges',
'TrackChangesData',
'RevisionHistory',
'Pagination',
'WProofreader',
'MathType'
]
}
package.json for version:
"@ckeditor/ckeditor5-angular": "^4.0.0",
iam using a custom build downloaded from the online builder
@Reinmar @ma2ciek
I am following the steps from the documentation, here. And I continuously get the following error:
app.module.ts
app.component.ts
app.component.html
<ckeditor [editor]="Editor" data="<p>Hello, world!</p>"></ckeditor>This is an Angular v7 application using Webpack, and the following ckeditor packages: