Tiny Editor Update

[Olli-A]

Hi,

auf den Seiten vom WYSIWYG Editor "Tiny Editor" ist die aktuelle version vom Dez. 05 die version in meinem Redaxo ist allerdings etwas älter deshalb wollte ich ein Update des Editors machen, ich habe mir also den editor runtergeladen und alle datein ersetzt (Vorher das redaxo natürlich gesichert), jetzt funktioniert er allerdings nicht mehr richtig (er bindet die CSS Datei nicht mehr ein, kann also keine Styles mehr auswählen, lässt mich auch keinen HTML Quelltext bearbeiten)
Kann mir jmd sagen, was man bei einem Update des Editors alles beachten muss?

[Markus.Staab]

Hi,

Auf welche Version von TinyMCE hast du upgedated?

Gruß,
Markus

[Olli-A]

Ich würde gern auf die aktuelle Version (vom 12/05) updaten. Das müsste die V2.0.1 sein!

[Dr KillerJoe]

Ich würde gern auf die aktuelle Version (vom 12/05) updaten. Das müsste die V2.0.1 sein!

Ist Version 2.0.1

Ich wäre da nämlich auch gerne auf den derzeit aktuellem Stand^^

[Olli-A]

Und jemand ne Idee was man da alles machen muss um die aktzuelle Version ins Redaxo zu integrieren?

[Markus.Staab]

Hi,

TinyMCE Update auf vers. 2.0 steht auf Todo Liste mit Prio 1 für REDAXO 3.2.

Wenn ihr euch noch geduldet, sollte das Bald im CVS sein.

Gruß,
Markus

[Olli-A]

Hi,

schön dass die neueste Version gleich mit eingebunden werden soll.
Ich habs nun nach langem hin und her raus bekommen:

Folgendes habe ich in der function_rex_wysiwyg.inc.php geändert

Code: Alles auswählen

...
var sDocumentBase = "/";
                    if (navigator.appName == "Microsoft Internet Explorer") {
                       sDocumentBase += "/";
                    }

	                tinyMCE.init({
                      document_base_url: sDocumentBase,
...

Und so hab ich den Editor aufgerufen (als Modul):

Code: Alles auswählen

 Bitte gib den Text ein der zu Sehen sein soll:<br>
<?php
$a = new rex_wysiwyg_editor();
$a->plugins ="redaxo,table,emotions,preview,contextmenu,advhr,advlink,iespell,insertdatetime,zoom,print,fullscreen,noneditable";
$a->buttonrow1 = "styleselect,separator,undo,redo,separator,bold,italic,underline,separator,justifycenter,bullist,numlist,image,separator,tablecontrols, separator, visualaid";
$a->buttonrow2 = "rowseparator,formatselect,fontselect,fontsizeselect,forecolor,charmap,preview,separator,link,linkHack,unlink,insertEmail,separator,removeformat,pasteRichtext,pasteword,code";
$a->stylesheet = "../files/gig.css";
$a->content = "REX_VALUE[1]";
$a->id = 1;
$a->show();

?><br>

Wichtig ist vorallem der Relative Pfad bei der Angabe der CSS Datei.
Ich denke die optimalste Lösung ist es nicht, aber es funktioniert soweit im I.E. und Im Firefox

[ortega456]

Ich habe auch ein TinyMCE Update von 2 auf 3 gefahren und alles läuft gut (css Pfad musste ich über die url angeben) aber wenn ich einen link oder ein Bild einfügen will, popt das standard TinyMCE Fenster auf anstatt das Redaxo-Fenster mit der Internen Linkstruktur bzw. der Mediengalerie.

Weiss jmd. eine Lösung?

Redaxo ruft ja in der function_rex_wysiwyg.inc.php nach der Standardconfig für den TinyMCE Inputkasten diese Funktionen auf:

Code: Alles auswählen

// custom redaxo callback functions
					function insertMediaPool(src, alt, border, hspace, vspace, width, height, align){
						newWindow( "rexmediapopup", "index.php?page=medienpool&opener_input_field=TINY", 660,500,",status=yes,resizable=yes");
					}
					function insertIntLink(href, target){
						newWindow( "rexlinkpopup", "index.php?page=linkmap&HTMLArea=TINY", 660,500,",status=yes,resizable=yes");
					}

Ausserdem finde ich dann im Redaxoordner ...redaxo/js/tiny_mce/plugins/redaxo/editor_plugin.js die Funktion mit der Ausgabe

Code: Alles auswählen

function TinyMCE_redaxo_getControlHTML(control_name) {
	switch (control_name) {
		case "pasteRichtext":
			return '<img id="{$editor_id}_pasteRichtext" src="{$pluginurl}/images/pasteRichtext.gif" title="{$lang_redaxo_pasteRichtext_desc}" width="20" height="20" class="mceButtonNormal" onmouseover="tinyMCE.switchClass(this,\'mceButtonOver\');" onmouseout="tinyMCE.restoreClass(this);" onmousedown="tinyMCE.restoreAndSwitchClass(this,\'mceButtonDown\');" onclick="tinyMCE.execInstanceCommand(\'{$editor_id}\',\'mcepasteRichtext\');">';
	}
	switch (control_name) {
		case "insertEmail":
			return '<img id="{$editor_id}_insertEmail" src="{$pluginurl}/images/insertEmail.gif" title="{$lang_redaxo_insertEmail_desc}" width="20" height="20" class="mceButtonNormal" onmouseover="tinyMCE.switchClass(this,\'mceButtonOver\');" onmouseout="tinyMCE.restoreClass(this);" onmousedown="tinyMCE.restoreAndSwitchClass(this,\'mceButtonDown\');" onclick="tinyMCE.execInstanceCommand(\'{$editor_id}\',\'mceinsertEmail\');">';
	}
	switch (control_name) {
		case "linkHack":
			return '<img id="{$editor_id}_linkHack" src="{$pluginurl}/images/link.gif" title="{$lang_redaxo_insertLink_desc}" width="20" height="20" class="mceButtonNormal" onmouseover="tinyMCE.switchClass(this,\'mceButtonOver\');" onmouseout="tinyMCE.restoreClass(this);" onmousedown="tinyMCE.restoreAndSwitchClass(this,\'mceButtonDown\');" onclick="tinyMCE.settings[\'insertlink_callback\']=false;tinyMCE.execInstanceCommand(\'{$editor_id}\',\'mceLink\');tinyMCE.settings[\'insertlink_callback\']=\'insertIntLink\';">';
	}

	return "";
}

Leider komme ich an dieser Stelle nicht weiter. Kann mir da jemand helfen?

[ortega456]

Hat vielleicht jemand anderes schon so ein Update durchgeführt und kann mir vielleicht seine Schritte zum erfolgreichen Update mitteilen? Ich bin damit am verzweifeln...

[ortega456]

gibt es überhaupt jemanden, der Redaxo 3 mit TinyMCE 3 und internen Links zum laufen gebracht hat??

[ortega456]

Habs doch noch selbst geschafft, war aber viel Fummlerei.

Falls es jemanden zukünftig interessieren sollte, wie man ein Update vom Tiny 2 auf 3 bei R3 macht, kann ich dann gerne die Infos hier posten.

[Markus.Staab]

wäre sicher interessant für den ein oder anderen..

[matternikus]

Hallo ortega456,

wäre nett, wenn Du Deine Umsetzung des Update hier anhängen oder in einer anderen Form (pm) bereitstellen könntest.

Gruß matternikus

[ortega456]

Hallo,

sorry, dass es so lange gedauert hat...
Ich hoffe, es ist alles vollständig beschrieben, wobei es durchaus sein kann, dass ich ne Kleinigkeit vergessen haben könnte. Bitte um Nachsehen ;-)

Im Prinzip sind es mit dieser Anleitung nur einige Kopieraufgaben und etwas Copy&Paste Fummlerei, also nicht erschrecken ;-)

Als erstes eine kleine Übersicht über die Dateien, die geändert werden müssen:

Redaxo:
/redaxo/include/classes/class.wysiwyg.inc.php
/redaxo/include/functions/function_rex_wysiwyg.inc.php (nur gelöscht, da Funktionen in Klasse eingebettet)
/redaxo/include/pages/linkmap.inc.php
/redaxo/include/pages/medienpool.inc.php
/redaxo/include/layout/top.php

TinyMCE:
/redaxo/js/tiny_mce/tiny_mce_popup.js
/redaxo/js/tiny_mce/themes/advanced/link.htm
/redaxo/js/tiny_mce/plugins/redaxo/editor_plugin.js
/redaxo/js/tiny_mce/plugins/advimage/image.htm

Nun zu den eigentlichen Quelltextänderungen und Kopieraufgaben:

1.

Als erstes kopiert man die TinyMCE Version von Redaxo 4.1 aus "RexDir4.1/files/tmp_/tinymce/jscripts" in den Ordner "RexDir3.2.3/redaxo/js"

2.

Da bei Redaxo 4 alle Funktionalitäten in einer Klasse gekapselt sind, kopiert man den Inhalt von "RexDir4.1/redaxo/include/addons/tinymce/classes/class.tiny.inc.php" in die Datei "RexDir3.2.3/redaxo/include/classes/class.wysiwyg.inc.php".
In der Klasse muss zunächst der Klassenname von "rexTiny2Editor" zu "rex_wysiwyg_editor" geändert werden (da über den Klassennamen später ein Objekt in der Moduleingabe erstellt wird) und man kann die Standardmodule/Plugins sowie den CSS-Pfad für eigene Stile anpassen.
In Zeile 327 muss dann noch der Pfad zu der tiny_mce.js angepasst werden (also $script = './js/tiny_mce/tiny_mce.js';)

3.

In die Datei "RexDir3.2.3/redaxo/include/pages/linkmap.in.php" werden die Zeilen 471 bis 506 (von $func_body = ''; bis $func_body .= "opener.document.". $form ."['". $link_name_field ."'].value = name;\n";) durch
$func_body = '';
if ($HTMLArea != '')
{
if ($HTMLArea == 'TINY')
{
$func_body = 'window.opener.tinyMCE.insertLink(link);';
}
else
{
$func_body = 'window.opener.'.$HTMLArea.'.surroundHTML("<a href="+link+">","</a>");';
}
}

if ($opener_input_field != '' && $opener_input_field_name == '')
{
$opener_input_field_name = $opener_input_field.'_NAME';
}
if($opener_input_field=="TINY"){
$func_body .= 'window.opener.insertLink(link,name)';
} else {
$func_body .= 'var linkid = link.replace("redaxo://","");
window.opener.document.getElementById("'. $opener_input_field .'").value = linkid;
window.opener.document.getElementById("'. $opener_input_field_name .'").value = name;';
}

ersetzt. Es wird also die alte Linkmapfunktionalität mit dem neuen Wysiwyg Editor verknüpft. Zusätzlich wird Zeile 520 (<?php echo $func_body. "\n" ?>) durch "window.opener.insertLink(link,name);" ersetzt.

4.

In "RexDir3.2.3/redaxo/include/pages/medienpool.inc.php" die Funktionen "insertLink" und "insertImage" durch die folgenden ersetzen:

function insertLink(link){
window.opener.tinyMCE.insertLink( "<?php echo $backend_mediafolder ?>" + link,"_self");
self.close();
}

function insertImage(src,alt)
{
window.opener.insertImage('files/' + src, alt);
self.close();
}

Dies sind die Aufrufe aus Version 4.1, die an den Tiny 3 angepasst worden sind.

Dann muss man in Zeile 579 if($_SESSION["media[opener_input_field]"] == 'TINY') durch if($_SESSION["media[opener_input_field]"] == 'TINYIMG') ersetzen und ausserdem in Zeile 575 $title = $return['title']; einfügen. In Zeile 870 muss wieder "TINY" durch "TINYIMG ersetzt werden. Dies wird in Zeile 1305 wiederholt. Die Namensänderung in der Sessionvariable kommt mit Redaxo 4.1.

5.

In der RexDir3.2.3/redaxo/include/layout/top.php musste ich seltsamerweise in den head-Tag die Zeile <script src="../js/standard.js" type="text/javascript"></script> ergänzen, da sonst der Pfad zur standard.js nicht stimmte. Habe mich aber nicht weiter mit diesem Doppelten Pfadproblem nicht beschäftigt weil es ja funktioniert

6.

Die tiny_mce_popup.js in "RexDir3.2.3/redaxo/js/tiny_mce/" durch die aus Redaxo 4.1 in "RexDir4.1/files/tmp_/tinymce/jscripts/" ersetzen

7.

In der "RexDir3.2.3/redaxo/js/tiny_mce/themes/advanced/link.htm" den Quellcode durch den folgenden ersetzen:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>{$lang_insert_link_title}</title>
<script language="javascript" type="text/javascript" src="../../tiny_mce_popup.js"></script>
<script language="javascript" type="text/javascript" src="../../utils/mctabs.js"></script>
<script language="javascript" type="text/javascript" src="../../utils/form_utils.js"></script>
<script language="javascript" type="text/javascript" src="../../utils/validate.js"></script>
<script language="javascript" type="text/javascript" src="jscripts/link.js"></script>
<base target="_self" />
</head>
<body id="link" onload="tinyMCEPopup.executeOnLoad('init();');" style="display: none">
<form onsubmit="insertLink();return false;" action="#">
<div class="tabs">
<ul>
<li id="general_tab" class="current"><span><a href="javascript:mcTabs.displayTab('general_tab','general_panel');" onmousedown="return false;">{$lang_insert_link_title}</a></span></li>
</ul>
</div>

<div class="panel_wrapper">
<div id="general_panel" class="panel current">

<table border="0" cellpadding="4" cellspacing="0">
<tr>
<td nowrap="nowrap"><label for="href">{$lang_insert_link_url}</label></td>
<td><table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><input id="href" name="href" type="text" value="" style="width: 200px" onchange="checkPrefix(this);" /></td>
<td id="hrefbrowsercontainer">&nbsp;</td>
</tr>
</table></td>
</tr>
<!-- Link list -->
<script language="javascript">
if (typeof(tinyMCELinkList) != "undefined" && tinyMCELinkList.length > 0) {
var html = "";

html += '<tr><td><label for="link_list">{$lang_link_list}</label></td>';
html += '<td><select id="link_list" name="link_list" style="width: 200px" onchange="this.form.href.value=this.options[this.selectedIndex].value;">';
html += '<option value="">---</option>';

for (var i=0; i<tinyMCELinkList.length; i++)
html += '<option value="' + tinyMCELinkList[1] + '">' + tinyMCELinkList[0] + '</option>';

html += '</select></td></tr>';

document.write(html);
}
</script>
<!-- /Link list -->
<tr>
<td nowrap="nowrap"><label for="target">{$lang_insert_link_target}</label></td>
<td><select id="target" name="target" style="width: 200px">
<option value="_self">{$lang_insert_link_target_same}</option>
<option value="_blank">{$lang_insert_link_target_blank}</option>
<script language="javascript">
var html = "";
var targets = tinyMCE.getParam('theme_advanced_link_targets', '').split(';');

for (var i=0; i<targets.length; i++) {
var key, value;

if (targets == "")
continue;

key = targets.split('=')[0];
value = targets.split('=')[1];

html += '<option value="' + value + '">' + key + '</option>';
}

document.write(html);
</script>
</select></td>
</tr>
<tr>
<td nowrap="nowrap"><label for="linktitle">{$lang_theme_insert_link_titlefield}</label></td>
<td><input id="linktitle" name="linktitle" type="text" value="" style="width: 200px"></td>
</tr>
<tr id="styleSelectRow">
<td><label for="styleSelect">{$lang_class_name}</label></td>
<td>
<select id="styleSelect" name="styleSelect">
<option value="" selected>{$lang_theme_style_select}</option>
</select></td>
</tr>
</table>
</div>
</div>

<div class="mceActionPanel">
<div style="float: left">
<input type="button" id="insert" name="insert" value="{$lang_insert}" onclick="insertLink();" />
</div>

<div style="float: right">
<input type="button" id="cancel" name="cancel" value="{$lang_cancel}" onclick="tinyMCEPopup.close();" />
</div>
</div>
</form>
</body>
</html>

8.

"RexDir3.2.3/redaxo/js/tiny_mce/plugins/redaxo/editor_plugin.js" durch das aus Rex 4.1 ersetzten ("RexDir4.1/files/temp_/tinymce/jscripts/tiny_mce/plugins/redaxo") und in Zeile 47 bei tinyMCE.openWindow(template, {editor_id : editor_id, scrollbars : 'yes'}}); die eine geschweifte Klammer entfernen, da diese zuviel ist.

9.

Die "RexDir3.2.3/redaxo/js/tiny_mce/plugins/advimage/image.htm" durch die aus Rex 4.1 ersetzten ("RexDir4.1/files/temp_/tinymce/jscripts/tiny_mce/plugins/advimage/image.htm")

10.

ModulEin- und Ausgabe eigentlich wie in Rex 4.1. Vollständigkeitshalber:

Eingabe:

<?php
// Diese 3 Zeilen d�rfen keine f�hrenden Leerzeichen besitzen!
$value1 =<<<TEXT
REX_VALUE[1]
TEXT;

$editor1=new rex_wysiwyg_editor();
$editor1->id=1;
$editor1->content=$value1;
$editor1->editorCSS = '../files/TinyMCE_styles.css';
//$editor1->disable='justifyleft,justifycenter,justifyright,justifyfull';
$editor1->buttons3='tablecontrols,separator,search,replace,separator,print';
$editor1->buttons2_add = 'separator, cleanup, visualchars';
//$editor1->add_validhtml='img[myspecialtag]';
$editor1->show();
?>

<?php

//$a->stylesheet = "http://www.seite.de/files/TinyMCE_styles.css";
?><br>

Ausgabe:

<?php
if (REX_IS_VALUE[1])
{
// Diese 3 Zeilen d�rfen keine f�hrenden Leerzeichen besitzen!
$content =<<<TEXT
REX_HTML_VALUE[1]
TEXT;

echo '<div class="section">';
echo $content;
echo '</div>';
}
?>

Würde mich über ein Feedback freuen, wenn es bei Euch geklappt hat...

Viel Erfolg!

[Michael83]

Hallo,

ich habe inzwischen die aktuelle Version von TinyMCE in REDAXO eingebunden, allerdings ohne eine einzige Datei ändern zu müssen. TinyMCE bietet eine Schnittstelle, über die eigene Link- und Bild-Listen eingebunden werden können. Ich habe ein kleines Addon geschrieben, das diese Listen generiert.

Die Linkliste enthält alle Seiten entsprechend der strukturellen Ordnung. Die Bildliste enthält alle Grafiken, die sich im Medienpool befinden, in alphabetischer Reihenfolge.

Unterschiede zum im REDAXO enthaltenen Addon:
- Kompatibel zur aktuellen Version von TinyMCE (3.1.1)
- Konfiguration von TinyMCE direkt im Modul
- Nutzung der Schnittstellen von TinyMCE für Link- und Bildliste, d.h. das Popup zum Wählen der Seite/des Bildes wie in der in REDAXO enthaltenen Version gibt es nicht.

So siehts aus (mit der dem Addon beiliegenden Standardkonfiguration von TinyMCE):
Editor: http://www.pics-load.net/?v=images/HtVKNPianSeditor.png
Link einfügen: http://www.pics-load.net/?v=images/s6DqJo4m3Ylink.png
Bild einfügen: http://www.pics-load.net/?v=images/hQKbVKGXS2bild.png

Wer Interesse hat: Das Addon gibts hier, eine Installationsanleitung liegt bei.

[oswaldine]

Achtung: Der Editor funktioniert bei mir nicht mit der aktuellen Version von Tiny MCE, man sollte Version 3.1.1 verwenden.

Allerdings zeigen sich die Symbolleisten im Internet Explorer nicht an (nur kleines Textfeld)
In Firefox + Safari wunderbar.

Woran könnte denn das liegen?

[oswaldine]

Hallo,

Hier die Lösung:

In der Moduleingabe diese Zeile

Code: Alles auswählen

?>redaxo/index.php?page=wysiwyg_editor&subpage=js&func=imagelist",

durch diese ersetzen

Code: Alles auswählen

?>redaxo/index.php?page=wysiwyg_editor&subpage=js&func=imagelist"

Das Komme am Ende war zu viel. Nun funktionierts auch im IE.