angular - 如何将 trix-editor 集成到 Angular 2 应用程序中？

Question

我正在尝试为我的 Angular 应用程序使用 trix 编辑器。但是，我没有获得任何资源/npm 包来在 angular 2 应用程序中安装 trix 编辑器。你能帮我提供资源/步骤吗？

Answer 1

我也找不到任何 angular2+。只需设置即可。

1. angular.json
   在下面添加

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

2. 在您要放置的 HTML 上附加编辑器。
   angular 用作选择器，trix 用作编辑器的目标位置。
   它冲突。所以需要一些技巧。

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

3. 为子 html 制作 trixComponent
   为了技巧，需要制作组件。从母 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);
       }
     });
   }
   
   }