Pytanie Kompilacja CKEditor 4 (minify i uglify)


W naszym procesie budowania (przy użyciu pomruków) łączymy, minimalizujemy i pakujemy wszystkie nasze skrypty w jeden (również w znaczeniu pojedynczego żądania).

Teraz CKEditor 4 wydaje się używać podejścia ładującego styl modułu.

Czy ktokolwiek może mi powiedzieć, jak dołączyć CKEditor 4 do projektu ze wszystkimi niezbędnymi źródłami, więc nie będzie dynamicznego ładowania później?


24
2018-03-08 18:46


pochodzenie




Odpowiedzi:


CKEditor działa w dwóch trybach:

  1. W trybie deweloperskim (źródłowym):

    1. dołączasz ckeditor.js plik,
    2. ładuje wszystkie podstawowe pliki,
    3. ładuje się config.js (możesz to wyłączyć, ustawiając config.customConfig do wartości falsyfikacji),
    4. ładuje zestaw plików stylów, chyba że ustawisz config.stylesSet do false (od 4.1RC) lub zestaw stylów (ustawienie bezpośrednie),
    5. sprawdza, które wtyczki ma załadować,
    6. ładuje wtyczki i zależności tych wtyczek,
    7. ładuje pliki językowe wtyczek,
    8. inicjuje wszystkie wtyczki,
    9. w międzyczasie załadowano kilka plików stylów (kilka dla edytora UI i jeden dla zawartości, chyba że jest to edytor wbudowany) i pliki ikon (jeden na przycisk),
    10. i jest gotowy!
    11. ale jeśli otworzysz okno dialogowe, to załaduje plik JS okna dialogowego; to samo dotyczy np. wklej z filtru słów, który jest ładowany na żądanie; chodzi o to, że te rzeczy nie są wymagane na początku i są dość ciężkie, więc lepiej je załadować później.
  2. W trybie wydania (kompilacji), który można utworzyć za pomocą budowniczy online, albo ustawia konstruktora lub twórca dev dostępny bezpośrednio w dev repo, rzeczy są zoptymalizowane:

    1. dołączasz ckeditor.js plik,
    2. zawiera wszystkie podstawowe pliki i wszystkie pliki wtyczek dołączone do twojej kompilacji
    3. config.js i styles.js pliki są pobierane osobno, ale podobnie jak w trybie programowania można zapisać te 2 żądania HTTP,
    4. plik jednego języka jest załadowany tłumaczeniami dla wszystkich wtyczek zawartych w kompilacji,
    5. wszystkie wtyczki są inicjowane,
    6. jeden plik arkusza stylów dla edytora UI i jeden dla zawartości (chyba że to edytor wbudowany) są załadowane plus jeden pasek ikon,
    7. i jest gotowy!
    8. pliki dialogowe i wklejanie z pliku filtru słów są ładowane na żądanie.

Uwaga: wszystkie pliki JS i CSS są zminimalizowane w trybie zwolnienia.

Możesz spróbować zoptymalizować kilka rzeczy.

  1. Możesz spróbować połączyć ckeditor.js z plikami językowymi, dialogami i plikami filtrów PSW - wszystkie pliki JS mogą być łączone razem AFAIK.
  2. Plik arkusza stylów edytora interfejsu użytkownika może być prawdopodobnie połączony z arkuszami stylów strony, ale musisz znaleźć sposób, aby zapobiec ładowaniu go przez samego redaktora.
  3. Arkusz stylów zawartości - możesz go usunąć, nawet jeśli używasz edytora w ramce, ale musisz zaprojektować zawartość za pomocą pełna strona funkcja (niezalecane).
  4. Nie można łączyć pasków ikon z paskiem.

To wszystko, jak sądzę. Myślę, że domyślnie kompilacja CKEditor jest bardzo dobrze zoptymalizowana. Możesz poprawić niektóre rzeczy, ale nie zaoszczędzisz dużo czasu i stracisz niektóre funkcje, takie jak automatyczne rozpoznawanie języka.


45
2018-03-08 23:29



Wow, wielkie dzięki! - kraftwer1
@Reinmar w trybie deweloperskim, czy możesz wyjaśnić, jak załadować niezasłużoną wersję (Big 'n Slow) jądra i wtyczek? - claya
Sprawdź próbki. Wystarczy dołączyć ckeditor.js - zajmie się resztą. - Reinmar
Chciałbym móc głosować więcej niż raz :) - Vitalii Zurian
Dziękuję, uratowałeś mi wiele frustracji! - qqilihq


Zaimplementowałem sugestie 2 i 3 z Odpowiedź Reinmara - Oto jak to zrobiłem:

  1. "Plik arkusza stylów interfejsu edytora interfejsu użytkownika może być prawdopodobnie połączony z plikiem   arkusze stylów strony, ale musisz znaleźć sposób, aby zapobiec redaktorowi   od załadowania go samemu "
var swap = CKEDITOR.skin.loadPart;
CKEDITOR.skin.loadPart = function(res, callback) {
    if (res == 'editor') {
        console.log('Ignoring editor.css load');
        callback && callback();
        return;
    }
    swap(res, callback);
}

Następnie w pakiecie editor.css do mojego dołączonego pliku.

  1. Arkusz stylów zawartości - możesz go usunąć, nawet jeśli używasz edytora w ramce, ale będziesz musiał stylizować zawartość za pomocą funkcji fullPage (niezalecane).
// I copied the content.css from ckeditor-dev and loaded it into contentCss.
var contentCss = 'put your css here';

var config = {
    // Other things here
    // ...

    contentCss: contentCss
};

ckeditor.replace(element, config);

Oba są wykonywane w czasie inicjalizacji (w moim kodzie są w funkcji, która wywołuje ckeditor.replace, jak pokazano w 3).

To są najbardziej bezczelne ataki hakerskie, ale dla mojego obecnego wykorzystania opłacalne są te optymalizacje.

Ponadto, zamiast realizować sugestię 1., zapobiegam innym js pliki z ładowania wg ustawień customConfig: '' i stylesSet: false w konfiguracji.


1
2018-03-18 02:27