如何将 trix-editor 集成到 angular 2 应用程序中? [英] How do I integrate trix-editor in an angular 2 app?

问题描述

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

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?

推荐答案

我也找不到任何适用于 angular2+ 的方案.只需设置即可.

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

1. angular.json
   在下面添加

1. angular.json
   add below

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

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

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>

为子html制作trixComponent
为了技巧，需要制作组件.接收来自母 HTML 的编辑器"元素.

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

}

这篇关于如何将 trix-editor 集成到 angular 2 应用程序中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！