Ticket #445 (closed defect: fixed)

Opened 5 years ago

Last modified 4 years ago

Toggle TableBorder doesn't work if this.fullpage=true or using FullPage plugin

Reported by: Dave Owned by: gogo
Priority: normal Milestone: Version 1.0
Component: Xinha Core Version: trunk
Severity: normal Keywords:
Cc:

Description

Toggle Tableborder doesn't work if one of these:

- "this.fullpage" is set to true in htmlsrae.js

- using FullPage? plugin

Nothing much to say furthermore about this...

Change History

Changed 5 years ago by mharrisonline

I think that none of the "temporary stylesheet" links actually work with full page mode. If they do work, they stay there after the page is published. What I do is add a link to a master visual aids stylesheet at 

this.pageStyle ="/visualaids.css"

in htmlarea.js.

I have styles for anything I want to show in the editor but not in the published page. Dotted colored borders around divs that are supposed to be edited, graphics that contain special messages to authors, etc., all tied to classes. I replaced the stylesheet in my anchor plugin with this, too.

Then when I submit, I use a regular expression to remove the stylesheet link. 

   $text=eregi_replace("<link[^>]*visualaids.css[^<]*>","",$text);

This adds a lot of power to Xinha.

Changed 5 years ago by gogo

  • version set to trunk
  • milestone set to Version 1.0

Changed 5 years ago by mharrisonline

This is my visualaids.css. It applies to the edit area, and is removed from the HTML when I save or preview.

/* styles for visual aids while editing HTML */ 

.editviewtableborders, .editviewtableborders td, .editviewtableborders th {border : 1px dashed lightgrey ! important;}


a.anchor {
	width: 18px;
	height: 18px;
	background: url(/images/editors/visual_aids/insert-anchor.gif) no-repeat;
	border: 1px dotted blue;
	padding: 5px 5px 5px 5px;
}

/* For Gecko browsers we need the following code to make anchor visible */
a.anchor:before { content:url("/images/editors/visual_aids/placeholder.gif"); }

.edit_here {
	border: 2px dotted green;
	background: url("/images/editors/visual_aids/edit_here.gif") no-repeat top center;
	padding-top: 18px;
}

div.pagebreak {
	border: 1px dotted #990000;
	height: 18px !important;
	background: url("/images/editors/visual_aids/page_break.gif") no-repeat center;
}
div.flashcontent {
	width: 400px;
	height: 400px;
	background: url(/images/editors/visual_aids/ed_flash.gif) no-repeat;
	border: 1px dotted blue;
	padding: 5px 5px 5px 5px;
	background-position: center;
}

Changed 5 years ago by anonymous

Argh.. I really need to get this working the proper way, any suggestions on what might be causing this incompatibility?

Changed 5 years ago by anonymous

Ok, tracked it down to line 1873 in htmlarea.js which states:

if (!editor.config.fullPage) {

var html = "<html>\n"; html += "<head>\n"; html += "<meta http-equiv=\"Content-Type\" content=\"text/html; charset="

+ editor.config.charSet + "\">\n";

if(typeof editor.config.baseHref != 'undefined' && editor.config.baseHref

!= null)

{

html += "<base href=\"" + editor.config.baseHref + "\"/>\n";

} html += "<style title=\"table borders\">"

+ ".htmtableborders, .htmtableborders td, .htmtableborders th {border

: 1px dashed lightgrey ! important;} \n"

+ "</style>\n";

html += "<style type=\"text/css\">"

+ "html, body { border: 0px; background-color: #ffffff; } \n" + "span.macro, span.macro ul, span.macro div, span.macro p {background : #CCCCCC;}\n" + "</style>\n";

And goes on from there... The ELSE part of this statement is:

} else {

var html = editor.inwardHtml(editor._textArea.value); if (html.match(HTMLArea.RE_doctype)) {

editor.setDoctype(RegExp?.$1); html = html.replace(HTMLArea.RE_doctype, "");

}

}

How toggleBorders works is by creating a temporary style when the editor loads. This is successful without the fullPage plugin because the default behavior is to strip EVERYTHING except the "body" of the html. But when the fullPage plugin is loaded, the default behavior now changes to SAVE everything. Creating a temporary style no longer works now because: a) you don't know exactly WHERE to create the style, and b) it will be saved with your document thereby causing the borders to remain visible if the document was saved with toggleBorders on.

The problem here is that the code to add in the 'htmtableborder' style (which is what toggleBorders uses to make the borders appear disappear) needs to be present in the editor, but not saved with the message (so that even if the toggleBorders was left on, they won't show) -or- you need to make sure to remove the toggleBorders style from all tables before saving the html.

I chose the first method, and since I use PHP to load/save the message, this is how I did it (which doesn't ALWAYS work, but in our situation works 99% of the time)

In the function that loads the message:

$strmessage = $rowsetmessage?; $tmpStyle =

"<head>" . "<style title=\"table borders\">\n" . ".htmtableborders, .htmtableborders td, .htmtableborders th {\n"

.

" border : 1px dashed lightgrey ! important;\n" . "}" . "</style>\n";

$strmessage = str_ireplace("<head>",$tmpStyle,$strmessage);

And then in the function that saves the message:

$message = preg_replace('@<style title="table borders"[>]*?>.*?</style>@si', , $message );

-- Rob

Changed 4 years ago by gogo

toggle borders has been fixed for fullPage in changeset:661

Changed 4 years ago by gogo

  • status changed from new to closed
  • resolution set to fixed

Changed 4 years ago by ray

rev [661] added "undefined" to the editor contents when not in fullpage mode. fixed in rev [671]

Note: See TracTickets for help on using tickets.