CKEditor
Auf dieser Seite sind meine Erfahrungen mit dem CKEditor dokumentiert.

Was ist der CKEditor?

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.

Integration in eine ASP.NET Webseite

ASP.NET Seite

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:
  • Diverse Parameter als 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.
  • Den Inhalt des Editor-Fensters, das als 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.

Javascript-Methoden in My.js

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';   
        }
      
Speichern der Daten

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.