ckeditor zamień textarea używając nazwy klasy z różnymi konfiguracjami paska narzędziowego

Question

Korzystam z następującego kodu, aby dodać cedenta do moich stron.

<textarea class="ckeditor" name="editor1"></textarea> 

Chciałbym zdefiniować kilka konfiguracji pasków narzędzi, ponieważ nie wszystkie obszary tekstowe w mojej aplikacji potrzebują pełnego paska narzędzi. Dostosowałem domyślną konfigurację paska narzędzi do moich potrzeb, ale chciałbym podzielić to jeszcze bardziej na bardziej podstawowy pasek narzędzi dla niektórych z moich tekstów.

Czy istnieje sposób, aby to zrobić, jeśli używam atrybutu class, aby ustawić cedenta?

Answer 1

Nie można mieć różnych konfiguracji edytorów utworzonych według nazwy klasy. W takim przypadku rozważany jest tylko globalny CKEDITOR.config.

Nadal istnieje proste obejście tego problemu. Po pierwsze, umieścić ten skrypt w górnej części dokumentu:

<script> 
    CKEDITOR.replaceClass = null; // Disable replacing by class 
</script> 

Teraz określić właściwość data-custom-config (jak config.customConfig) dla każdego <textarea> chcesz zastąpić tak:

<textarea class="ckeditor" data-custom-config="myCustomConfig.js"> 
    Moo 
</textarea> 

Wreszcie użyć następującego kodu aby ręcznie zastąpić edytory według nazwy klasy (zakładając, że twoja klasa to ckeditor). Kod ten będzie zastąpić wszystkie pola tekstowe klasy ckeditor z instancji CKEditor napędzana przez konfiguracji określonej w atrybucie data-custom-config:

var textareas = Array.prototype.slice.call(document.getElementsByClassName('ckeditor')), 
    textarea, cfg, customCfg; 

while ((textarea = textareas.pop())) { 
    textarea = new CKEDITOR.dom.element(textarea); 
    cfg = {}; 

    if ((customCfg = textarea.getAttribute('data-custom-config'))) 
     cfg[ 'customConfig' ] = customCfg; 

    CKEDITOR.replace(textarea.getId(), cfg) 
} 

A teraz przychodzi wisienka na szczycie. Umieścić swój własny pasek narzędzi config w myCustomConfig.js:

CKEDITOR.editorConfig = function(config) { 
    config.toolbar = [ 
     { name: 'basicstyles', items: [ 'Bold', 'Italic' ] } 
    ]; 
}; 

Oczywiście można zmodyfikować ten kod do angażowania jQuery dla łatwiejszej selekcji elementów, należy użyć jakiegoś przedmiotu dosłowne zamiast config.customConfig i tak dalej. To tylko prezentacja tego, jak można rozwiązać problem.