Javascript 如何使CKEditor内联工具栏淡入淡出？

我目前正在构建的Web应用程序中使用CKEditor。我希望内联工具栏在文本框聚焦时淡入淡出。我通常只会为此添加一个转换，但工具栏似乎显示/隐藏了通过JS文件添加的可见性属性，这会导致问题

有没有人有一个很好的方法来解决工具栏淡入淡出的问题

根据请求编辑添加启动代码：

在我的HTML中有一个div，如下所示：

然后在mu.JS文件中运行以下代码：

$(document).ready(function () {
    CKEDITOR.disableAutoInline = true;

    //More Code

    CKEDITOR.inline('editor');

    //More Code
}

编辑2：让它工作一半 因此，我通过使用“焦点”事件触发器使其逐渐消失，如下所示：

    var editor = CKEDITOR.instances.editor;
    $('#cke_editor').css({ 'opacity': '0' });
    editor.on('focus', function () {
        $('#cke_editor').css({ 'opacity': '0', "transition": "opacity 0.2s linear" });
        setTimeout(function () { $('#cke_editor').css({ 'opacity': '1' }) }, 200);
    });

---

但是，我似乎无法让它在编辑器“模糊”后立即淡出，它会以编程方式应用于“显示：无”。

因此，感谢DaniëlCamps和Prasagayan的帮助，我成功地用它创建了我自己的问题解决方案

在编辑器初始化后，我添加了以下焦点和模糊事件处理程序：

var editor = CKEDITOR.instances.editor;

editor.on('focus', function () {
    $('#cke_editor').css({ 'opacity': '0', "transition": "opacity 0.2s linear" });
    setTimeout(function () { $('#cke_editor').css({ 'opacity': '1' }) }, 200);
});

editor.on('blur', function () {
    $('#cke_editor').addClass("always-display");
    $('#cke_editor').css({ 'opacity': '0' });
    setTimeout(function () { $('#cke_editor').removeClass("always-display"); }, 200);
});

“始终显示”类如下所示：

.always-display{
    display: block !important;
}

---

很高兴它能起作用，康纳，下面是完整的答案：

通过在模糊事件上动态添加样式类，例如“始终显示”，显示：无被覆盖。javascript

setTimeout

可以在所需的模糊持续时间后删除此类

HTML/JavaScript/CSS代码段（由于跨源帧而不活动）：

var editor=CKEDITOR.replace（'editor1'）；
editor.on（'focus'，function（）{
$（'cke_editor'）.css（{'opacity'：'0'，'transition:“opacity 0.2s linear”}）；
setTimeout（函数（）{$（'cke_editor'）.css（{'opacity'：'1'}），200）；
});
编辑器.on（'blur'，function（）{
//通过覆盖“显示：无”，强制CKEditor可见
$（'cke_editor'）.addClass（“始终显示”）；
//附加淡入效果
$（'cke_editor'）.css（{'opacity'：'0'}）；
//移除发生淡入效果后强制可见性的覆盖
setTimeout（函数（）{$（'#cke_editor'）.removeClass（“始终显示”）；}，200）；
});
。始终显示{
显示：块！重要；
}

能否发送启动的版本和代码？。是否也尝试使用ck编辑器事件列表@PrasadGayan我已经用我的入会密码更新了帖子。我在标准版本中使用CKEditor 4。我将尝试使用focus/blur函数并返回报告。这里有一个可行的想法：您可以在blur事件上动态添加一个styleclass，例如“always display”，并在这个类的CSS中说：。always display{display:block！important；}。此外，添加一个javascript setTimeout，在模糊持续时间后删除该类。这是在某处直播还是你能凑一把小提琴？@DaniëlCamps谢谢！你的想法奏效了！我添加了一个答案，并为您添加了积分。