如何使CKEditor內聯工具欄淡入和淡出？

Question

我目前正在構建的Web應用程序中使用CKEditor。 我想讓“內聯工具欄”在文本框被聚焦時淡入，而在未聚焦時淡出。 我通常只是為此添加一個過渡，但是工具欄似乎通過JS文件添加的Visibility屬性被顯示/隱藏，這會導致問題。

有沒有人能很好地解決工具欄淡入淡出的問題？

編輯根據要求添加啟動代碼 ：

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

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

然后在mu .JS文件中運行以下代碼：

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

    //More Code

    CKEDITOR.inline('editor');

    //More Code
}

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

但是，一旦編輯器被“模糊化”，我似乎無法讓它再次淡出，它會以編程方式應用於“顯示：無”。

Answer 1

因此，感謝DaniëlCamps和PrasadGayan的幫助，在此基礎上，我設法創建了自己的解決方案。

編輯器初始化后，我添加了以下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);
});

而且Always-Display類如下所示：

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

Answer 2

很高興它能起作用，這是完整的答案：

通過在模糊事件上動態添加樣式類，例如“ always-display”， display: none; 被覆蓋。 所需的模糊持續時間后，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(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