Question

我正在尝试动态创建嵌入组件。基本上，当用户单击工具栏按钮时，我希望它在光标位置插入嵌入组件的HTML。除了实际获取HTML本身以外，其他一切都很好。

这是我在文档上遵循的指南

在小节角度元素下，也许我在这里使用了错误的内容。但是，如果有人有其他建议，我很想听听。

这是负责生成嵌入的代码

    link(event)
    {
       const embed = document.createElement('embed-card')  as NgElement & WithProperties<{embedSrc: string}>;
       embed.embedSrc = 'https://github.com/itteco/iframely';
       console.log(embed);
       console.log(embed.innerHTML);
       this.myckeditor.instance.insertHtml(embed.innerHTML);
    }

这是嵌入组件本身

@Component({
  selector: 'embed-card',
  templateUrl: './embed.component.html',
  styleUrls: ['./embed.component.css'],
  providers: [EmbedService]
})

export class EmbedComponent implements OnInit, OnChanges {

  @Input()
  embedSrc: string;
  embedData: any[];

  constructor(
    private route: ActivatedRoute,
    private router: Router,
    private embedService: EmbedService
  ) { }

  getEmbedJsonData() {
    this.route.queryParams.subscribe((params: Params) => {
      this.embedService.GetMetaTagData(this.embedSrc)
        .subscribe((data: any) => {
          this.embedData = data;
          console.log(this.embedData);
        }
        );
    });
  }

  ngOnInit() {
    this.getEmbedJsonData();
  }

  ngOnChanges() {
    //console.log("it got changed");
    this.getEmbedJsonData();
  }
}

以及用于嵌入此处的随附HTML

<div *ngIf = "embedData.length != 0" class = "media embed-box">
    <a [ngStyle] = "{

                     'background-image': 'url('+ embedData.thumbnail_url +')',
                     'width' : '218.816px',
                     'height': '120px' 
                    }"></a>


    <!-- <img class = "embed-thumbnail" [src]='embedData.thumbnail_url'/> -->
    <div class = "embed-body" style = " margin-left: 10px;">
        <div class = "media-body">
            <h5 class = "mt-0"> {{ embedData.title }} </h5>
            <p class = "description block-with-text"> {{ embedData.description }} </p>
        </div>
    </div>    
</div>

是的，我确实正在运行服务器，因此肯定会收到嵌入的元数据。

当我运行它时，innerHTML为null。嵌入卡对象如下图所示

https://snag.gy/FjNDct.jpg

更新：

这似乎确实是我应该可以在Google上找到的东西，但是我进行了大量的搜索，但没有发现有关我的问题的任何信息。也许我只是搜索不正确，但是如果有人可以帮助我，那已经有5天了。

如何在ckeditor中动态创建角度自定义元素？

0 个答案: