RichTextEditor / FCKEditor

[jebeling]

Hi,
first I need to say: Great Toolkit, looks awesome and has nice features !

I'm just evaluating/trying to use it for a project in which I need some (5-10) RichTextEditor parts inside one VLayout.

Best would be to use the built-in RichTextEditor() class but unfortunately it's very limited at the moment. I need at least additional UL/LI and a indent (UL in UL) functionality.
While I searched the forum for a kickoff how to implement them, I read some posts which advised better to use the external FCKEditor instead.

Because I already used the FCKEditor in other projects, I thought: "that could be done easily".
But also for this, my experience/knowledge seems to be to limited, at least for now.

Here's what I did now.

public class FCKEditor extends Canvas {
	private Object fckO = null;
	
	public FCKEditor() {
		setOverflow(Overflow.VISIBLE);
		setCanDragResize(false);
		setRedrawOnResize(false);
		initEditor(this.getID());
	}

	public String getInnerHTML() {
		return jsniGetInnerHTML(fckO);
	}

	
	private native String jsniGetInnerHTML(Object fckO) /*-{
		return fckO.CreateHtml();
	}-*/;

	
	public native void setValue(String text) /*-{
		this.@com.emcc.extranet.client.widgets.FCKEditor::fckO.Value = text;
	}-*/;

	
	private native void initEditor(String id) /*-{
		this.@com.emcc.extranet.client.widgets.FCKEditor::fckO = new $wnd.FCKeditor("fckEd_"+id);
		this.@com.emcc.extranet.client.widgets.FCKEditor::fckO.BasePath = "fckeditor/";
		this.@com.emcc.extranet.client.widgets.FCKEditor::fckO.Width = "100%";
		this.@com.emcc.extranet.client.widgets.FCKEditor::fckO.Height = 200;
		this.@com.emcc.extranet.client.widgets.FCKEditor::fckO.Config["FloatingPanelsZIndex"] = 900000 ;		// modal popup fix
		this.@com.emcc.extranet.client.widgets.FCKEditor::fckO.Config["CustomConfigurationsPath"] = "../../inc/fckEditorPrisma.js";
		this.@com.emcc.extranet.client.widgets.FCKEditor::fckO.ToolbarSet = "Prisma";
	}-*/;
}

The problem with this is that it doesn't get initialized some times.
Mostly the browser window needs to be resized to get the FCK rendered.
Also FCK-Popups like the one for "Format" is render at wrong positions.

I also tried to implement the FCK as "textarea" but that approach had problems with multiple FCKs as well as resizing problems in the way that the html "textarea" got rendered back.

Every tip is welcome.

[sjivan]

Perhaps the code in this thread might point you in the right direction.

Sanjiv

[jebeling]

Thanks for your reply.
Yes, that post gave me the initial kickoff. But in smartgwt I had the problem that the FCK disappear and the raw textarea get rendered when resizing the browser window.
Might be that I missed to do an extra whatever.redraw() by some kind of wherever.onResize()... but haven't found anything in the forum nor the docs.

[Isomorphic]

Try calling setRedrawOnResize(false) on your FCKEditor instance.

[jebeling]

I surely found setRedrawOnResize() multiple times in the docs as well as in the forum, and I tested it with both boolean states, but got the impression that it doesn't has any effect. I also overwrote onDraw() to see if it has any effect and indeed onDraw() got called only once, doesn't matter what value setRedrawOnResize() was set.

Well, please check my initial sample, It's already in the constructor. Something wrong with it ?

[Isomorphic]

Sorry, we missed that you were already using that setting. pboysen (from that other thread) might be able to help if you asked. But one question first: if you enable the "redraw" log category in the Developer Console, do you see the FCKEditor redraw when you resize the browser?

[jebeling]

...
But one question first: if you enable the "redraw" log category in the Developer Console, do you see the FCKEditor redraw when you resize the browser?

Wow... Developer Console... already read sometimes about such animal but remember that I didn't got it running...

Okay one hour later... I'm starting to ask me if I miss something general like a "General Idiot Guide for Jebeling" or if the others have the Forum and Google search stored on a Keyboard Function Key ?!

Well I found this topic and I didn't get the DevConsole running. I always get an additional gray screen and a big bunch of errors in the DevShell (beside the missing KeyCallback()...).
But the DevConsole seems to be the Answer to a lot of my Questions (wish to had it known during my JSon problems...).
However, seems that I need to update to the latest nightly smartgwt build. I'll come back after getting it running.

Lot thanks so far !

[pboysen]

Here is the code I am using

I have successfully created an FCKEditor component. I am working on a servlet to deliver server side directories for images, files etc. For now, here is the code for the FCKEditor:

package edu.iastate.its.project.model.sharedwidgets.client.common;

import com.google.gwt.core.client.GWT;
import com.google.gwt.user.client.Timer;
import com.google.gwt.user.client.ui.HasHTML;
import com.smartgwt.client.widgets.Canvas;
import com.smartgwt.client.widgets.HTMLFlow;

public class FCKEditor extends Canvas implements HasHTML {
    private String elementID;
    private String cssWidth,cssHeight;
    private String toolBar = "Default";
    private HTMLFlow textArea;
    private boolean editing = false;
    private String saveHTML;
    
    /**
     * @wbp.parser.constructor 
     */
    public FCKEditor() {
    	this("600","400");
    }

    public FCKEditor(String cssWidth, String cssHeight) {
    	this.cssWidth = cssWidth;
    	this.cssHeight = cssHeight;
        setWidth(cssWidth);
        setHeight(cssHeight);
        this.elementID = "edu-iastate-its-project-model-sharedwidgets-htmleditor-"+System.identityHashCode(this);
        textArea = new HTMLFlow("");
        textArea.setWidth(cssWidth);
        textArea.setHeight(cssHeight);
        addChild(textArea);
     }
    
	/**
     * Returns the HTML currently contained in the editor
     * 
     * @return the HTML currently contained in the editor
     */
    public String getHTML() {
    	return editing?jsniGetText(elementID):textArea.getContents();
     }
    
    /**
     * Returns <code>null</code> as this editor doesn't support straight text editing.
     * 
     * @return <code>null</code> as this editor doesn't support straight text editing.
     */
    public String getText() {
        return null;
    }
    
    /**
     * Sets the HTML currently contained in the editor
     * 
     * @param html the HTML currently contained in the editor
     */
    public void setHTML(String htmlText) {
    	if (editing)
    		jsniSetText(elementID, htmlText);
    	else {
    		textArea.setContents(htmlText);
    		textArea.setCanFocus(true);
    		textArea.setCanSelectText(true);
    	}
    }
    
    /**
     * Does nothing as straight text editing is not supported by this editor
     * 
     * @param text ignored
     */
    public void setText(String text) {
        //Do nothing
    }

    
    public void edit() {
    	saveHTML = getHTML();
        textArea.setContents("<textarea id=\""+elementID+"\" wrap=\"virtual\">"+saveHTML+"</textarea>");
        textArea.hide();
        Timer timer = new Timer() {
        	public void run() {
        		initEditor(elementID,cssWidth,cssHeight,GWT.getModuleBaseURL(),"lib",toolBar);
        		editing = true;
        		textArea.show();
        	}
        };
        timer.schedule(50);
    }
    		
    public void save() {
    	String html = getHTML();
    	editing = false;
    	setHTML(html);
    }
    
    public void cancel() {
    	editing = false;
    	setHTML(saveHTML);
    }
    
    public String getToolBar() {
		return toolBar;
	}

	public void setToolBar(String toolBar) {
		this.toolBar = toolBar;
	}

	private static native String jsniGetText(String elementID) /*-{
        if ($wnd.FCKeditorAPI) {
            var instance = $wnd.FCKeditorAPI.GetInstance(elementID);
            if (instance != null) {
                return instance.GetXHTML(true);
            } else {
                //The instance isn't bound yet
                return null;
            }
        } else {
            //We're not bound yet in some way
            return null;
        }
    }-*/;

    private static native void jsniSetText(String elementID, String html) /*-{
        if ($wnd.FCKeditorAPI) {
            var instance = $wnd.FCKeditorAPI.GetInstance(elementID);
            if (instance != null) {
                return instance.SetHTML(html);
            } else {
                //The instance isn't bound yet
                return;
            }
        } else {
            //We're not bound yet in some way
            return;
        }
    }-*/;
    
    private native void initEditor(String name, String width, String height,String base, String root, String toolbar) /*-{
		var editor = new $wnd.FCKeditor(name,parseInt(width),parseInt(height),toolbar,'');
		editor.BasePath= base+'fckeditor/';
		editor.Config['BaseHref'] = base + '/resources/' + root;
		var link_url = '/resources/' + '&amp;ServerPath=' + root;
		var image_url = link_url + '&amp;Type=Image';
		var browserURL = editor.BasePath+'editor/filemanager/browser/default/browser.html?Connector=../../../../../';
		editor.Config['ImageBrowserURL'] = browserURL + image_url;
		editor.Config['LinkBrowserURL'] = browserURL + link_url;
		editor.Config['EditorAreaCSS'] = editor.basePath + "skins/default/fck_editor.css";
		editor.Config['StylesXmlPath'] = editor.BasePath + "fckstyles.xml";
		editor.Config['TemplatesXmlPath'] = editor.BasePath + "fcktemplates.xml";
		editor.Config['FloatingPanelsZIndex'] = '8000001';
		editor.ReplaceTextarea();
    }-*/;
}

I also have an HTMLEditor component that allows you to edit HTML text in place. Initially it just displays the HTML with an edit button. Clicking on the EDIT button displays the FCKEditor with SAVE and CANCEL. Let me know if you would like the code for that.

[jebeling]

Lot thanks *pboysen for the sample !

Even if my version is running well since the latest 1.0b2-snapshot, yours had some interesting ideas as well as I'm interested to get the textarea version running/understood.

But after trying it, I get the same problems as with my approaches.

Initially it get rendered well, but when resizing the browser window, the FCK becomes hidden and the plain textarea is shown.
I'm currently unable to do further tests with onResize()/onDraw() because I've problems getting the DevelConsole running... but this is another issues/topic.

Thanks for the "HTML text in place" code offer. Every code/approach is always interesting ;-), but as long as I pick around in noob issues it doesn't make sense to complicate basics :-(.

Lot thanks for your help !

[pboysen]

Problem with FCK editor

Try setting the width to an explicit width, not a 100% value. I have been using FCKEditor for several years and never found the percent value to work (although I wish it did).

[Isomorphic]

Note that's it's possible to just redraw() in order to completely destroy and rebuild the fckEditor, so long as you maintain it's state (like current value and cursor position) across the destruction and creation cycle.

[gcstang]

Chrome gives an error undefined

Awesome feature of using FCKEditor in SmartGWT

SmartGWT 2.1
GWT 2.0.3

Any ideas it's on the .edit() that is causing it.

This is working inside a development environment great, just not once compiled.

Thank you,