Question

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

Answer 1

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

angular.json
在下面添加

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

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

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

}

Answer 2

如果您正在使用devextreme，我认为您可以考虑使用devextreme html编辑器 https://github.com/DevExpress/DevExtreme/releases https://js.devexpress.com/Documentation/18_2/ApiReference/UI_Widgets/dxHtmlEditor/

如何在角度2应用程序中集成trix-editor？

2 个答案: