angular - 如何在Triangle 2应用程序中集成Trix编辑器？

我正在尝试将Trix编辑器用于我的 Angular 应用程序。但是，我没有任何资源/npm软件包在angular 2应用中安装trix编辑器。您能为我提供所需的资源/步骤吗？

最佳答案

我也找不到angular2 +的任何东西。
只需进行设置即可。

angular.json
在下面添加

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

您想要放置在HTML上的附加编辑器。
Angular 用作选择器，三 Angular 形用作编辑器的目标位置。
发生冲突。所以需要一些技巧。

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

将trixComponent用作子html
对于技巧，需要制作组件。
从母亲html接收“editor”元素。

@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);
    }
  });
}

}