Der CKEditor ist nach eigenen Aussagen The best web text editor for everyone. Für mich ist er ein WYSIWYG-Editor, den man in Webapplikationen einbauen kann, um es dem Benutzer zu emöglichen, formatierten Text ähnlich wie in Word einzugeben. Der Text wird als HTML-Code gespeichert. Es ist auch möglich Bilder oder Dateien aus der Zwischenablage einzufügen. Diese Daten werden mit base64 codiert. D.h. es kann die Datenmenge sehr groß machen und damit zur Verlangsamung der der Webapplikation beitragen.
Ich habe den Inhalt des ckeditor - Downloads in mein Javascript-Verzeichnis kopiert und referenziere dies auf der Seite auf der der Editor angezeigt werden soll. Zusätzlich referenziere meine eigene Javascript-Datei, in der ich einige Funktionen definiere.
<head>
...
<script src="js/ckeditor/ckeditor.js"></script>
<script src="js/My.js"></script>
...
</head>
Im Body der Datei muss danach das ein Formular definiert werden, in dem sich auch ein textarea Element
befindet, das danach den Editor beinhalten soll.
<form name="editForm" id="editForm" action="save.aspx" method="POST">
<input type="hidden" name="Value1" value="<%=GetValue1()%>">
<input type="hidden" name="Value2" value="<%=GetValue2()%>">
<textarea name="EditorElement" id="EditorElement" rows="10" cols="80">
<%=GetContent()%>
</textarea>
<script>
initEditor("EditorElement");
</script>
</form>
Das Formular schickt folgende Inhalte an die Seite save.aspx:
input Elemente vom Typ hidden. Das können bereits
übergebene URL-Parameter sein, die von der C#-Klasse im Code Behind via Get-Methoden oder als protected Variablen
direkt zur Verfügung gestellt werden.
textarea Element eingefügt worden ist. Danach wird gleich die
Javascript Methode initEditor mit der id des textarea Elements aufgerufen, um CKEditor zu
initialisieren. (Der Inhalt, der im Editor angezeigt werden soll wird über die GetContent Methode
von der Code Behind Klasse abgerufen.)
Unter dem Editor Fenster habe ich noch ein div Element eingefügt, in dem Sich Buttons befinden:
<div class="buttons">
<a href="abort.aspx?<%=GetHtmlParameters()%>" >Abbrechen</a>
<a href="#" onClick="document.getElementById('editForm').submit();">
Speichern
</a>
</div>
Der Abbrechen - Button führt zu der Seite abort.aspx und übergibt URL-Parameter, die wieder von der Code Behind Klasse zur Verfügung gestellt werden. Der Speichern - Button schickt das Formular mit dem Editor-Inhalten ab.
Die Methode initEditor initialisiert den CKEditor in dem textarea Element mit der
übergebenen Id und ruft danach die Methode setEditorHeight auf, mit der die Höhe des Editors
eingestellt werden kann. (Ich habe es durch ausprobieren auf meine Seite angepasst.
function initEditor(strTextAreaId) {
// Replace the <textarea id="editor1"> with a CKEditor
// instance, using default configuration.
var ckEditor = CKEDITOR.replace(strTextAreaId);
setEditorHeight(ckEditor);
}
function setEditorHeight(ckEditor) {
if (ckEditor == null) return;
var bodyHeight = bodyHeight = window.innerHeight;
ckEditor.config.height = (bodyHeight - 300) + 'px';
}
Das Speichern der Daten erfolgt in diesem Fall über die Datei save.aspx. Da dieser
Seite als POST Parameter ein HTML-Code übergeben wird, muss die Request-Validation ausgeschalten werden,
ansonsten kommt die Fehlermeldung, dass ein potentiell gefährlicher Wert übergeben wurde.
Bis zu ASP.NET Version 2 war es ausreichend in der aspx-Seite in der page Spezifikation
ValidateRequest="false" anzugeben.
<%@ page language="C#" CodeBehind="Save.aspx.cs" Inherits="..."
...
ValidateRequest="false"%>
In der Zwischenzeit muss auch in der web.config folgender Hinweis eingetragen sein:
<system.web>
...
<httpRuntime requestValidationMode="2.0" />
</system.web>
Den HTML-Code des Editors habe ich in der Applikation in einem SQL-Server-Datenbank-Feld vom Typ
varchar(max) abgespeichert.