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

【问题标题】：How do I integrate trix-editor in an angular 2 app?如何将 trix-editor 集成到 Angular 2 应用程序中？
【发布时间】：2018-09-25 21:36:48
【问题描述】：

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

【问题讨论】：

标签： angular npm angular2-template angular2-forms trix

【解决方案1】：

如果你使用的是devextreme，我想你可以考虑使用devextreme html 编辑器 https://github.com/DevExpress/DevExtreme/releases https://js.devexpress.com/Documentation/18_2/ApiReference/UI_Widgets/dxHtmlEditor/

【讨论】：

【解决方案2】：

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

angular.json
在下面添加

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

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

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

为子 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);
    }
  });
}

}

【讨论】：