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

Question

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

Answer 1

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

1. angular.json
   在下面添加

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

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

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

3. 为子 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/