Как я могу заставить панель инструментов CKEditor Inline затухать?

В настоящее время я использую CKEditor в webapp, который я создаю. Я хотел бы, чтобы Inline Toolbar исчезал, когда текстовое поле фокусируется и исчезает, когда оно не сфокусировано. Обычно я просто добавляю переход для этого, но панель инструментов кажется показанной/скрытой с атрибутом Visibility, добавленным через JS-файл, который вызывает проблемы.Как я могу заставить панель инструментов CKEditor Inline затухать?

Есть ли у кого-нибудь хорошее решение для угасания панели инструментов?

EDIT Добавление кода запуска по запросу:

В моем HTML У меня есть DIV, который выглядит следующим образом:

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

, а затем в мю файл .js я бегу следующие код:

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

    //More Code 

    CKEDITOR.inline('editor'); 

    //More Code 
}

EDIT 2: Есть половину Workin г Так что мне удалось получить его выцветания с помощью «фокуса» триггер события, как так:

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

Однако я не могу показаться, чтобы заставить ее исчезнуть снова, как, как только редактор ' blurred 'он получает «Display: none», применяемый к нему программным способом.

источник

2017-01-20 Conor Watson

вы можете отправить версию издания & код начала ?. также попробуйте с списком событий ck editor? http://docs.ckeditor.com/#!/api/CKEDITOR.focusManager –

@PrasadGayan Я обновил сообщение с моим кодом инициации. Я использую CKEditor 4 со стандартной сборкой. Я попробую использовать функции focus/blur и отчитаться. –

Вот идея, которая может сработать: вы можете добавить динамический класс styleclass на событие размытия, например. * «always-display» *, а в CSS для этого класса говорят что-то вроде: * .always-display {display: block! important; } *. Кроме того, добавьте javascript * setTimeout *, чтобы удалить класс после продолжительности размытия. –

Рад это работает Конора, здесь является полным ответом:

Динамическое добавление стиля в событие размытия, например «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>

источник

2017-01-26 13:20:20

Так что спасибо Даниэль Кампс и Прасад Гаян за помощь, с которой мне удалось создать собственное решение проблемы.

Я добавил следующее FOCUS и размытость обработчики событий после Редактор инициализируется:

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-дисплей выглядит следующим образом:

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

источник

2017-01-26 10:24:04

Как я могу заставить панель инструментов CKEditor Inline затухать?

ответ

Смежные вопросы