You are not logged in.
Is it possible to wrap the html content of the htmlarea iframe in something like :
<div id="content">
<!-- All xinha controls go here -->
</div>
The reason is that I have several css files which the resulting web pages use. For efficiency and specificity I use #content in about 75% of the css files. This is because the bulk of the pages (not the menu, sidebar or footer), and exactly what our users will be editting with xinha, are wrapped in <div id="content"> content </div>. Without xinha's html display also being wrapped in a similar div the css files I use to style the html in the xinha editor (which are the same css files the web pages use) doesn't look the same as the resultant content - this means it is ineffective as a preview of what will actually be displayed on the web pages.
Can anybody help?
I've seen the code which creates the iframe for the xinha control, and code to insert the toolbar and editor but I haven't managed to wrap the editor in the <div id="content"></div> yet.
Thanks
Offline
There's no need. Mohammed has brought the mountain to you! (Alan Partridge quote)
I found where the iframe <body> is created and inserted my wrapper there.
html += "</head>\n";
html += "<body>\n<div id='content'>";
html += editor.inwardHtml(editor._textArea.value);
html += "</div></body>\n";
html += "</html>";
Now the chunks of css with #content as a specifier work and xinha is an effective preview of how the html will look on the live web site.
It would be a good idea to have a variable which is blank by default which can be used to wrap the xinha editor in a wrapper. Example :
htmlarea.js
html += "</head>\n";
html += "<body>\n";
html += editor._textareaWrapperOpener;
html += editor.inwardHtml(editor._textArea.value);
html += editor._textareaWrapperCloser;
html += "</body>\n";
html += "</html>";
my_config.js
editor._textareaWrapperOpener = "<div id='content'>";
editor._textareaWrapperCloser = "</div>";
Offline
Hang about, the div I inserted become part of the editted html which is not what I want since the editted html is inserted in a <div id="content></div> programmatically on the web site. So I now use this instead :
html += "<body id='content'>\n";
All styles work as in the web site but the font-size: small; is interpreted differently for some reason, the h1 text is slightly larger.
Offline
I know I keep replying to myself but someone else might find the solution useful when searching through posts.
The reason the font was a slightly different size even though I was including the same css files is because there was no doctype in the xinha editor page. I use font-size:small; in the css and this has a default pixel value if there is no doctype set (or something similar to this). When I changed HTMLArea.prototype.initIframe to render the page with the doctype the css is handled the same as on the live web site.
Example :
html = '<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">';
html += '<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">';
html += '<head>';Instead of :
html += "<html>";
html += '<head>';It's a good idea if the xinha editor page is based on a template that the user can change to suit the target web pages that the xinha editted content is rendered on. I know there are tickets for this kind of thing perhaps I should give it a go?
Offline