Hello guys,
I have a HTML Table where I want to add rows with javascript.
Every newly added row contains a tabledata with an instance of FCKEditor in it.
Everything works fine when I klick the link on my page to add a new row containing fckeditor.
I also have 2 other javascript functions, one for moving a row up and the other for moving
a row down.
Now my problem is the following:
1.) I load the page.
2.) I add two new rows (containing fckeditor) to the table on the page (works fine).
3.) I enter the value "1" into the first fckeditor instance and the value "2" into the second fckeditor instance.
4.) Finally I move the second row upwards. This operation works also fine but the second fckeditor instance
(which became the first one) loses the value ("2") I have entered before. It's weard because the other instance of fckeditor does not lose the value ("1").
I tested this with Firefox 3.0.13 and the latest fckeditor and ckeditor builds.
Both of them behave the same way.
Ckeditor seems to be more buggy because it also loses the focus and becomes uneditable unless you klick
on the "source" button twice. This also happens if you move from a page with an instance of ckeditor loaded to some other webpage and then hit the browser's back button.
FCKeditor does not have this (focus / edit) problem.
Below is the code:
<html>
<head>
<script language="JavaScript" src="/newsletter/fckeditor/fckeditor.js"></script>
<script language="JavaScript">
var editorial = new FCKeditor('editorialarea', '100%', 200);
var footer = new FCKeditor('footerarea', '100%', 200);
footer.BasePath = '/newsletter/fckeditor/';
editorial.BasePath = '/newsletter/fckeditor/';
function ActivateEditor(Name, Height, ToolbarSet, FullPage, PathFCKStyles) {
var editor = new FCKeditor(Name, '100%', Height);
editor.Config["DefaultLanguage"] = "de";
editor.Config["FontColors"] = '000000,993300,333300,003300,003366,000080,333399,333333,800000,FF6600,808000,808080,008080,0000FF,666699,808080,FF0000,FF9900,99CC00,339966,33CCCC,3366FF,800080,999999,FF00FF,FFCC00,FFFF00,00FF00,00FFFF,00CCFF,993366,C0C0C0,FF99CC,FFCC99,FFFF99,CCFFCC,CCFFFF,99CCFF,CC99FF,FFFFFF,,FFFFFF,FFFFFF,FFFFFF,FFFFFF,FFFFFF,FFFFFF,FFFFFF';
editor.Config["FullPage"] = FullPage;
editor.ToolbarSet = ToolbarSet;
editor.BasePath = '/newsletter/fckeditor/';
if (PathFCKStyles != "") {
editor.Config["StylesXmlPath"] = PathFCKStyles + 'fckstyles.xml' ;
editor.Config["EditorAreaCSS"] = PathFCKStyles + 'fckstyles.css';
editor.Config["TemplatesXmlPath"] = PathFCKStyles + 'fcktemplates.xml' ;
}
editor.ReplaceTextarea();
}
function toggledisplay (id){
var mydiv = document.getElementById(id);
if (mydiv != null) {
var divs = document.getElementsByTagName('div');
for (i=0; i< divs.length; i++){
if(divs[i].id == id){
divs[i].style.display = (divs[i].style.display=='block'?'none':'block');
}
else if(divs[i].getAttribute('name') == 'toggled'){
divs[i].style.display = 'none';
}
}
}
}
function addArticleRow(tableId, rowIndex){
var table = document.getElementById(tableId);
var row = table.insertRow(rowIndex);
var cell = row.insertCell(0);
cell.innerHTML = "<img onClick=\"moveUp(this.parentNode.parentNode)\" alt=\"move up\" border=\"0\" src=\"/newsletter/img/up.gif\">\n"+
"<img onClick=\"moveDown(this.parentNode.parentNode)\" alt=\"move down\" src=\"/newsletter/img/down.gif\" border=\"0\">\n"+
" Artikel Nr. "+rowIndex+"\n"+
/*"<div align=\"right\"><a href=\"#\" onClick=\"toggledisplay('article_"+rowIndex+"')\">\+</a></div>\n"+*/
"<div name=\"toggled\" id=\"article_"+rowIndex+"\">\n"+
"<textarea name=\"article_"+rowIndex+"\"></textarea>\n"+
"</div>\n";
var newScript = document.createElement('script');
newScript.type = "text/javascript";
newScript.innerHTML = "ActivateEditor('article_"+rowIndex+"', 200, 'Default', false, '')";
cell.appendChild(newScript);
/*toggledisplay("article_"+rowIndex);
*/
return false;
}
function moveUp(row){
row.parentNode.moveRow(-1, 2);
if(row.rowIndex -1 > 0){
row.parentNode.insertBefore(row, row.previousSibling);
}
}
function moveDown(row){
if(row.rowIndex +1 < row.parentNode.parentNode.rows.length - 2){
row.parentNode.insertBefore(row, row.nextSibling.nextSibling);
}
}
</script>
</head>
<body>
<noscript>
<h1>Achtung keine javascript Unterstützung vom Browser</h1>
</noscript>
<table id='dyntable' border="1" width="450">
<tr>
<td>
<div>Editorial <div align="right"><a href="#" onClick="toggledisplay('editorialdiv')">+</a></div></div>
<div style="display:none" name="toggled" class="toggled" id="editorialdiv">
<textarea name="editorialarea"></textarea>
<script type="text/javascript">
editorial.ReplaceTextarea();
</script>
</div>
</td>
</tr>
<tr><td align="right"><a href="#" onClick="addArticleRow('dyntable', this.parentNode.parentNode.rowIndex)">Neuen Artikel einfügen</a></td></tr>
<tr>
<td>
<div>Footer <div align="right"><a href="#" onClick="toggledisplay('footerdiv')">+</a></div></div>
<div style="display:none" name="toggled" class="toggled" id="footerdiv">
<textarea name="footerarea"></textarea>
<script type="text/javascript">
footer.ReplaceTextarea();
</script>
</div>
</td>
</tr>
</table>
</body>
</html>
Every help on this would be appreciated!
best regards,
Alex
Re: FCKEditor loses data when moving table rows
Firefox (and I think that also Webkit and Opera) does invalidate the contents of an iframe when it's removed from the DOM, that's the problem that you are experiencing.
As you can see in https://bugzilla.mozilla.org/show_bug.cgi?id=254144 there's no fix planned for the moment
Re: FCKEditor loses data when moving table rows
thx for your help.
You are right, it's a browser problem....
I now circumvented the problem by saving the data to a hashtable (befor moving the rows)
and setting the data to the corresponding fck instance with the
function.
thx again, and have a nice day....
regards...
Re: FCKEditor loses data when moving table rows
Please pass the full working example
Re: FCKEditor loses data when moving table rows
Hi n3bul4
I am facing the same issue in CKEditor 4.4 please pass alll the code fix that you applied ASAP.
I now circumvented the
I now circumvented the problem by saving the data to a hashtable (befor moving the rows) and setting the data to the corresponding fck instance with the./???
GuL