Question

我目前在我正在构建的webapp中使用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：半工作 因此，我已经设法通过使用＆＃39;焦点＆＃39;事件触发器如此：

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

然而，一旦编辑模糊不清，我似乎无法让它再次淡出。得到＆＃34;显示：无＆＃34;以编程方式应用于它。

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

很高兴Conor工作，这是完整的anwswer：

通过在模糊事件上动态添加样式表，例如＆＃34;始终显示＆＃34;，display: none;被覆盖。 javascript setTimeout可以在所需的模糊持续时间后删除此类。

HTML / JavaScript / CSS代码段（由于跨源框架而无法生效）：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

2 个答案: