javascript - iframe 中元素的 CKEditor 内联编辑器

标签 javascript html iframe ckeditor

在一个应用程序中,我在 iframe 中有内容可编辑的元素,我想将内联 CKEditor 应用于这些元素。它有效,除非我滚动 iframe,CKEditor 工具栏不随它滚动。是否有特殊标志或某种方式让工具栏随 iframe 内容而不是随父窗口滚动?此外,我想避免将 CKEditor 脚本添加到 iframe 中。

最佳答案

您可以通过使用与 iframe 大小相同且具有相对定位的容器元素包装 iframe 来实现这一点。

<div id="iframe-wrapper">
    <iframe>
        <body>
            <div contenteditable></div>
        </body>
    </iframe>
</div>

然后将每个 ckeditor 面板的位置移动到该容器元素中,绝对定位值将起作用。

var el = $('iframe').contents().find('[contenteditable]');
el.ckeditor();
el.ckeditorGet().on('instanceReady', function(){
    $('body > .cke_float').appendTo('#iframe-wrapper');
});

关于javascript - iframe 中元素的 CKEditor 内联编辑器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19416016/

相关文章:

javascript - 将 D3.js 7.0.0 与 Next.js 11.0.1 一起使用时,如何解决 "[ERR_REQUIRE_ESM]: Must use import to load ES Module"?

javascript - 嵌套元素和背景

javascript - 无法在网站框架内的 InputBox 中写入

javascript - 如何为accounts.google.com身份验证链接(OAuth)设置X-Frame-Options => ALLOWALL?

javascript - 处理在 iframe 内的新选项卡/窗口中打开

javascript - 如何在nodejs中过滤JSON

javascript - IE 遗漏标题 - angular $http

javascript - 如何使用 'prototype' 函数正确编码 javascript 属性和方法?

JQuery 将鼠标悬停在 map 位置上会更改位置大小

javascript - 垂直滚动图片库