如何在Triangle 2应用程序中集成Trix编辑器? [英] How do I integrate trix-editor in an angular 2 app?

问题描述

我正在尝试将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上附加附件编辑器.

将角度用作选择器，将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);
    }
  });
}

}

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