Come integrare CKEditor in GWT

Question

Sto cercando un modo per integrare CKEditor nel mio progetto GWT.

Ho fatto qualche ricerca su google e ho trovato questo progetto: https://code.google.com/p/gwt-ckeditor/ che è stato abbandonato per anni. Quindi il CKEditor è completamente obsoleto.

Ho anche visto CKEditor caricato fuori da GWT in un'area di testo creata in GWT. Non sono sicuro che sia un buon modo.

Se qualcuno potesse darmi qualche consiglio, sarebbe molto apprezzato. Grazie per anticipo

Answer 1

È possibile utilizzare JSNI per attivare CKEditor. Per caricare il file javascript, lo si carica nella pagina html o utilizzando ScriptInjector e StyleInjector.

In GWT, creare un 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); 
    }-*/; 
} 

E 'un campione, aggiungere tutti config che si desidera impostare in CKEditor

Answer 2

Vorrei anche suggerire ScriptInjector come ti dà un callback che lo script ha finalmente caricato e tutto è a posto.

Successivamente si deve utilizzare $ WND per affrontare CKEditor correttamente e sostituire la textarea in codice nativo:

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

Answer 3

risposta di Patrice è stato molto disponibile, ma inizialmente non ha funzionato per me, perché il testo TextArea = new TextArea(); stava creando un TextArea senza campo ID. Per risolvere questo problema ho solo aggiunto manualmente un campo id con:

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

Inoltre assicuratevi di mettere la cartella ckeditor nella directory di guerra.

Se si sceglie di collegare ad esso nel file project_name.html, aggiungere questa riga sopra la linea che inserisce il vostro principale ... nocache.js script:.

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

Answer 4

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