Installiere das CKEditor-Syntaxhighlight-Plugin in CKEditor

1- Was ist CKEditor-SyntaxHighlight ?

CKEditor-SyntaxHighlight ist ein plugin, das für  CKEditor 3+ geschrieben wird, um das Highlight für die Syntax zu machen
Die Integration von  CKEditor-SyntaxHighlight in CKEditor erlaubt Sie bei der Texterstellung mit dem Code-Anzeigeraum für die unterschiedlichen Programmierungssprache. Sehen Sie das folgende Beispiel 
Sie können CKEditor-SyntaxHighlight:probieren
Oder

2- Die Anforderung der Installation

Stellen Sie sicher, dass Sie CKEditor heruntergeladet haben. Sie können CKEditor bei ... herunterladen und benutzen
CKEditor-SyntaxHighlight ist ein  addon. Es ist im  CKEditor nach dem Herunterladen nicht verfügbar. Deshalb sollen Sie CKEditor-SyntaxHighlight in dem  CKEditor integrieren.
Nach dem Herunterladen vom  CKEditor und dekomprimieren:

3- Download CKEditor-SyntaxHighlight

Sie können die Hinweise der Installation von CKEditor-SyntaxHighlight nachdem Sie auf den Button download klicken.
CKEditor-SyntaxHighlight fordert den Plugin  Dialog, Sie sollen auch diesen Plugin herunterladen
Addon Dialog fordert auf den plugin "Dialog User Interface" deshalb sollen Sie diesen plugin herunterladen
Das Ergebnis vom Herunterladen

4- Die Installation von CKEditor-SyntaxHighlight

Dekomprimieren Sie die heruntergeladeten File
Kopieren Sie dem Ordner  syntaxhighlight, dialog, dialogui zum Ordner  'plugins' vom  CKEditor. Wenn die  plugin im  CKEditor schon existieren, können Sie noch kopieren und überschreiben

5- Das Beispiel mit CKEditor-SyntaxHighlight

Erstellen Sie den Ordner  highlight-examples, Die Beispiel im Dokument werden in diesem Ordner gestellt
example1.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Replace Textarea by Code</title>
    
    <script src="../ckeditor.js"></script>

</head>
<body>
    <h2>Replace Textarea Elements Using JavaScript Code</h2>
    
    <form action="" method="post">
    
        <textareaid="editor1" name="editor1" cols="80" rows="10">
            <p>Hello <strong>CKEditor</strong></p>
        </textarea>
        
        <script>

            CKEDITOR.replace( 'editor1' ,{
              extraPlugins : 'syntaxhighlight',        
              toolbar: [
                     ['Source'] ,
                     ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About'] ,
                     ['Syntaxhighlight']
                   ]              
            });

        </script>    
            
    </form>
</body>
</html>
Das Beispiel durchführen
Das Ergebnis von der Durchführung vom Beispiel
Sie können auf  "Source" klicken umd die erstellte Code vom HTML zu sehen

6- SyntaxHighlighter

Oben leite ich Sie bei der Einbettung von  CKEditor-SyntaxHighlight in den CKEditor an. Normalerweise nach dem Bearbeiten auf CKEditor kann die Inhalt ein Artikel sein. Er wird in die Database gespeichert und es gibt eine Seite für den Artikel 
Sie sollen SyntaxHighlighter mit  style herunterladen damit es die von Ihnen erstellten Code im CKEditor hervorhebt
Mehr sehen