Ckeditor：根據需要顯示和隱藏內聯工具欄

我使用內聯Ckeditor來編輯內容。默認情況下，內聯編輯器通過雙擊與contenteditable="true"的div激活。當我點擊一個按鈕時，我想激活這個內聯編輯器，並且當我點擊另一個按鈕時隱藏它。下面是HTML代碼的例子：Ckeditor：根據需要顯示和隱藏內聯工具欄

<html> 
    <head> 
    <script src="ckeditor/ckeditor.js"></script> 
    </head> 
<body> 
    <div id="first" contenteditable="true">first</div> 
    <div id="second" contenteditable="true">second</div> 

    <input type="button" value="show inline editor"> 
    <input type="button" value="hide inline editor"> 
</body> 
</html>

的jsfiddle顯示了默認的行爲，我想有http://jsfiddle.net/vdRYL/

來源

2013-12-08 user2265529

結束這將是容易讓我們來解決這個問題，如果你能創造出CKEDITOR的默認行爲的jsfiddle（jsfiddle.net）。 – Rao

感謝您的回覆和編輯。這裏是jsfiddle：http://jsfiddle.net/vdRYL/ – user2265529

的CKEDITOR似乎被激活的contenteditable元素，而不是對focus編輯窗口什麼double-click。你可以做這樣的事情，讓您的按鈕來上班，

http://jsfiddle.net/nagendra_rao/vdRYL/1/

來源

2013-12-08 03:48:34 Rao

可以以隱藏工具欄使用focusManager.blur(true)。

http://jsfiddle.net/vdRYL/24/上的FocusManager這裏

var cke = CKEDITOR.inline('target'); 

var btnClose = document.getElementById('btnClose'); 
btnClose.addEventListener('click', function(event){ 
cke.focusManager.blur(true); 
});

來源

2015-09-10 06:59:04 GibboK

我們可以隱藏和顯示工具欄。我已經使用以下方式實現了此功能：

打開ckeditor.js文件。並粘貼下面的代碼在文件

$(document).ready(function() { 
    CKEDITOR.on('instanceReady', function (ev) { 
     document.getElementById(ev.editor.id + '_top').style.display = 'none'; 


     ev.editor.on('focus', function (e) { 
     document.getElementById(ev.editor.id + '_top').style.display = 'block'; 

     }); 
     ev.editor.on('blur', function (e) { 
     document.getElementById(ev.editor.id + '_top').style.display = 'none'; 

     }); 
    }); 
});

來源

2018-02-09 21:04:30 sAcH

Ckeditor：根據需要顯示和隱藏內聯工具欄

回答

相關問題