Как интегрировать trix-редактор в приложение angular 2?

Question

Я пытаюсь использовать редактор Trix для моего углового приложения. Однако я не получаю никаких пакетов ресурсов /npm для установки редактора trix в приложении angular 2. Можете ли вы помочь мне с ресурсами / шагами для этого?

Answer 1

Для angular2+ тоже не могу найти. Просто установите это.

1. angular.json
   добавить ниже

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

2. прикрепите редактор в HTML, который вы хотите поместить.
   angular используется в качестве селектора, а трикс - в качестве целевого местоположения редактора.
   Это конфликт. так что нужна хитрость.

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

3. сделать trixComponent для дочернего html
   для трюка, нужно сделать компонент. получить элемент "редактор" из исходного 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, я думаю, вы можете использовать HTML-редактор devextreme https://github.com/DevExpress/DevExtreme/releases https://js.devexpress.com/Documentation/18_2/ApiReference/UI_Widgets/dxHtmlEditor/