How do I integrate trix-editor in an angular 2 app?

Question

I am trying to use trix editor for my angular app. However, I am not getting any resources/npm packages to install trix editor in an angular 2 app. Can you help me with the resources/steps to do so?

Answer 1

I also can not find any for angular2+. Just set it up.

1. angular.json
   add below

   "styles": [
       "node_modules/trix/dist/trix.css"
    ],
   "scripts": [
       "node_modules/trix/dist/trix.js"
    ]
   

2. attach editor at HTML you want to put it.
   angular using as selector and trix using as target location of editor.
   It conflict. so need some trick.

   <form>
     <input id="x" type="hidden" name="content">
     <trix-editor #trixEditor class="trix-content" input="x"
               [editor]="trixEditor"></trix-editor>
   </form>
   

3. make trixComponent for child html
   for trick, need to make component. receivce 'editor' element from mother html.

   @Component({
   // tslint:disable-next-line:component-selector
   selector: 'trix-editor',
   templateUrl: './trix.component.html'
   })
   export class TrixComponent implements OnInit {
   
   @Input() editor: any;
   
   constructor() {
   }
   
   ngOnInit() {
     const element: any = document.querySelector('trix-editor');
     console.log(element.editor.getDocument());
     element.addEventListener('trix-attachment-add', (event) => {
       if (event.attachment.file) {
          console.log(event);
       }
     });
   }
   
   }