Possible to integrate helene into xinha?

CyberTron · 2005-03-18 12:57:51

Wonder if it is doable to replace the default html editor with helene (http://helene.muze.nl/) or if not, implement it like a plugin?

gogo · 2005-03-19 01:42:45

CyberTron wrote:

Wonder if it is doable to replace the default html editor with helene (http://helene.muze.nl/) or if not, implement it like a plugin?

I suspect it would be a big job. Plugins welcome though The plugin would have to replace the switch mode button to instead of switching mode to change the gui editor into a gui sourcecode editor.

This feature would be desirable especially for when we get "shielded code" ability (including php code into the html being edited).

CyberTron · 2005-03-19 13:59:51

Been looking at the code for a day or two....

my guess the plugin will need to do something similar to HTMLArea.prototype.setMode ?

Do we need to define a new state, or is fine this work under wysiwyg?

hmm.... the wysiwyg mode is using an iframe? So I should make use of this iframe for the source editor or better to define another iframe instance?

Some pointers might be helpful for me to see if i can come out with something.

Is it doable without modifying htmlarea.js?

gogo · 2005-03-19 22:32:51

I think it would probably be possible without modifying htmlarea.js.

I don't think I'd define a new mode, perhaps set the editor to text mode, and then hide the textarea again and "overlay" your source-editor iframe in it's place. This will turn off the buttons that are active in wysiwyg mode.

If you do need to modify htmlarea.js thats ok, as long as it doesn't break anything existing.

CyberTron · 2005-03-20 06:55:04

Without modifying the htmlarea.js, how can we update back the _textarea.value when the form is submitted? Is it possible to override the onsubmit event?

gogo · 2005-03-20 07:15:51

All you need to do is override HTMLArea.prototype.getHTML() with your own function which
a) if your "helene" editor is currently displayed, returns the content from that
b) otherwise returns the content of the original getHTML..

I think something like this would work..

function HeleneEditor(editor)
{
  this.editor = editor;
  var helene = this;
  editor.getHTML_pre_helena = editor.getHTML;
  editor.getHTML = function() { return helene.getHTML(); }
}

HeleneEditor.prototype.getHTML = function() 
{
  if(this.isActive) return this.someContent; // whateever, pseudo code of course ;)
  return this.editor.getHTML_pre_helena();
}

CyberTron · 2005-03-20 10:13:40

Cool... let me see if I can figure it out...

PS. : If anyone interested in volunteering his service, ya help is great appreciated.

gogo · 2005-03-20 11:18:13

CyberTron wrote:

Cool... let me see if I can figure it out...

If you get it working (or even partially working) I think this would be a [bold]very[/bold] popular addition to Xinha, particularly when we get some sort of "shielded" code happening. I'd love to see the resulting plugin in the Xinha package. If you want to do it in the Xinha subversion repository I'm happy to accommodate, just let me know.

CyberTron · 2005-03-20 12:46:06

How do I add an iframe?

I believe i should add this inside : function Helene(editor, args)

Try creating an iframe using

var fr = document.createElement('iframe');
fr.style.backgroundColor='window';
fr.src = _editor_url + "plugins/Helene/editor.html";

But not sure where to add this...

Anyway, I'm still fiddling around...

I sort of manage to add the iframe only within HTMLArea.prototype._helene = function(opts, obj), but I've got problems accessing the functions defined within the iframe, though I've no problem setting the style.width and height of the iframe, which means I should be accessing the correct iframe object.

Last edited by CyberTron (2005-03-20 13:15:07)

gogo · 2005-03-21 00:22:45

If you have a look at the "generate" function in htmlarea.js you'll see how the editor is "built up", specifically everythign is put into a div which is referenced as editor._htmlArea, I'd put it in there...

  var fr = document.createElement('iframe'); 
  fr.style.backgroundColor='window';
  fr.src = _editor_url + "plugins/Helene/editor.html";
  editor._htmlArea.appendChild(fr);

CyberTron · 2005-03-21 05:36:44

Do I have to do anything after I do a setMode to disable all the buttons not relevant to textmode?

I do a setmode, and the button do not get disabled until I click on one of them.

gogo · 2005-03-21 06:13:07

CyberTron wrote:

Do I have to do anything after I do a setMode to disable all the buttons not relevant to textmode?
I do a setmode, and the button do not get disabled until I click on one of them.

Hmm. updateToolbar() maybe, but it should happen automatically

CyberTron · 2005-03-21 07:44:17

Thanks. It works... I've sort of got it working here... here's the code I've written. Wonder if you can tell me where i'm doing something not correct. I'll be trying to make it 3 state, so it will be able to go to the default textmode, currently it does not.

function Helene(editor)
{
this.editor = editor;
editor.config.registerButton('helene', Helene.I18N.tooltip, editor.imgURL('ed_helene.gif', 'Helene'), true, function(e) { e._helene(editor); });
var helene = this;
editor.getHTML_pre_helene = editor.getHTML;
editor.getHTML = function() { return helene.getHTML(); }
editor.setInnerSize_default = editor.setInnerSize;
editor.setInnerSize = function(width,height) {helene.setInnerSize(width,height);}
editor.isActive = false;
// See if we can find 'htmlmode' and replace it with helene
var t = editor.config.toolbar;
var done = false;
for(var i = 0; i < t.length && !done; i++)
{
for(var x = 0; x < t[i].length && !done; x++)
{
if(t[i][x] == 'htmlmode')
{
t[i][x] = 'helene';
done = true;
}
}
}
if(!done)
{
t[t.length-1].push('helene');
}
}
Helene._pluginInfo =
{
name : "Helene",
version : "0.5",
developer : "",
developer_url: "http://helene.muze.nl/",
c_owner : "",
license : "htmlArea",
sponsor : "",
sponsor_url : ""
}
Helene.prototype.onGenerateOnce = function()
{
var editor = this.editor;

var fr = document.createElement('iframe');
fr.style.backgroundColor='window';
fr.style.display = 'none';
fr.src = _editor_url + "plugins/Helene/editor.html";
editor._textArea.parentNode.insertBefore(fr, editor._textArea );
editor._helene_iframe = fr;
}

HTMLArea.prototype._helene = function(editor)
{
var editor = this;
if (this._editMode == 'wysiwyg')
{
// wysiwyg -> helene
var D = this.getInnerHTML();
this.setMode();
editor._textArea.style.display = 'none';
this._helene_iframe.style.display = '';
this._helene_iframe.style.width = editor._innerSize.width + "px";
this._helene_iframe.style.height = editor._innerSize.height + "px";
this._helene_iframe.contentWindow.init();
this._helene_iframe.contentWindow.setContents(D);
editor.isActive = true;
} else {
if (editor.isActive)
{
// helene -> textmode
this._helene_iframe.style.display = "none";
this._textArea.style.display = '';
this._textArea.value = this._helene_iframe.contentWindow.getContents();
this._textArea.focus();
} else {
// textmode -> wysiwyg
this._helene_iframe.style.display = "none";
this.setMode();
this._iframe.contentWindow.focus();
}
editor.isActive = false;
}
editor.updateToolbar();
}

Helene.prototype.getHTML = function()
{
if(this.editor.isActive) return this.editor._helene_iframe.contentWindow.getContents();
return this.editor.getHTML_pre_helene();
}

Helene.prototype.setInnerSize = function(width,height)
{
this.editor.setInnerSize_default(width,height);
if (typeof this.editor._helene_iframe != "undefined" && this.editor._helene_iframe.style.display != "none")
{
this.editor._helene_iframe.style.width = width + "px";
this.editor._helene_iframe.style.height= height+ "px";
this.editor._helene_iframe.contentWindow.document.getElementById('codeframe').style.height = height+ "px";
this.editor._helene_iframe.contentWindow.document.getElementById('linenumbers').style.height = height+ "px";
}
}

Last edited by CyberTron (2005-03-22 03:24:06)

CyberTron · 2005-03-21 07:48:43

The above was created in a folder Helene inside plugins, with all the helene files inside there as well. Hope some experts could help improve this.

adamp · 2005-03-21 07:56:15

Sounds good, don't suppose you've got a working example up somewhere?

gogo · 2005-03-21 08:45:18

Is that complete? It doesn't look right.. where does _helene_iframe come from?

CyberTron · 2005-03-21 11:45:05

Uploaded to my old server at home, please be gentle on this cos is just on a celeron with 64mb on linux.

http://www.netsingapore.com/xinha/examp … -body.html

Sorry, missed out a piece of code while copy and pasting. Here's the missing definition. Updated the code above with the missing fragment as well. Anyway, I'm just started looking at xinha only few days ago, so a lot are written from copy and pasting codes from the existing plugins available, so they are probably not implemented correctly in some areas. So some pointers and help to improve this from the experienced developers here would be greatly appreciated.

Helene.prototype.onGenerateOnce = function()
{
var editor = this.editor;

var fr = document.createElement('iframe');
fr.style.backgroundColor='window';
fr.style.display = 'none';
fr.src = _editor_url + "plugins/Helene/editor.html";
editor._textArea.parentNode.insertBefore(fr, editor._textArea );
editor._helene_iframe = fr;
}

Last edited by CyberTron (2005-03-21 11:48:44)

adamp · 2005-03-21 11:49:44

Looks very nice.

Now we just need code shielding so PHP, etc. isn't lost when switching back to wysiwyg and it's sorted!

gogo · 2005-03-21 12:00:12

That is awesome as. I have no problem with your code there, you might want to look at adjusting it to work with the FullScreen plugin (it does already but doesn't resize when the FullScreen resizes), apart from that I say it's all good.

I see Helene is distributed under the GPL, I'm not certain if it would be possible to include it in our Xinha distribution (as Xinha is licenced under the "htmlarea" licence, and we can't change to GPL even if we wanted to), perhaps somebody could ask the Helene authors if we could get a special dispensation to release helene under the htmlarea licence so we can include it?

adamp · 2005-03-21 12:10:26

This is seriously tempting me to try and figure out code shielding just to get it done and usable hehe.

Aside from that, does anyone know how easy it is to change/add tags for Helene to work with? One thing I'd like to do for my personal use is swap <?php and ?> for [php] and [/php] to go with my template system.

CyberTron · 2005-03-21 12:13:49

Any idea why I need to explicately call the updateToolbar?

I'll check on the fullscreen plugin to see what's required.

Currently it toggles btw the wysiwyg mode and the helene editor mode. I'm looking at allowing to cycle btw wysiwyg, standard textarea mode and helene editor mode.

CyberTron · 2005-03-21 13:11:55

I've update to toggle btw the 3 modes and handling of the fullscreen resize in the original code above.

Last edited by CyberTron (2005-03-22 02:50:29)

CyberTron · 2005-03-21 22:36:05

adamp wrote:

This is seriously tempting me to try and figure out code shielding just to get it done and usable hehe.
Aside from that, does anyone know how easy it is to change/add tags for Helene to work with? One thing I'd like to do for my personal use is swap <?php and ?> for [php] and [/php] to go with my template system.

You should be able to modify it to ya own custom tags inside highlight.js. Search for "php end" in the file and there's the regular expresession which define the end tag, and few lines down, is the start tag. Hope that helps.

adamp · 2005-03-22 04:43:56

Cheers, I'll check it out later today.

Foxx · 2005-03-22 05:53:28

this looks VERY nice... I still haven't gotten around to updating to Xinha, and I probably won't have time in the near future, but I will most definately be implementing this plugin as well! great job! demo looks cool!

Xinha Discussion Forum

Announcement

#1 2005-03-18 12:57:51

Possible to integrate helene into xinha?

#2 2005-03-19 01:42:45

Re: Possible to integrate helene into xinha?

#3 2005-03-19 13:59:51

Re: Possible to integrate helene into xinha?

#4 2005-03-19 22:32:51

Re: Possible to integrate helene into xinha?

#5 2005-03-20 06:55:04

Re: Possible to integrate helene into xinha?

#6 2005-03-20 07:15:51

Re: Possible to integrate helene into xinha?

#7 2005-03-20 10:13:40

Re: Possible to integrate helene into xinha?

#8 2005-03-20 11:18:13

Re: Possible to integrate helene into xinha?

#9 2005-03-20 12:46:06

Re: Possible to integrate helene into xinha?

#10 2005-03-21 00:22:45

Re: Possible to integrate helene into xinha?

#11 2005-03-21 05:36:44

Re: Possible to integrate helene into xinha?

#12 2005-03-21 06:13:07

Re: Possible to integrate helene into xinha?

#13 2005-03-21 07:44:17

Re: Possible to integrate helene into xinha?

#14 2005-03-21 07:48:43

Re: Possible to integrate helene into xinha?

#15 2005-03-21 07:56:15

Re: Possible to integrate helene into xinha?

#16 2005-03-21 08:45:18

Re: Possible to integrate helene into xinha?

#17 2005-03-21 11:45:05

Re: Possible to integrate helene into xinha?

#18 2005-03-21 11:49:44

Re: Possible to integrate helene into xinha?

#19 2005-03-21 12:00:12

Re: Possible to integrate helene into xinha?

#20 2005-03-21 12:10:26

Re: Possible to integrate helene into xinha?

#21 2005-03-21 12:13:49

Re: Possible to integrate helene into xinha?

#22 2005-03-21 13:11:55

Re: Possible to integrate helene into xinha?

#23 2005-03-21 22:36:05

Re: Possible to integrate helene into xinha?

#24 2005-03-22 04:43:56

Re: Possible to integrate helene into xinha?

#25 2005-03-22 05:53:28

Re: Possible to integrate helene into xinha?

Board footer