Hi,
I've had some success integrating tinyMCE as a form control using CanvasItem on Firefox 3 and 3.5, but not on Chrome or Safari 4. All browsers on the mac. Chrome is still in development on mac, but it failed identically to Safari, so I thought it was worth noting. I used this thread as a starting point. I had to implement two hacks for the following problems -
1. When editing a record, CanvasItem.setValue() is called before the editor is ready, and the value is lost. This is because editor creation is asynchronous, and SC thinks the item is ready before it is.
2. When calling saveData() on the form, the value of the CanvasItem appears to be accessed directly by SC, rather than through getValue() - so the content in the form control is not retrieved correctly.
Here is the code
I suspect there are probably better ways to resolve both hacks, especially #2 - I feel like I should not be needing to call super() for setValue() and getValue().
Safari and Chrome are close - all the editor controls render and appear to operate as expected, but the actual text area is broken. Here is a screenshot of the failure (Safari 4.0 and Chrome latest dev), and the success (Firefox 3 & 3.5).
Note that tinyMCE is listed as compatible with Safari 4, and all the examples work with both Safari 4 and Chrome on the mac.
It would be great if isomorphic were able to comment on the hacks and the issue in safari and chrome - thanks,
Colin
I've had some success integrating tinyMCE as a form control using CanvasItem on Firefox 3 and 3.5, but not on Chrome or Safari 4. All browsers on the mac. Chrome is still in development on mac, but it failed identically to Safari, so I thought it was worth noting. I used this thread as a starting point. I had to implement two hacks for the following problems -
1. When editing a record, CanvasItem.setValue() is called before the editor is ready, and the value is lost. This is because editor creation is asynchronous, and SC thinks the item is ready before it is.
2. When calling saveData() on the form, the value of the CanvasItem appears to be accessed directly by SC, rather than through getValue() - so the content in the form control is not retrieved correctly.
Here is the code
Code:
// HACK 1 - variable to hold setValue() calls made before the editor is ready
var tinyMCEInitValue = null;
function handleMCEExecCompletion(inst) {
isc.Log.logInfo("mceAddControl completed - editor_id:" + inst.editorId);
if(tinyMCEInitValue) {
inst.setContent(tinyMCEInitValue);
tinyMCEInitValue = null;
}
}
tinyMCE.init({
mode : "none",
theme : "simple",
plugins: "safari",
init_instance_callback : "handleMCEExecCompletion",
setup : function(ed) {
isc.Log.logInfo("Setting up editor:" + ed.id);
}
});
// We'll use this in CanvasItem
isc.defineClass("MyTextEditor","Canvas").addProperties({
overflow: "visible",
canDragResize: true,
redrawOnResize: true,
//zIndex:0,
getInnerHTML : function () {
return "<textarea style='width:100%;height:100%' id=" + this.getID() + "_ta></textarea>";
},
redrawOnResize:false,
draw : function() {
this.Super("draw", arguments);
this.loadEditor();
return this;
},
loadEditor: function() {
if (this.mceLoaded == null) {
isc.Log.logInfo("Creating editor:" + this.getID() + "_ta");
tinyMCE.execCommand("mceAddControl", true, this.getID() + "_ta");
isc.Log.logInfo("Editor Setup initiated - ed:" + tinyMCE.get(this.getID() + "_ta"));
this.mceLoaded = true;
}
}
});
isc.defineClass("MyTextEditorItem", "CanvasItem").addProperties({
canvasConstructor: "MyTextEditor",
getValue : function() {
var superValue = this.Super("getValue", arguments);
var editorValue = null;
isc.Log.logInfo("Super Value: " + superValue);
if(tinyMCE.get(this.canvas.getID() + "_ta")) {
editorValue = tinyMCE.get(this.canvas.getID() + "_ta").getContent();
isc.Log.logInfo("Editor value:" + editorValue);
// HACK 2 - we need to work out a better way of keeping the underlying item's value in sync
// - this could be a SC bug - why not calling getValue() - using direct access instead?
if(superValue != editorValue) this.Super("setValue", editorValue);
return editorValue;
} else return superValue;
},
setValue : function(value) {
isc.Log.logInfo("Setting value:" + value);
// HACK 1 - setValue is called before the editor is ready, so we need to keep hold of the value until it is loaded.
if(tinyMCE.get(this.canvas.getID() + "_ta")) tinyMCE.get(this.canvas.getID() + "_ta").setContent(value);
else tinyMCEInitValue = value;
isc.Log.logInfo("MyTextEditorItem, setValue - calling super...");
return this.Super("setValue", arguments);
}
});
Safari and Chrome are close - all the editor controls render and appear to operate as expected, but the actual text area is broken. Here is a screenshot of the failure (Safari 4.0 and Chrome latest dev), and the success (Firefox 3 & 3.5).
Note that tinyMCE is listed as compatible with Safari 4, and all the examples work with both Safari 4 and Chrome on the mac.
It would be great if isomorphic were able to comment on the hacks and the issue in safari and chrome - thanks,
Colin
Comment