CKEDITOR wie fokussiere ich Unschärfe Elemente

Question

Hallo ich bin neu bei CKEDTIOR, und ich habe ein paar Probleme. Ich möchte fokussieren, wenn Sie auf das ckeditor-Element klicken und nicht fokussieren, wenn Sie darauf klicken. Können Sie bitte helfen ?

Answer 1

Guter Anfang, aber ich sehe, es gibt das Problem mit blur Teil. Es ist gut, Komponente API und im Fall von CKEditor zu verwenden ist blur event:

ausgelöst, wenn die Editor-Instanz des Eingabefokus verliert.

So würde ich mit dem Code gehen wie:

[ 'thesolution', 'thechallenge' ].forEach(function(selector) { 

    // Attach focus listener. 
    document.querySelector('#' + selector).addEventListener('focus', function() { 

    // Create editor. 
    var editor = CKEDITOR.replace(selector); 

    // When instance is ready - focus it. 
    editor.on('instanceReady', function() { 
     editor.focus(); 
    }); 

    // When editor losses focus - destroy it. 
    editor.on('blur', function() { 
     editor.destroy(); 
    }); 
    });  
}); 

für HTML wie:

<textarea name="thechallenge" id="thechallenge" rows="10" cols="80"> 
    <p>Foo Bar Baz</p> 
</textarea> 

<textarea name="thesolution" id="thesolution" rows="10" cols="80"> 
    <p>Foo Bar Baz</p> 
</textarea> 

Live demo on codepen

So für jedes Textfeld gibt es 4 einfachen Schritten:

1. Attach focus Listener (native oder Sie können jQuery verwenden).
2. Initialisierung der Editorinstanz im Fokus initialisieren.
3. Wenn der Editor bereit ist - fokussieren Sie ihn (er wird nicht nach der Initialisierung voreingestellt sein).
4. Auf Blur zerstören Editor-Instanz. Hier

Answer 2

ist eine andere Lösung:

for (instance in CKEDITOR.instances) { 
    var editor = CKEDITOR.instances[instance]; 
    if (editor) { 
     // Call showToolBarDiv() when editor get the focus 
     editor.on('focus', function (event) { 
      showToolBarDiv(event); 
     }); 

     // Call hideToolBarDiv() when editor loses the focus 
     editor.on('blur', function (event) { 
      hideToolBarDiv(event); 
     }); 

     //Whenever CKEditor get focus. We will show the toolbar span. 
     function showToolBarDiv(event) { 
      //'event.editor.id' returns the id of the spans used in ckeditr. 
      $('#' + event.editor.id + '_top').show(); 
     } 

     function hideToolBarDiv(event) { 
      //'event.editor.id' returns the id of the spans used in ckeditr. 
      $('#' + event.editor.id + '_top').hide() 
     } 
    } 
} 

});