Jak zintegrować CKEditor w GWT

Question

Szukam sposobu na integrację CKEditor w moim projekcie GWT.

Zrobiłem trochę google i znalazłem ten projekt: https://code.google.com/p/gwt-ckeditor/ , który został opuszczony przez lata. Tak więc CKEditor jest całkowicie przestarzały.

Widziałem również ładowany CKEditor poza GWT do textarea utworzone w GWT. Nie jestem pewien, czy to dobry sposób.

Jeśli ktoś mógłby mi doradzić, byłby bardzo ceniony. Dziękujemy z góry

Answer 1

Możesz użyć JSNI do aktywacji CKEditor. Aby załadować plik javascript, należy go załadować na stronie html lub za pomocą ScriptInjector i StyleInjector.

W GWT utwórz componant:

package com.google.editor; 

import com.google.gwt.core.client.JavaScriptObject; 
import com.google.gwt.user.client.TakesValue; 
import com.google.gwt.user.client.ui.Composite; 
import com.google.gwt.user.client.ui.TextArea; 

public class CKeditor extends Composite implements TakesValue<String> { 
    TextArea text = new TextArea(); 
    protected JavaScriptObject editor; 

    public CKeditor() { 
    initWidget(text); 
    } 

    @Override 
    protected void onAttach() { 
    super.onAttach(); 
    initCKEditor(text.getElement().getId()); 
    } 

    private native void initCKEditor(String id) /*-{ 
    this.@com.google.editor.CKeditor::editor = CKEDITOR.replace(id); 
    }-*/; 

    @Override 
    public native void setValue(String value) /*-{ 
    this.@com.google.editor.CKeditor::editor.setData(value); 
    }-*/; 

    @Override 
    public native String getValue() /*-{ 
    this.@com.google.editor.CKeditor::editor.setData(value); 
    }-*/; 
} 

Jest to próbka, dodać wszystkie config chcesz ustawić w CKEditor

Answer 2

Chciałbym również zasugerować ScriptInjector gdyż daje zwrotnego że skrypt w końcu się załadował i wszystko jest w porządku.

Następnie trzeba użyć $ WND zająć CKEditor prawidłowo i wymienić textarea w kodzie natywnym:

private native void initCKEditor(String id) /*-{ 
    this.@com.google.editor.CKeditor::editor = $wnd.CKEDITOR.replace(id); 
    }-*/; 

Answer 3

odpowiedź Patrice był bardzo pomocny, jednak początkowo nie działa dla mnie, ponieważ tekst TextArea = new TextArea(); tworzył obiekt TextArea bez pola identyfikatora. Aby rozwiązać ten problem, ręcznie dodałem pole identyfikatora:

text.getElement().setId("make_up_an_id_name_here"); 

Upewnij się również, że umieściłeś folder ckeditor w swoim katalogu wojny.

Jeśli zdecydujesz się na link do niego w pliku project_name.html, dodaj wiersz powyżej linii wstawiający głównego ... nocache.js skrypt.

<script type="text/javascript" src="ckeditor/ckeditor.js"></script> 

Answer 4

text.getElement() setId (DOM.createUniqueId());