时间戳

首页 > 解决方案 > 在特定位置将 HTML 元素插入 CKEditor 4

ckeditor - 在特定位置将 HTML 元素插入 CKEditor 4

问题描述

我很难找到一种以编程方式将数据插入我的 ckeditor 实例的方法。

我想要完成的一个例子：

<html>
  <body>
  <div id="top-area"></div>
  <div id="mid-area"></div> 
  <div id="bottom-area"></div>
  </body>
</html>

单击按钮时，我试图在 div 中添加 id 中间区域的数据。我什至可以用我拥有的数据替换那个 div。

当我使用

.insertHtml(
        '<div>This is a test insert for a random area</div>',
    );

它只是在最顶部填充那个 div。

我试过用 div 来定位

document.getElementById('mid-area')

但即使这样也不会返回任何值。

任何帮助表示赞赏。谢谢！

标签： ckeditorckeditor4.x

解决方案

由于我使用的是 ckeditor4-angular 包，因此我可以通过以下方式找到元素并设置 html

@ViewChild('editor', { static: false }) component;

const element = this.component.instance.document.getById('mid-area');
element.setHtml('<div>This is a test insert for a random area</div>');

我不会将此标记为答案，以防其他人提出另一种效果更好的解决方案。谢谢！

推荐阅读