Ausführliche Erläuterung der Verwendung des HTML-Editors FCKeditor

1. Einführung
Funktion: What you see is what you get, unterstützt Bilder und Flash, die Symbolleiste ist frei konfigurierbar und einfach zu bedienen
Kompatibilität: IE 5.5+, Firefox 1.5+, Safari 3.0+, Opera 9.50+, Netscape 7.1+, Camino 1.0+
Reife: weit verbreitet, ausgewählt von Baidu, CSDN usw.
2. Download
Offizielle Download-Homepage: http://www.fckeditor .net/download/, derzeit ist die Version 2.5.1
Sie müssen FCKeditor 2.5.1 (FCKeditor_2.5.1.zip) und FCKeditor.Java (FCKeditor-2.3.zip) herunterladen
3. Bereitstellung
In diesem Beispiel wird WebRoot als Anwendungsstammpfad verwendet. Die Verzeichnisstruktur nach der Bereitstellung ist wie folgt:

1. Entpacken Sie FCKeditor_2.5.1.zip und kopieren Sie den fckeditor-Ordner nach /WebRoot/
2. Entpacken Sie FCKeditor-2.3.zip und kopieren Sie fileupload.jar und FCKeditor-2.3.jar nach /WebRoot/WEB-INF/lib/
3. Ändern Sie die Datei /WebRoot/WEB-INF/web.xml und Fügen Sie den folgenden Inhalt hinzu:
＜servlet＞
＜servlet-name＞Connector＜/servlet-name＞
＜servlet-class＞com.fredck.FCKeditor.connector.ConnectorServlet＜/servlet-class＞
＜init-param＞
＜param -name＞baseDir＜/param-name＞
＜param-value＞/UserFiles/＜/param-value＞
＜/init-param＞
＜init-param＞
＜param- name＞debug＜/param-name＞
＜param-value＞true＜/param-value＞
＜/init-param＞
＜load -on-startup＞1＜/load-on-startup＞
＜/servlet＞
＜servlet＞
＜servlet-name＞SimpleUploader＜/servlet-name＞
＜servlet-class＞ com.fredck.FCKeditor.uploader.SimpleUploaderServlet＜/servlet -class＞
＜init-param＞
＜param-name＞baseDir＜/param-name＞
＜param-value＞/UserFiles/＜ /param-value＞
＜/init- param＞
＜init-param＞
＜param-name＞debug＜/param-name＞
＜param-value＞true＜/param- value＞
＜/init-param＞
＜init-param＞
＜param-name＞enabled＜/param-name＞
＜param-value＞true＜/param-value＞
＜/init-param＞
＜ init-param＞
＜param-name＞AllowedExtensionsFile＜/param-name＞
＜param-value＞＜/param-value＞
＜/ init-param＞
＜init-param＞
＜param-name＞DeniedExtensionsFile＜/param-name＞
＜param-value＞php|php3|php5|phtml|asp|aspx|ascx|jsp |cfm|cfc|pl|bat|exe|dll |reg|cgi＜/param-value＞
＜/init-param＞
＜init-param＞
＜param-name＞AllowedExtensionsImage＜/ param-name＞
＜param-value＞ jpg|gif|jpeg|png|bmp＜/param-value＞
＜/init-param＞
＜init-param＞
＜param- name＞DeniedExtensionsImage＜/param-name＞
＜param-value＞＜/param-value＞
＜/init-param＞
＜init-param＞
＜param-name＞AllowedExtensionsFlash＜ /param-name＞
＜param-value ＞swf|fla＜/param-value＞
＜/init-param＞
＜init-param＞
＜param-name＞DeniedExtensionsFlash＜/ param-name＞
＜param-value＞ ＜/param-value＞
＜/init-param＞
＜load-on-startup＞1＜/load-on-startup＞
＜ /servlet＞
＜servlet-mapping＞
＜servlet-name＞Connector＜/servlet-name＞
＜url-pattern＞/fckeditor/connector＜/url-pattern＞
＜/servlet -mapping＞
＜servlet-mapping＞
＜servlet-name＞SimpleUploader＜/servlet-name＞
＜url-pattern＞/fckeditor/simpleuploader＜/url-pattern＞
＜/servlet -mapping＞
4. Ändern Sie /WebRoot/ fckeditor/fckconfig.js, der geänderte Teil lautet wie folgt:
FCKConfig.LinkBrowserURL = FCKConfig.BasePath + 'filemanager/browser/
default/browser.html? Connector=/fckeditor/connector' ;
FCKConfig.ImageBrowserURL = FCKConfig.BasePath + 'filemanager/browser/
default/browser.html?Type=Image&Connector=/fckeditor/connector' ;
FCKConfig.FlashBrowserURL = FCKConfig.BasePath + 'filemanager/browser/
default/browser .html?Type=Flash&Connector=/fckeditor/connector' ;
FCKConfig.LinkUploadURL = '/fckeditor/simpleuploader?Type=File' ;
FCKConfig .ImageUploadURL = '/fckeditor/simpleuploader?Type=Image' ;
FCKConfig.FlashUploadURL = '/fckeditor/simpleuploader?Type=Flash';
Hinweis:
(1) Schritte 3 und 4 legen die Konfiguration fest Beim Durchsuchen und Hochladen von Dateien muss die mit der URL-Referenz in fckconfig.js übereinstimmen. Die Voraussetzung für den normalen Betrieb dieses Beispiels ist, dass WebRoot vorhanden ist Wird als Root-Pfad bereitgestellt, wird das Servlet nicht gefunden.
4. Verwendung
Dieses Beispiel verwendet die direkteste js-Methode. Informationen zu API- und TagLib-Methoden finden Sie im Beispiel unter _samples nach der Dekomprimierung von FCKeditor-2.3.zip.
fckdemo.jsp:
＜%@ page contentType="text/html;charset=GBK"%＞
＜html＞
＜head＞
＜title＞FCKeditor Test＜/title ＞
＜script type="text/javascript" src="/fckeditor/fckeditor.js"＞＜/script＞
＜/head＞
＜body＞
＜form action="fckdemo .jsp" method="post"＞
＜%
String content=request.getParameter("content");
if (content != null) {
content = content.replaceAll(" rn", "");
content = content.replaceAll("r", "");
content = content.replaceAll("n", "");
content = content.replaceAll(""", "'");
}else{
content = "";
}
%＞
＜table width=100%＞
＜tr＞
＜td colspan=4 style='text -align:center' width=100% height=50px＞
＜span＞
＜script type="text/javascript"＞
var oFCKeditor = new FCKeditor('content');//pass in Der Parameter ist der Name des Formularelements (Eingabe oder von FCKeditor generierter Textbereich)
oFCKeditor.BasePath='/fckeditor/';//Geben Sie den FCKeditor-Stammpfad an, der der Pfad ist, in dem sich fckeeditor.js befindet
oFCKeditor.Height= '100%';
oFCKeditor.ToolbarSet='Demo';//Symbolleiste angeben
oFCKeditor.Value="＜%=content%＞";//Standardwert
oFCKeditor. Create();
＜/script＞
＜/span＞
＜/td＞
＜/tr＞
＜tr＞＜td align=center＞＜input type="submit " value=" Senden "＞＜/td＞＜/tr＞
＜tr＞＜td＞ ＜/td＞＜/tr＞
＜tr＞＜td＞Wert (kann direkt gespeichert werden). der Datenbank):＜ /td＞＜/tr＞
＜tr＞＜td style="padding:10px;"＞＜%=content%＞＜/td＞＜/tr＞
＜/table＞
＜/ form＞
＜/body＞
＜/html＞
Rendering:

5. Konfigurationsdatei fckconfig.js
1. DefaultLanguage: Standardsprache, kann in „ zh-cn“ geändert werden
2. Benutzerdefinierte Symbolleiste: Sie können ToolbarSets ändern oder hinzufügen, zum Beispiel:
FCKConfig.ToolbarSets["Demo"] = [
['Bold','Italic' ,'-' ,'OrderedList','UnorderedList','-','Link','Unlink
','-','TextColor','BGColor','-','Style','- ','Image ','Flash','Table']
] ;
3. EnterMode und ShiftEnterMode: Das Zeilenumbruchverhalten von „Enter“ und „Shift+Enter“, der Kommentar fordert den optionalen Modus auf
4. EditorAreaCss: Bereichsstildatei bearbeiten
5. Andere Parameter:
AutoDetectLanguage=true/false Sprache automatisch erkennen
BaseHref="" Basisadresse des relativen Links
ContentLangDirection="ltr/ rtl" Standardtextrichtung
ContextMenu=String-Array, der Inhalt des Rechtsklick-Menüs
CustomConfigurationsPath="" Benutzerdefinierter Pfad und Name der Konfigurationsdatei
Debug=true/false Ob das Debuggen aktiviert werden soll, also wann FCKDebug.Output() wird aufgerufen, der Inhalt wird im Debugging-Fenster ausgegeben
EnableSourceXHTML=true/false Bei TRUE wird beim Wechsel von der visuellen Schnittstelle zur Codepage HTML in XHTML verarbeitet
EnableXHTML=true /false Legt fest, ob die Verwendung von 🎜>FontFormats="" Legen Sie die anzuzeigende Textformatliste fest. Name in
FontNames="" Schriftartname in Schriftartenliste
FontSizes="" Liste der Schriftgrößen in Schriftgröße
ForcePasteAsPlainText=true/false Erzwingen Als einfachen Text einfügen
ForceSimpleAmpersand=true/false Ob das &-Symbol nicht in XML-Entitäten konvertiert werden soll
FormatIndentator="" Zeichen, die beim Einrücken von Code im Quellcodeformat verwendet werden
FormatOutput=true/false Ob automatisch formatiert werden soll Code bei der Ausgabe von Inhalten
FormatSource=true /false Ob der Code automatisch formatiert werden soll, wenn zur Codeansicht gewechselt wird
FullPage=true/false Ob die Bearbeitung der gesamten HTML-Datei oder nur des Inhalts zwischen BODY
GeckoUseSPAN zugelassen werden soll =true/false Ob SPAN-Tags das Ersetzen von B-,I-,U-Tags zulassen sollen
IeSpellDownloadUrl=""Die URL zum Herunterladen der Rechtschreibprüfung
ImageBrowser=true/false Ob das Durchsuchen der Serverfunktion erlaubt sein soll
ImageBrowserURL ="" Die URL, die beim Durchsuchen des Servers ausgeführt wird
ImageBrowserWindowHeight=" " Höhe des Bildbrowserfensters
ImageBrowserWindowWidth="" Breite des Bildbrowserfensters
LinkBrowser=true/false Ob das Durchsuchen des Servers beim Einfügen eines zulässig sein soll link
LinkBrowserURL="" Durchsuchen der URL des Servers beim Einfügen eines Links
LinkBrowserWindowHeight=""Höhe des Zielbrowserfensters des Links
LinkBrowserWindowWidth=""Breite des Zielbrowserfensters des Links
Plugins=object Plug-in registrieren
PluginsPath="" Plug-in-Ordner
ShowBorders=true/false Grenzen zusammenführen
SkinPath="" Speicherort des Skin-Ordners
SmileyColumns=12 Anzahl der Symbolfensterspalten
SmileyImages=Zeichenarray Array der Bilddateinamen im Symbolfenster
SmileyPath="" Symboldatei-Clippfad
SmileyWindowHeight Höhe des Symbolfensters
SmileyWindowWidth Breite des Symbolfensters
SpellChecker="ieSpell/Spellerpages" Rechtschreibprüfung festlegen
StartupFocus =true/false FOKUS auf den Editor, wenn aktiviert
Stile
ToolbarSets=Objekt erlaubt TOOLBAR-Sammlung
ToolbarStartExpanded=true/false Einschalten, ob TOOLBAR erweitert ist oder nicht
UseBROnCarriageReturn=true/false Bei der Eingabe, ob eine BR-Markierung oder eine P- oder DIV-Markierung generiert werden soll
6. Benutzerdefinierte Stile
Symbolleiste Die Option „Stil“ wird durch die durch fckconfig.js angegebene Konfigurationsdatei generiert:
FCKConfig.StylesXmlPath = FCKConfig.EditorPath + 'fckstyles.xml' ;

Das Obige ist Die ausführliche Erläuterung der Verwendung des HTML-Editors FCKeditor finden Sie auf der chinesischen PHP-Website (www.php.cn).