Browse Source

Fixes after rebase.

Maciej Bukowski 6 years ago
parent
commit
422012b137
1 changed files with 23 additions and 49 deletions
  1. 23 49
      docs/builds/guides/frameworks/angular.md

+ 23 - 49
docs/builds/guides/frameworks/angular.md

@@ -297,7 +297,6 @@ Then, add it in the `angular.json` configuration file.
 }
 ```
 
-<<<<<<< HEAD
 ### Setting the placeholder
 
 To display {@link features/editor-placeholder the placeholder} in the main editable element simply set the `placeholder` field in the CKEditor 5 component configuration:
@@ -313,37 +312,22 @@ export class MyComponent {
 }
 ```
 
-=======
 ## Accessing the CKEditor API from an Angular Component
 
-The `<ckeditor>` component will provide all the functionality needed for most use cases.  In 
+The `<ckeditor>` component will provide all the functionality needed for most use cases.  In
 cases where access to the Javascript-level {@link api CKEditor API} is needed
-it there are multiple methods.
+it is easy to access with an additional step.
 
-The primary method is to provide a hook into the `<ckeditor>`'s `(onReady)' event as follows:
-
-```html
-<ckeditor (ready)="onReady($event)">
-```
-and in the Component:
-
-```ts
-onReady( editor ) {
-	editor.model.insertContent('>> Editor is ready!');
-	this.editor = editor;   // for access by other instance functions
-}
-````
-
-Alternatively the editor can be accessed using a variable scoped to the Angular `<ckeditor>` 
-component as follows:
+To do this, assign the Angular `<ckeditor>` component to a locally scoped variable as
+follows:
 
 ```html
 	<ckeditor #editor1 [editor]="Editor" [config]="ckconfig"
 			  [(ngModel)]="text" name="editcontent"></ckeditor>
 ```
 
-The `editor1` variable can then be referenced to other component events such as when a
-related button is clicked:
+You can then refer to that variable as needed in any method call within the component
+such as:
 
 ```html
 	<button type="button" (click)="doPasteSomething(editor1)">Do Someting</button>
@@ -358,32 +342,30 @@ In the component the target function will look like this:
   }
 ```
 
-This method may be convienent in the case where the template has multiple `<ckeditor>`
-components on it.
-
-Also the Angular `editor1` template variable may also be accessed with an
-`@ViewChild`-decorated variable declaration. 
-
-Regardless of the method by which it is obtained, the resulting `editor` object may
-be used as documented by the API.
+The operations performed may be anything that is defined and allowable by the API.
 
+Note that the Angular `editor1` template variable may also be accessed with an
+`@ViewChild`-decorated variable declaration.  The method in the example, however,
+will be preferable in the case where there is more than one `<ckeditor>` element on
+the page.  Also, if the `<ckeditor>` element is inside an `*ngIf` structure the `@ViewChild`
+declared variable may be inadvertently undefined.
 
 ## Implementing an Upload Adapter in an Angular Application
 
-An Upload Adapter can be used with CKEditor so that when a user adds an image 
+An Upload Adapter can be used with CKEditor so that when a user adds an image
 to a document it is encoded as a link to the image.  The image itself is stored
 separately from the document.   When images are large or numerous this results
 in noticable improvement in performance over the default behavior.  Read about custom
-UploadAdapters {@link framework/guides/deep-dive/upload-adapter here}. 
+UploadAdapters {@link framework/guides/deep-dive/upload-adapter here}.
 
-The first step is to create an Upload Adapter.  This can be done in the same file where the 
+The first step is to create an Upload Adapter.  This can be done in the same file where the
 component that will use it.  Alternatively this can have its own file and be
 imported.
 
 This class will be instantiated each time that CKEditor needs it.  Note that
 the functions in this class will run outside an `NgZone` which means that
 if it makes changes to variables bound to HTML elements, the shadow-DOM logic
-in the Angular framework won't detect those changes.  
+in the Angular framework won't detect those changes.
 
 The instance property `loader` is the primary interface between the UploadAdapter
 and the CKEditor instance.
@@ -392,14 +374,12 @@ and the CKEditor instance.
 class UploadAdapter {
   private loader;
   private url;
-  private http: HttpClient;
 
   private sub: Subscription;
 
-  constructor(loader, url, http) {
+  constructor(loader, url) {
     this.loader = loader;
     this.url = url;
-    this.http = http; 
   }
 
   upload() {
@@ -427,12 +407,12 @@ class UploadAdapter {
         });
     });
   }
-  
+
   imageURL(id) {
      // RETURN THE URL WHERE THE SUCCESSFULY UPLOADED IMAGE
      // CAN BE RETRIEVED WITH AN HTTP GET REQUEST
   }
-  
+
   httpPostMediaReq(formReq: FormData): Observable<any> {
       const options: {
         observe: 'events';
@@ -445,7 +425,7 @@ class UploadAdapter {
       };
       const request = new HttpRequest(
         'POST', this.url, formReq, options);
-      return this.http.request(request);  `
+      return this.http.request(request);
     }
 
   abort() {
@@ -461,19 +441,15 @@ will generate an UploadAdapter as needed:
 ```ts
   MyUploadAdapterPlugin(editor) {
     editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
-      return new UploadAdapter(loader, '/image', http);  // MODIFY FOR YOUR SERVER
+      return new UploadAdapter(loader, '/image');  // MODIFY FOR YOUR SERVER
     };
   }
 ```
 
 The second parameter is the URL where the image will be sent.  This will need
-to have everything the `imageURL` function in the UploadAdpater needs to 
+to have everything the `imageURL` function in the UploadAdpater needs to
 generate a complete URL.
 
-The third parameter `http` needs to be an instance of of `HttpClient` imported
-from `@angular/common/http`.  This object will be used by the upload adapter
-to communicate to the back end server.
-
 Next, we need to tell CKEditor where the Plugin can be found.  This is done
 using the `extraPlugins` element in the configuration object, which can
 be used without rebuilding the standard build you are using.  The following
@@ -495,13 +471,11 @@ Then it can be used in the `<ckeditor>` component as follows:
 
 Note the use of a closure in the `extraPlugins` array in the configuration.
 This is done so that the `MyUploadAdapterPlugin` function will have access
-to the properties of the component instance that spawned it.  Most important
-to this is the instance of `HttpClient` that the upload adapter will use.
+to the properties of the component instance that spawned it.
 
 At this point your UploadAdapter should be invoked any time the user pastes
 or drag-and-drops an image into the `<ckeditor>` window.
 
->>>>>>> Updates to angular.md
 ## Localization
 
 The CKEditor 5 component can be localized in two steps.