将媒体编辑器添加到Angular项目

Question

好的，我正在尝试将一个媒体编辑器集成到我的angular项目中，但它似乎不起作用，下面是我的代码：

import { Component, ViewChild, ElementRef } from '@angular/core';
import MediumEditor from 'medium-editor';

@Component({
  selector: 'app-root',
  template: `<div #media></div>`,
})

export class AppComponent {
  @ViewChild('media') media: ElementRef;

  constructor() {}

  ngAfterViewInit() {
    const edit = this.media.nativeElement;
    const editor = new MediumEditor(edit);
  }
}

我将以下css添加到我的styles.css文件中

@import url('https://cdn.jsdelivr.net/npm/medium-editor@latest/dist/css/medium-editor.min.css');
@import url('https://cdn.jsdelivr.net/npm/medium-editor@latest/dist/css/themes/default.css');

我不确定问题出在哪里，但媒体编辑器似乎根本没有出现。

Answer 1

我知道现在回答这个问题已经很晚了，但希望这能有所帮助。我最近在angular的medium-editor上工作，我关注了这篇文章Integrate Medium Editor，我的组件是这样的：

​

import { Component, OnInit, AfterContentInit, ViewChild, ElementRef } from '@angular/core';
declare var MediumEditor:any;

@Component({
  selector: 'app-create',
  templateUrl: './create.component.html',
  styleUrls: ['./create.component.css']
})
export class CreateComponent implements OnInit, AfterContentInit {
  editor:any;
  
  @ViewChild('editable', { static: true })
  editable!: ElementRef;

   BUTTONS = [               'bold','italic','underline','subscript','superscript','anchor','quote','pre','orderedlist','unorderedlist','indent',
    'justifyLeft','justifyCenter','justifyRight','justifyFull','h1','h2','h3','h4','h5','h6']

constructor() { }

ngAfterContentInit(): void {
  this.editor = new MediumEditor(this.editable.nativeElement, {
    paste: {
      /* This example includes the default options for paste,
         if nothing is passed this is what it used */
      forcePlainText: false,
      cleanPastedHTML: true,
      cleanReplacements: [],
      cleanAttrs: ['class', 'style', 'dir','name'],
      cleanTags: ['meta'],
      unwrapTags: []
    },
    toolbar: {
      /* These are the default options for the toolbar,
          if nothing is passed this is what is used */
      allowMultiParagraphSelection: true,
      buttons: this.BUTTONS,
      diffLeft: 0,
      diffTop: -10,
      firstButtonClass: 'medium-editor-button-first',
      lastButtonClass: 'medium-editor-button-last',
      // relativeContainer: null,
      standardizeSelectionStart: false,
      static: false,
      /* options which only apply when static is true */
      align: 'center',
      sticky: false,
      updateOnEmptySelection: false
    }
  });
}

ngOnInit() {
  }

}

在上面提到的帖子中，他们使用了AfterViewInit，但我不得不用AfterContentInit替换它，以删除我的控制台中的一些讨厌的错误。

​

我的模板代码是这样的：

​

<div class="container mt-3 ">
  <div class="row d-flex justify-content-center">
    <div #editable class='col-md-6' style="min-height: 85vh"></div>
    <div *ngIf="editor" class="col-md-6 shadow" [innerHTML]="editor.elements[0].innerHTML"></div>
  </div>
</div>

​

瞧！

​

​