本文介绍了如何在Triangle 2应用程序中集成Trix编辑器?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试将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编辑器?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

    10-10 01:20