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

Question

I'm currently using CKEditor in a webapp that I am building. 我目前正在构建的Web应用程序中使用CKEditor。 I'd like to have the Inline Toolbar fade in when the text box is focused and fade out when unfocused. 我想让“内联工具栏”在文本框被聚焦时淡入，而在未聚焦时淡出。 I'd normally just add a transition for this but the toolbar seems to be shown/hidden with the Visibility attribute added via a JS file which causes problems. 我通常只是为此添加一个过渡，但是工具栏似乎通过JS文件添加的Visibility属性被显示/隐藏，这会导致问题。

Does anyone have a good solution for fading the toolbar in and out? 有没有人能很好地解决工具栏淡入淡出的问题？

EDIT Adding startup code as requested : 编辑根据要求添加启动代码 ：

In my HTML I have a div which looks like the following: 在我的HTML中，我有一个div，如下所示：

<div id="editor" contenteditable="true"></div>

And then in mu .JS file I run the following code: 然后在mu .JS文件中运行以下代码：

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

    //More Code

    CKEDITOR.inline('editor');

    //More Code
}

EDIT 2: Got it half working So I've managed to get it fading in by using the 'focus' event trigger like so: 编辑2：使它工作了一半，所以我已经设法通过使用'focus'事件触发器使它逐渐消失：

    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);
    });

However I cannot seem to get it to fade out again as as soon as the Editor is 'blurred' it gets "Display: none" applied to it programmatically. 但是，一旦编辑器被“模糊化”，我似乎无法让它再次淡出，它会以编程方式应用于“显示：无”。

Answer 1

So thank you to DaniëlCamps and PrasadGayan for their help, with it I managed to create my own solution to the problem. 因此，感谢DaniëlCamps和PrasadGayan的帮助，在此基础上，我设法创建了自己的解决方案。

I added the following Focus and Blur event handlers after the Editor is initialised: 编辑器初始化后，我添加了以下Focus和Blur事件处理程序：

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);
});

And the Always-Display class looks like: 而且Always-Display类如下所示：

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

Answer 2

Glad it works Conor, here is the full anwswer: 很高兴它能起作用，这是完整的答案：

By dynamically adding a styleclass on the blur event, eg "always-display", the display: none; 通过在模糊事件上动态添加样式类，例如“ always-display”， display: none; is overwritten. 被覆盖。 A javascript setTimeout can remove this class after the desired blur duration. 所需的模糊持续时间后，javascript setTimeout可以删除此类。

HTML/JavaScript/CSS snippet (not live due to cross-origin frame): HTML / JavaScript / CSS代码段（由于跨域框架而无法使用）：

 var editor = CKEDITOR.replace( 'editor1' ); 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 () { //force CKEditor to be visible, by overwriting 'display:none' $('#cke_editor').addClass("always-display"); //attach fade effect $('#cke_editor').css({ 'opacity': '0' }); //remove override forcing visibility after fade effect has taken place setTimeout(function () { $('#cke_editor').removeClass("always-display"); }, 200); });

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

 <html> <head> <script src="//cdn.ckeditor.com/4.6.2/standard/ckeditor.js"></script> </head> <body> <textarea name="editor1" contenteditable="true"></textarea> <script> </script> </body> </html>

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

问题描述

2 个解决方案

解决方案1
0 2017-01-26 10:24:04

解决方案2
0 已采纳 2017-01-26 13:20:20

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

问题描述

2 个解决方案

解决方案1 0 2017-01-26 10:24:04

解决方案2 0 已采纳 2017-01-26 13:20:20

解决方案1
0 2017-01-26 10:24:04

解决方案2
0 已采纳 2017-01-26 13:20:20