Verkürzte deutsche Übersetzung aus dem FCKeditor-Handbuch zur Einbindung des Editors
Quelle: http://wiki.fckeditor.net/Developer%27s_Guide/Integration/Javascript
übersetzt und redaktionell ergänzt von P.Burkes für www.user-archiv.de
Zunächst Installieren:
Zip-Datei herunterladen
z.B.:http://www.fckeditor.net/download/default.html
In einen Ordner "FCKeditor" in der Ausgangsebene (root) der Website entpacken.
Bei Wahl eines anderen Ordners, muss eine BasePath-Anweisung eingefügt werden (siehe unten)
Einbindung als Javascript in normale HTML-Seiten (nicht PHP!)
2 Methoden 1. Die inline Methode (bevorzugt): Head: <script type="text/javascript" src="/FCKeditor/fckeditor.js"></script>
Body:
<form ...>
<script type="text/javascript">
var oFCKeditor = new FCKeditor( 'FCKeditor1' ) ;
oFCKeditor.BasePath = "/FCKeditor/"
oFCKeditor.Create() ;
</script>
<submit ...>
</form>
2. Die textarea-Methode Head: <script type="text/javascript" src="/FCKeditor/fckeditor.js"></script>
<script type="text/javascript">
window.onload = function()
{
var oFCKeditor = new FCKeditor( 'MyTextarea' ) ;
oFCKeditor.BasePath = "/FCKeditor/" ;
oFCKeditor.ReplaceTextarea() ;
}
</script>
Body: <form ...>
<textarea id="MyTextarea" name="MyTextarea">This is <b>the</b> initial value.</textarea>
<submit ..>
</form>
Entscheidend ist das "name"-Attribut; es ist nützlich, um Verwirrung zu vermeiden, diesselbe ID-Bezeichnung zu wählen
Einstellungen Breite (voreingestellt: "100%")
Möglichkeiten:
oFCKeditor.Width = 400 ; // 400 pixels
oFCKeditor.Width = "250" ; // 250 pixels
oFCKeditor.Width = "80%" ; // 80 percent
Höhe (voreingestellt: 200)
Möglichkeiten:
oFCKeditor.Height = 400 ; // 400 pixel
oFCKeditor.Height = "250" ; // 250 pixels
oFCKeditor.Height = "100%" ; // 100 percent
Voreingestellter Textinhalt: voreingestellt: <empty>
oFCKeditor.Value = "<h1>Testing</h1>This is a <b>sample</b>." ;
BasePath Pfad festlegen, wo die FCKEditor Dateien sind
voreingestellt: oFCKeditor.BasePath = "/FCKeditor/" ;
Relative Pfade vermeiden. Von Root starten (/). Immer mit Slash enden (/)
oFCKeditor.BasePath = "/Components/FCKeditor/" ;
Fehlermeldungen unterdrücken: oFCKeditor.DisplayErrors = false ;
Einbindung des FCKeditors in PHP-Seiten
Quelle: http://wiki.fckeditor.net/Developer%27s_Guide/Integration/PHP
Zunächst include (z.B. am Beginn der Seite):
:
include("FCKeditor/fckeditor.php") ;
Anmerkung: Alternative, gefunden auf http://www.thomann-wyss.ch/blog/ mit dem Vorteil, dass mit __FILE__ das Problem der relativen Pfaden bei Include-Dateien gelöst ist
include(dirname(__FILE__)."/FCKeditor/fckeditor.php");
An gewünschter Stelle im Body-Bereich, innerhalb des <Form>-Blocks:
[? php
$oFCKeditor = new FCKeditor('FCKeditor1') ;
$oFCKeditor->BasePath = '/FCKeditor/';
$oFCKeditor->Value = 'Default text in editor';
$oFCKeditor->Create() ;
?]
Die Instanz, die hier gebildet wird, verhält sich wie ein <INPUT> field in einem Formular. Es wird denselben Namen annehmen, den Du ihm mit obigem Befehl gibst, hier also "FCKeditor1". Es entsteht also eine Übergabe-Variable mit dem Namen FCKeditor1, einlesbar z.B. mit $_POST['FCKeditor1'] oder stripslashes( $_POST['FCKeditor1'] ) ;
Komplettes Beispiel:
[ ? php
include("FCKeditor/fckeditor.php") ;
?]>
<html>
<head>
<title>FCKeditor - Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<form action="savedata.php" method="post">
[ ? php
$oFCKeditor = new FCKeditor('FCKeditor1') ;
$oFCKeditor->BasePath = '/FCKeditor/';
$oFCKeditor->Value = 'Default text in editor';
$oFCKeditor->Create() ;
?]
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Ausgabe in Variable umleiten (statt Direktausgabe) $output = $oFCKeditor->CreateHtml() ;
Einstellungen bei PHP-Einbindung:
Höhe, Breite:
vor dem Create() -Befehl oder dem CreateHtml() - Befehl
$oFCKeditor->Width = '100%' ;
$oFCKeditor->Height = '200' ;
UPLOAD-PFAD To set the path for saving uploaded files uncomment the following line in /FCKeditor/editor/filemanager/browser/default/connectors/php/config.php.
// $Config['UserFilesPath'] = '/UserFiles/' ;
Um den Pfad für UPLOAD-Dateien zu setzen, folgende Zeile entkommentieren in: /FCKeditor/editor/filemanager/browser/default/connectors/php/config.php.
// $Config['UserFilesPath'] = '/UserFiles/' ;
Übersetzer-Anmerkung: die Zeile ist je nach Version evtl. schon von vornherein entkommentiert, also ohne Slashes am Anfang;
so dass nur noch der Wunschpfad einzutragen ist:, wobei die Angabe hier relativ zum Dokumentroot verwendet wird: $Config['UserFilesPath'] = '/dateien/' ;
Die Angabe erfolgt relativ zum Dokumentroot. Ergebnis:
$Config['UserFilesPath'] = '/Wunschordner/' ;
Abhängig von Deiner Version musst Du eventuell $Config['Enabled'] auf TRUE setzen
in /FCKeditor/editor/filemanager/browser/default/connectors/php/config.php.
// SECURITY: You must explicitelly enable this "connector". (Set it to "true").
$Config['Enabled'] = true ;
(...)
Setzt außerdem die Werte _FileBrowserLanguage and _QuickUploadLanguage auf php
var _FileBrowserLanguage = 'php' ; // asp | aspx | cfm | lasso | perl | php | py
var _QuickUploadLanguage = 'php' ; // asp | aspx | cfm | lasso | php
Übersetzungs-Anmerkung: das bezieht sich auf die Datei fckconfig.js auf oberster Ebene des FCK-Ordners
TEXTAREA-Methode bei PHP-Seiten-Einbindung: Deutsche Übersetzung aus dem FCKeditor-Handbuch
http://fckeditor.wikiwikiweb.de/Developer's_Guide/Configuration/Built_in_File_Browser
Um eine Textarea zu ersetzen, musst Du etwas Javascript im Head des HTML-Dokuments platzieren. Das folgende Snippet enthält einige Konfigurationen, ebenso zwei Zeilen für Upload-Dateien (z.B. Bilder) . Um Bilder hochzuladen wirst einige Änderungen an einigen Dateien vornehmen, die später beschrieben werden. In diesem Beispiel habe ich PHP benutzt, um das Javascript in den HEAD der HTML-Seite zu platzieren (das erlaubt Dir, die Pfade zu den Upload-Datei-Ordnern zu setzen)
//----------------------------------
// Add jsavscript to HEAD to replace textarea with HTML editor
// The name of the textarea we want to replace is 'text_content'
// Notice that we specify a oFCKeditor.Config[\'ImageBrowserURL\'] and a oFCKeditor.Config[\'LinkBrowserURL\']
// We can dynamically assign the folders the user can look at by changing the ServerPath variable.
$server_path = BASE_PATH.'content/';
$server_path_img = $server_path.'images/';
$server_path_links = $server_path.'links/';
$server_path_flash = $server_path.'flash/';
$_js = '
<script type="text/javascript" src="fkeditor/fckeditor.js"></script>
<script type="text/javascript">
window.onload = function()
{
var oFCKeditor = new FCKeditor( \'text_content\' ) ; // Instantiate an editor with
// the name of the TEXTAREA input.
oFCKeditor.BasePath = "fkeditor/" ; // This may need to change depending on the name
// of the folder you have FCKeditor in.
oFCKeditor.Height = "500"; // NOTE: do not put px, just leave the numbers as is
// See the documentation for more parameters. Width, setToolbar etc...
// NOTE: it is important to have the ../../ in the file path
// There probably is a bug that needs to be fixed.
// Also we pass the Type and the ServPath variable
oFCKeditor.Config[\'ImageBrowserURL\'] = oFCKeditor.BasePath + \'../../filemanager/browser/default/browser.html?Connector=connectors/php/connector.php&Type=Image&ServerPath='.$server_path_img.'\';
oFCKeditor.Config[\'LinkBrowserURL\'] = oFCKeditor.BasePath + \'../../filemanager/browser/default/browser.html?Connector=connectors/php/connector.php&ServerPath='.$server_path_links.'\';
oFCKeditor.Config[\'FlashBrowserURL\'] = oFCKeditor.BasePath + \'../../filemanager/browser/default/browser.html?Connector=connectors/php/connector.php&Type=Flash&ServerPath='.$server_path_flash.'\';
// This line must come in last once all the configs have been made.
oFCKeditor.ReplaceTextarea() ;
}
</script>
';
$tpl->append('HEAD',$_js);
//--------------------------------------------
To upload files to the server you will also need to:
Um Dateien auf den Server zu laden, müsst Ihr außerdem:
1) chmod 0777 the directory you want to upload to (insecure).
Note: It is advisable to change the group ownership of the directory to the same user as apache and add group write permisions instead
2a) in .../connectors/php/config.php You have to set $Config['Enabled'] to TRUE
2b) as well as comment the line starting with $Config['UserFilesPath'] = '...';
3) If you want to use absolute paths in the javascript snippet above you have to change .../connectors/php/connector.php
and replace: $GLOBALS['UserFilesDirectory'] = GetRootPath() . $GLOBALS['UserFilesPath'] ;
with:
$GLOBALS['UserFilesDirectory'] = $GLOBALS['UserFilesPath'] ;
4) You may also need to comment the lines in the fckconfig.js file that relate to 'ImageBrowserURL' and 'LinkBro
Dateitypen beim Upload In .../connectors/php/config.php könnt Ihr konfigurieren, welche Dateierweiterungen beim Uplad erlaubt oder verboten sein soll.
Die Dateitypen, die man konfigurieren kann sind:
Dateien, z.B. : 'htm', 'html', 'php', 'php3', 'php5', 'phtml', 'asp', 'aspx', 'ascx', 'jsp', 'cfm', 'cfc', 'pl', 'bat', 'exe', 'dll', 'reg', 'cgi', 'asmx'
Images, e.g. : 'jpg', 'gif', 'jpeg', 'png'
Flash, e.g. : 'swf', 'fla'
Media, e.g. : 'swf', 'fla', 'jpg', 'gif', 'jpeg', 'png', 'avi', 'mpg', 'mpeg'
Denying extensions will show all files except for the ones with the specified extensions, while allowing extensions will show no files except for the ones with the specified extensions. To allow all extensions for a filetype, leave both of the arrays empty for that filetype.
PHP Safe Mode: Important Note for PHP with Safe Mode activated: You'll have to create /UserFiles/File, /UserFiles/Flash, /UserFiles/Image and /UserFiles/Media in order for the filebrowser to work. Of course, you'll also have to set the correct permissions for these directories. Furthermore, don't use the "Create new folder" button. The folder would be created but couldn't be used (Safe Mode restriction).
Abweichende Konfigurationseinstellungen:
Wichtig: Bei allen Änderungen der Konfiguration den Browser-Cache löschen, da sonst die Änderungen nicht angezeigt werden!
Shortcuts zum Cache-Löschen:
Beim Internet Explorer: STRG + F5
Beim Fireforx/Mozialla: Umschalt+STRG+R (hilft nicht immer)
Trick: You could add a number or code in the end of the custom configuration path, so the browser would be forced to load it every time:
var oFCKeditor = new FCKeditor( "FCKeditor1" ) ;
oFCKeditor.Config["CustomConfigurationsPath"] = "/myconfig.js?" + ( new Date() * 1 ) ;
oFCKeditor.Create() ;
Zum Ändern der Konfiguration entweder
- die Konfigurationsdatei ändern, oder
- eine zusätzliche, eigene Konfigurationsdatei installieren (empfohlen, insbesondere bezüglich der Updates)
Zusätzliche Konfigurationsdatei erstellen: 1. Schritt: Eine Datei anlegen, die z.B. "myconfig.js" lautet, und irgendwo (z.B. im Rootverzeichnis) speichern. Die vorhandene Konfigurationsdatei fckconfig.js muss vorhanden bleiben, sie darf nicht gelöscht werden.
2. Schritt: In der selbstgeschaffenen Datei die abweichenden Einstellungen notieren. Z.B., um beim Start die französische Spracheinstellung zu erzwingen:
FCKConfig.AutoDetectLanguage = false ;
FCKConfig.DefaultLanguage = "fr" ;
3. Schritt: Selbstgeschriebene Konfigurationsdatei einbinden (statt der Standard-config.js)
a) Entweder in der fckconfig.js die Einbindung der selbstgeschriebenen Konfigurationsdatei veranlassen (wirkt generell).
FCKConfig.CustomConfigurationsPath = "/myconfig.js" ;
b) Oder die fckconfig.js belassen und die Einbindung individuell in der einzelnen Seite erzwingen:
var oFCKeditor = new FCKeditor( "FCKeditor1" ) ;
oFCKeditor.Config["CustomConfigurationsPath"] = "/myconfig.js" ;
oFCKeditor.Create() ;
Voreingestellte CSS ändern:
Inside the editor area, texts are displayed using a default css file : /editor/css/fck_editorarea.css This basic file can be over-ridden : just change the value of the FCKConfig.EditorAreaCSS key in the main fckconfig.js (or your own) configuration file.
Toolbar anpassen
The editor comes with the "Default" and "Basic" toolbarsets already defined in the fckconfig.js file. You can modify them, but you can also create new customized ones. For example, to create a toolbarset named "MyToolbar", just include the following in the configuration file:
FCKConfig.ToolbarSets["MyToolbar"] = [
['Cut','Copy','Paste','PasteText','PasteWord'],
['Undo','Redo','-','Bold','Italic','Underline','StrikeThrough'],
'/',
['OrderedList','UnorderedList','-','Outdent','Indent'],
['Link','Unlink','Anchor'],
'/',
['Style'],
['Table','Image','Flash','Rule','SpecialChar'],
['About']
] ;
Now you just need to set your toolbarset when creating an editor instance. For example, with JavaScript you would do something like this:
<script type="text/javascript">
var oFCKeditor = new FCKeditor( 'FCKeditor1' ) ;
oFCKeditor.ToolbarSet = 'MyToolbar' ;
oFCKeditor.Create() ;
</script>
Snippet für ein Auswahlfeld für die verschiedenen Toolbar-Versionen:
Im Head: <script type="text/javascript">
function FCKeditor_OnComplete( editorInstance )
{
var oCombo = document.getElementById( 'cmbToolbars' ) ;
oCombo.value = editorInstance.ToolbarSet.Name ;
oCombo.style.visibility = '' ;
}
function ChangeToolbar( toolbarName )
{
window.location.href = window.location.pathname + "?Toolbar=" + toolbarName ;
}
</script>
Im Body an gewünschter Stelle:<select id="cmbToolbars" onchange="ChangeToolbar(this.value);" style="VISIBILITY: hidden">
<option value="Default" selected>Default</option>
<option value="Basic">Basic</option>
</select>
Die vorgegebenen Toolbar-Varianten "Default" und "Basic" in der fckconfig.js:
FCKConfig.ToolbarSets["Default"] = [
['Source','DocProps','-','Save','NewPage','Preview','-','Templates'],
['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
['OrderedList','UnorderedList','-','Outdent','Indent'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
['Link','Unlink','Anchor'],
['Image','Flash','Table','Rule','Smiley','SpecialChar','UniversalKey'],
['Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField'],
'/',
['Style','FontFormat','FontName','FontSize'],
['TextColor','BGColor'],
['About']
] ;
FCKConfig.ToolbarSets["Basic"] = [
['Bold','Italic','-','OrderedList','UnorderedList','-','Link','Unlink','-','About']
] ;
Lösung für die Pfadprobleme beim Bildupload und Bild-Serverdurchsuchen (Bild-Browser)
Quelle:
http://phiyan.hollosite.com/ For PHP ONLY! If there are any problems, questions, or fixes for other connections and such
E-Mail:
phiyan@gmail.com
In connector.php, look for this group of lines:
if ( isset( $Config['UserFilesPath'] ) )
$GLOBALS["UserFilesPath"] = $Config['UserFilesPath'] ;
else if ( isset( $_GET['ServerPath'] ) )
$GLOBALS["UserFilesPath"] = $_GET['ServerPath'] ;
else
$GLOBALS["UserFilesPath"] = '/UserFiles/' ;
Go to the else command, and change the '/UserFiles/' to your desired directory.
If you do not want to have FCKEditor create a folder based on the mime type (the Image Folder,
for example, when you you upload an Image).
Then open up io.php file, and look for this group of lines:
$sResourceTypePath = $GLOBALS["UserFilesDirectory"] . $resourceType . '/' ;
// Ensure that the directory exists.
CreateServerFolder( $sResourceTypePath ) ;
// Return the resource type directory combined with the required path.
// return $sResourceTypePath . str_replace( '/', '\\', RemoveFromStart( $folderPath, '/' ) ) ;
return $sResourceTypePath . RemoveFromStart( $folderPath, '/' ) ;
Change the $sResourceTypePath value to: $GLOBALS["UserFilesDirectory"] ;
So you should then have:
$sResourceTypePath = $GLOBALS["UserFilesDirectory"] ;
And then to correctly use pictures with the browser, go to frmresourceslist.html. Then go
through the JavaScript and find this line:
var sCurrentFolderUrl = oNode.attributes.getNamedItem('url').value ;
Now add this(these) line below it, depending on what file types you are using:
sCurrentFolderUrl = sCurrentFolderUrl.replace("Image/", "");
sCurrentFolderUrl = sCurrentFolderUrl.replace("Media/", "");
sCurrentFolderUrl = sCurrentFolderUrl.replace("File/", "");
sCurrentFolderUrl = sCurrentFolderUrl.replace("Flash/", "");
This is a bad fix, so if someone who has more experience with JavaScript and XML
is willing to explain to me what is going on or wants to create a better fix, tell me.
Übersetzung und red. Aufbereitung: P. Burkes für user-archiv.de