Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

SkawaCkeditorComponent #61

Open
alescdb opened this issue Dec 10, 2019 · 4 comments
Open

SkawaCkeditorComponent #61

alescdb opened this issue Dec 10, 2019 · 4 comments

Comments

@alescdb
Copy link

alescdb commented Dec 10, 2019

Hi,

I'm trying to get skawa-ckeditor to work but I get an error.

Dart VM version: 2.6.1 (Unknown timestamp) on "linux_x64"
  skawa_components: ^1.2.1
  angular: ^6.0.0-alpha+1
  angular_components: ^0.14.0-alpha+1

I've tried with ckeditor v4.7.0 (like in the skawa examples) and v4.13.1

It seems ckeditor can't find the textarea in the DOM when called from ngAfterViewInit()
I've tried to call CKEditor.replace() in ngAfterViewChecked() and it seems to work OK.

Nice work btw :-)
@alescdb
Copy link
Author

alescdb commented Dec 10, 2019 •
edited

Error with ckeditor v4.13.1
image

Error with ckeditor v4.7.0
image

Edit : With 4.7.0 even in ngAfterViewChecked() I get the same error, but it works with 4.13.1

@valakis
Copy link
Collaborator

valakis commented Dec 17, 2019

Hello in your usecase did you use ddc and does your application non default basehref setted?

@alescdb
Copy link
Author

alescdb commented Dec 17, 2019

ddc and <base href="/"> (which is correct).
I've created a blank stagehand web-angular project and I've added skawa-ckeditor and it works without problem.
It might be because I'm using a routes...

I will try to reproduce with a simple project...

@alescdb
Copy link
Author

alescdb commented Dec 18, 2019

It seems to be router related, here is a very simple project to reproduce :

main.dart

import 'package:angular/angular.dart';
import 'package:angular_components/angular_components.dart';
import 'package:angular_router/angular_router.dart';
import 'package:skawa_components/skawa_components.dart';
import 'main.template.dart' as self;

@GenerateInjector([
  routerProvidersHash,
])
final InjectorFactory injector = self.injector$Injector;

void main() {
  runApp(
    self.AppComponentNgFactory,
    createInjector: injector,
  );
}


final route_home = RoutePath(path: 'home', useAsDefault: true);
final route_welcome = RoutePath(path: 'welcome');

@Injectable()
class Routes {
  RouteDefinition get home => _home;
  RouteDefinition get welcome => _welcome;

  static final _home = RouteDefinition(
    routePath: route_home,
    component: self.HomeComponentNgFactory,
  );
  static final _welcome = RouteDefinition(
    routePath: route_welcome,
    component: self.WelcomeComponentNgFactory,
  );

  final List<RouteDefinition> all = [
    _home,
    _welcome,
  ];
}

@Component(
  selector: 'home-component',
  template: '<h1>Home</h1>',
)
class HomeComponent {
}

@Component(
  selector: 'welcome-component',
  template: '<skawa-ckeditor editorName="basic_editor"  configUrl="/ckeditor/basic_config.js"></skawa-ckeditor>',
  directives: [
    SkawaCkeditorComponent,
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
)
class WelcomeComponent {
}


@Component(
  selector: 'my-app',
  template: '''<a [routerLink]="routes.home.toUrl()" routerLinkActive="active">Home</a>
               <a [routerLink]="routes.welcome.toUrl()" routerLinkActive="active">Welcome</a>
               <div class="container"><router-outlet [routes]="routes.all"></router-outlet></div>''',
  directives: [
    routerDirectives,
    HomeComponent,
    WelcomeComponent,
  ],
  providers: [
    materialProviders,
    ClassProvider(Routes),
  ],
)
class AppComponent {
  final Routes routes;

  AppComponent(this.routes) ;
}

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">

    <title>editor</title>
    <base href="/">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/png" href="favicon.png">
    <script defer src="https://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.7.0/ckeditor.js"></script>
    <script defer src="main.dart.js"></script>
  </head>
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

pubspec.yaml

environment:
  sdk: '>=2.7.0 <3.0.0'

dependencies:
  angular: ^6.0.0-alpha+1
  angular_components: ^0.14.0-alpha+1
  angular_router: ^2.0.0-alpha+22
  skawa_components: ^1.2.1

dev_dependencies:
  build_runner: ^1.6.0
  build_web_compilers: ^2.3.0

I've copied the ckeditor from the skawa exemples.

Results when you (try to) navigate to "Welcome" :

dart_sdk.js:99585 EXCEPTION: TypeError: Cannot read property 'getEditor' of undefined
STACKTRACE: 
https://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.7.0/ckeditor.js 322:377  a
https://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.7.0/ckeditor.js 327:445  replace
package:skawa_components/ckeditor/ckeditor.dart 77:40                      new
package:skawa_components/ckeditor/ckeditor.dart 51:43                      ngAfterViewInit
package:editor/welcome_component/welcome_component.template.dart 72:42     detectChangesInternal
package:angular/src/core/linker/views/component_view.dart 147:7            detectChanges
package:angular/src/core/linker/views/host_view.dart 189:19                detectChangesInternal
package:angular/src/core/linker/views/host_view.dart 154:7                 detectChanges
package:angular_router/src/directives/router_outlet_directive.dart 124:19  <fn>
dart:sdk_internal 19758:21                                                 putIfAbsent
package:angular_router/src/directives/router_outlet_directive.dart 119:30  prepare
package:angular_router/src/router/router_impl.dart 296:32                  _resolveStateForOutlet$
dart:sdk_internal 32183:33                                                 onValue
package:angular/src/core/zone/ng_zone.dart 156:18                          <fn>
dart:sdk_internal 31450:14                                                 runUnary
package:angular/src/core/zone/ng_zone.dart 153:18                          [_runUnary]
dart:sdk_internal 28107:27                                                 <fn>
package:angular/src/core/zone/ng_zone.dart 129:11                          <fn>
package:angular/src/core/zone/ng_zone.dart 144:18                          <fn>
dart:sdk_internal 31444:14                                                 run
package:angular/src/core/zone/ng_zone.dart 141:18                          [_run]
dart:sdk_internal 28557:9                                                  <fn>```

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@alescdb @valakis