Detaillierte Konfigurationszusammenfassung von ckEditor in ASP

<script type=text/javascript src=ckeditor/ckeditor.js></script>

2. Fügen Sie das HTML-Steuerelement <textarea> dort ein, wo der Editor verwendet wird.

Kopieren Sie den Code wie folgt:

<textarea id= TextArea1 cols= 20 rows=2 class=ckeditor></textarea>

Wenn es sich um eine ASP.NET-Umgebung handelt, können Sie den Code auch mit dem serverseitigen Steuerelement <TextBox>

wie folgt kopieren:

<asp:TextBox ID=tbContent runat=server TextMode=MultiLine class=ckeditor></asp:TextBox>

Beachten Sie, dass class=ckeditor dem Steuerelement hinzugefügt wird.

3. Ersetzen Sie das entsprechende Steuerelement durch den Editorcode.

Kopieren Sie den Code wie folgt:

<script type=text/javascript>

CKEDITOR.replace('TextArea1');

//Wenn es sich um ein serverseitiges Steuerelement handelt, das in ASP.NET verwendet wird Umgebung <TextBox >

CKEDITOR.replace('tbContent');

//Wenn sich das <TextBox>-Steuerelement auf der Masterseite befindet, schreiben Sie

CKEDITOR.replace('<%=tbContent.ClientID.Replace(_,$) %>'

</script>

4. Konfigurieren Sie den Editor

zum Kopieren code Der Code lautet wie folgt:

Die Konfiguration von ckeditor ist in der Datei ckeditor/config.js konzentriert. Im Folgenden sind einige häufig verwendete Konfigurationsparameter aufgeführt:

// Schnittstellensprache, der Standardwert ist 'en'

config.sprache = 'zh-cn ';

// Breite und Höhe festlegen

config.width = 400

;

// Es gibt drei Editorstile: 'kama' (Standard), 'office2003', 'v2'

config.skin = 'v2'

;

config.uiColor = '#FFF';

// Toolbar (Basic'Basic', Allround'Full', Custom)plugins/toolbar/plugin.js

config.toolbar = 'Basic';

config.toolbar = 'Full';

Dies entspricht:

config.toolbar_Full = [

['Source','-','Save','NewPage','Preview','-', 'Vorlagen'],

['Ausschneiden','Kopieren','Einfügen','PasteText','PasteFromWord','-','Drucken', 'SpellChecker', 'Scayt'],

['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],

['Form', 'Checkbox ', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],

'/',

['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],

['NumberedList','BulletedList','-','Outdent' ,'Indent','Blockquote'],

['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],

['Link','Unlink','Anchor'],

['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],

'/',

[' Styles','Format','Font','FontSize'],

['TextColor','BGColor']

];

//Ob die Symbolleiste reduziert werden kann

config.toolbarCanCollapse = true;

//Die Position der Symbolleiste

config.toolbarLocation = 'top'; //Optional: unten

die

Symbolleiste standardmäßig erweitert wird

config.toolbarStartupExpanded = true;

/Abbrechen Ziehen und Ablegen, um die Größenfunktion zu ändern Plugins/resize/plugin.js

config.resize_enabled = false

//Ändern Sie die maximale Höhe der Größe

config.resize_maxHeight = 3000;

//Ändern Sie die maximale Breite der Größe

config.resize_minHeight = 250;

//Ändern Sie die minimale Breite der Größe

config.resize_minWidth = 750;

//

Ändern Sie die minimale Breite der Größe

config.resize_minWidth = 750;

Formular, das diesen Editor enthält Wenn, ob die Daten im Element automatisch aktualisiert werden sollen

config.autoUpdateElement = true;

// Legen Sie fest, ob ein absolutes Verzeichnis oder ein relatives Verzeichnis verwendet werden soll. Wenn es leer ist, bedeutet dies ein relatives Verzeichnis

config.baseHref = ''

// Z-Index-Wert des Editors

config.baseFloatZIndex = 10000;

// Tastenkombinationen festlegen

config.keystrokes = [

[ CKEDITOR.ALT + 121 /*F10*/, 'toolbarFocus' ], // Fokus abrufen

[ CKEDITOR.ALT + 122 /*F11*/, 'elementsPathFocus' ], //Elementfokus

[CKEDITOR.SHIFT + 121 /*F10*/, 'contextMenu' ], //Textmenü

[ CKEDITOR.CTRL + 90 /*Z*/, 'undo' ], // Rückgängig machen

[ CKEDITOR.CTRL + 89 /*Y*/, 'redo' ], //Redo

[ CKEDITOR.CTRL + CKEDITOR.SHIFT + 90 /*Z*/, 'redo' ], //

[ CKEDITOR.CTRL + 76 /*L*/, 'link' ], //Link

[ CKEDITOR.CTRL + 66 /*B*/, 'bold' ], // Bold

[ CKEDITOR.CTRL + 73 /*I*/, 'italic' ] , //Kursiv

[ CKEDITOR.CTRL + 85 /*U*/, 'underline' ], // Unterstrichen

[ CKEDITOR.ALT + 109 /*-*/, 'toolbarCollapse' ]

]

//

Festgelegte

-

Tastenkombinationen in Konflikt geraten.

,

CKEDITOR.CTRL + 85 /*U*/

]

//Legen Sie den Hintergrundfarbwert des Elements im Editorplugins/colorbutton/plugin.js fest.

config.colorButton_backStyle = {

element: 'span',

styles: { 'background-color': '#(color)' }

}

//Legen Sie den Wert der Vordergrundfarbe fest Plugins/colorbutton/plugin.js

config.colorButton_colors = '000,800000,8B4513,2F4F4F,008080,000080,4B0082,696969,B22222,A52A2A,DAA520,

006400,40E0D0,0000CD,800080,808080,F00,FF8C00,FFD700,008000,0FF,00F,EE82EE,

A9A9A9,FFA07A,FFA500,FFFF00,00FF00,AFEEEE,ADD8E6,DDA0DD,D3D3D3,FFF0F5,

FAEBD7,FFFFE0,F0FFF0,F0FFFF,F0F8FF,E6E6FA,FFF'

//Ob andere Farboptionen angezeigt werden sollen, wenn ein Farb-Plugin/Farbschaltfläche ausgewählt wird/ Plugin .js

config.colorButton_enableMore = false

//Der Standardwert der Vordergrundfarbe des Blocks ist festgelegt. Plugins/colorbutton/plugin.js

config.colorButton_foreStyle = {

element: 'span',

Styles: { 'color': '#(color)' } }

;

/ /Die hinzuzufügenden CSS-Dateien können hier über relative Pfade und absolute Pfade zur Website hinzugefügt werden

config.contentsCss = './contents.css';

//Textrichtung

config.contentsLangDirection = 'rtl'; //Von links nach rechts

//Wenn Sie die CKeditor-Konfigurationsdatei nicht konfigurieren möchten, lassen Sie sie einfach leer

CKEDITOR.replace( 'myfiled', { customConfig : '. /config.js' } );

//Hintergrundfarbe des Schnittstellen-Editierfeldsplugins/dialog/plugin.js

config.dialog_backgroundCoverColor = 'rgb(255, 254,

als

Referenz festgelegt werden

config.dialog_backgroundCoverColor = 'white' //Standard

//Der Deckkraftwert des Hintergrunds sollte zwischen 0,0 und 1,0 liegen

.

Verschieben oder Die Adsorptionsentfernungseinheit des Randes beim Ändern des Elements: Pixelplugins/dialog/plugin.js

config.dialog_magnetDistance = 20;

//Ob lokale Rechtschreibprüfung und Eingabeaufforderungen verweigert werden sollen. Derzeit werden nur Firefox- und Safari-Plugins unterstützt.

config.disableNativeSpellChecker = true

//Führen Sie Tabellenbearbeitungsfunktionen aus, z. Derzeit unterstützt nur Firefox Plugins/wysiwygarea /plugin.js

config.disableNativeTableHandles = true; //Die Standardeinstellung ist nicht aktiviert

//Ob die Funktion zum Ändern der Größe von Bildern und Tabellen aktiviert werden soll config.disableObjectResizing = true;

config.disableObjectResizing = false //Die Standardeinstellung ist aktiviert

//Legen Sie den HTML-Dokumenttyp fest

config.docType = '<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd%22';

//Ob der Bearbeitungsbereich gerendert werden sollplugins/editingblock/plugin.js

config.editingBlock

= true;

Label generiert durch

EnterMode = CKEDITOR.ENTER_P; //Optional: CKEDITOR.ENTER_BR oder CKEDITOR.ENTER_DIV

//Ob HTML-Entitäten für die Ausgabe verwendet

werden

sollen

?

//Ob einige schwer darzustellende Zeichen in entsprechende HTML-Zeichen konvertiert werden sollen. Plugins/Entities/plugin.js

config.entities_greek = true;

//Ob einige lateinische Zeichen in HTML konvertiert werden sollen plugins/entities/plugin.js

config.entities_latin = true;

// Gibt an, ob einige Sonderzeichen in ASCII-Zeichen konvertiert werden sollen, z. B. „This is Chinese: 中文“

. = false ;

//Neue Komponente hinzufügen

config.extraPlugins = 'myplugin'; //Nur nicht standardmäßiges Beispiel

//Hervorhebungsfarbe beim Durchsuchen von Plugins/find/plugin.js verwenden

config.find_highlight = {

element : 'span',

style : { 'background-color' : '#ff0', 'color' : '#00f' }

};

//Standardschriftartplugins/font/plugin.js

config.font_defaultLabel = 'Arial';

//Häufig verwendete chinesische Zeichen können beim Bearbeiten von Schriftarten zum Zeichensatz hinzugefügt werden: Song, Kai, Hei usw. Plugins/font/plugin.js

config.font_names = 'Arial;Times New Roman;Verdana';

//Standardstil von Text-Plugins/font/plugin.js

config.font_style = {

element: 'span',

Styles: { 'font-family': '#(family)' },

overrides: [ { element: 'font', attributes : { 'face' : null } } ]

};

//Standardschriftgrößeplugins/font/plugin.js

config.fontSize_defaultLabel = '12px';

//Optionale Schriftgröße beim Bearbeiten von Schriftartplugins/font/plugin .js

config.fontSize_sizes ='8/8px;9/9px;10/10px;11/11px;12/12px;14/14px;16/16px;18/18px;2 0/20px;22/22px;24/24px;26/26px;28/28px;36/36px;48/48px;72/72px'

//Stile, die beim Festlegen der Schriftgröße verwendet werdenplugins/font/plugin.js

config.fontSize_style = {

element : 'span',

style : { 'font-size' : '#(size)' },

overrides : [ { element : ' Schriftart', Attribute: { 'size': null } } ]

};

//Ob der kopierte Inhalt gezwungen werden soll, das Format zu entfernenplugins/pastetext/plugin.js

config.forcePasteAsPlainText =false //Nicht entfernen

//Ob &plugins/htmldataprocessor/plugin.js erzwungen werden soll

config.forceSimpleAmpersand = false;

//Formatieren Sie das Adress-Tagplugins/format/plugin.js

config.format_address = { element : 'address' , attributes : { class : 'styledAddress' } };

//DIV-Tags automatisch formatierenplugins/format/plugin.js

config.format_div = {

'

normalDiv' } };

//Formatieren Sie das H1-Tag automatisch.

} };

//H2-Tags automatisch formatierenplugins/format/plugin.js

config.format_h2 = { element: 'h2', attributes: { class: 'contentTitle2' } };

-Tags automatisch formatieren

. Plugins/format/plugin.js

config.format_h1 = { element: 'h3', attributes: { class: 'contentTitle3' } };

format/plugin.js

config.format_h1 = { element: 'h4', attributes: { class: 'contentTitle4' } };

-

automatisch

formatieren

. format_h1 = { element: 'h6', attributes: { class: 'contentTitle6' } };

//

Formatieren Sie das P-Tag

automatisch

config.format_pre = { element: 'pre', attributes: { class: 'code' } };

Durch

der

Symbolleiste angezeigt

Verwenden Sie den vollständigen HTML-Bearbeitungsmodus. Der Quellcode enthält: <html><body></body></html> und andere Tags

config.fullPage = false;

//Ob die leeren Zeichen im Absatz ignoriert werden sollen, werden die Zeichen dargestellt durchplugins/wysiwygarea/plugin.js

config.ignoreEmptyParagraph = true;

//Ob beide Seiten von <a> gleichzeitig gelöscht werden sollen beim Löschen des Link-Attributs im Bildattributfeld Tagplugins/image/plugin.js

config.image_removeLinkByEmptyURL = true;

die

in der hierarchischen Verschachtelung in der unteren linken Ecke angezeigt werden.

link ,image,flash,checkbox,radio,textfield,hiddenfield,imagebutton,button,select,textarea'

//Verzögerung beim Anzeigen des Untermenüs, Einheit: ms plugins/menu/plugin.js

config.menu_subMenuDelay = 400;

//Wenn ein neuer Befehl ausgeführt wird, wird der Inhalt im Editor geändert.plugins/newpage/plugin.js

config.newpage_html = '';

//Wenn Text aus Word kopiert wird. , ob Text formatiert und entfernt werden soll. Plugins/pastefromword/plugin.js

config.pasteFromWordIgnoreFontFace = true; //Standardmäßig wird das Format ignoriert

//

Ob Tags wie <h1><h2> verwendet werden sollen, um den aus dem Word-Dokument eingefügten Inhalt zu ändern oder zu

ersetzen

Inhalte aus Word einfügen Ob das Format Plugins/pastefromword/plugin.js entfernt werden soll

config.pasteFromWordRemoveStyle = false;

//Formatieren Sie den ausgegebenen HTML-Inhalt entsprechend der Art der Hintergrundsprache. Der Standardwert ist leer

config.protectedSource.push( /</?[/s/S]*?/?>/g )

; protectedSource.push( //g ); // ASP-Code

config.protectedSource.push( /(]+>[/s|/S]*?<//asp:[^/>]+>)|(] + ///)/gi ); ASP.Net-Code

//Die bei der Eingabe eingefügte Bezeichnung: Shift+Enter

config.ENTER_P; //Optional: CKEDITOR.ENTER_BR oder CKEDITOR.ENTER_DIV

//

Optionale Ausdrucksersetzungszeichen-Plugins/smiley/plugin.

smiley_descriptions = [

':)', ':(', ';)', ':D', ':/', ':P',

'', '', '', ''

, '', '', '', ';(', '', '', '', '',

'', ':kiss' , '' ];

//Entsprechende Ausdrucksbilderplugins/smiley/plugin.js

config.smiley_images = [

„regular_smile.gif“, „sad_smile.gif“, „wink_smile.gif“, „teeth_smile.gif“, „confused_smile.gif“, „tounge_smile.gif“,

'embaressed_smile.gif','omg_smile.gif','whatchutalkingabout_smile.gif','angry_smile.gif','angel_smile.gif','shades_smile.gif',

„devil_smile.gif“, „cry_smile.gif“, „lightbulb.gif“, „thumbs_down.gif“, „thumbs_up.gif“, „heart.gif“, „

broken_heart.gif“, „kiss.gif“, „envelope“. .gif'];

//Die Adresse des Emoticon-Plugins/smiley/plugin.js

config.smiley_path = 'plugins/smiley/images/';

Wenn

die Seite geladen wird, erhält das Bearbeitungsfeld sofort den Fokusplugins/editingblock/plugin.js

= false

So bearbeiten Sie Quellcode und WYSIWYG-Quelle und Wysiwyg-Plugins/editingblock/plugin.js

config.startupMode ='wysiwyg';

//Ob der Frame-Rahmen beim Laden von Plugins/showblocks/plugin.js angezeigt werden soll

.

//

Ob die Stildatei geladen werden

soll

Im Folgenden sind optional:

config.stylesCombo_stylesSet = 'mystyles'

; 'mystyles:/editorstyles/styles.js';

config.stylesCombo_stylesSet = 'mystyles:http://www.example.com/editorstyles/styles.js';

//Startindexwert

config.tabIndex

= 0;

Der Benutzer gibt TAB ein, die Anzahl der vom Editor übergebenen Leerzeichen. () Wenn der Wert 0 ist, wird der Fokus aus dem Bearbeitungsfeld „plugins/tab/plugin.js“ verschoben

config.tabSpaces = 0;

//Die Standardvorlageplugins/templates/plugin.js

= 'default';

//Kommagetrennte Vorlagendateienplugins/templates/plugin.js

= [ 'plugins/ templates/templates/default.js' ]

//Bei der Verwendung von Vorlagen wird der bearbeitete Inhalt ersetzt, wenn das Kontrollkästchen „plugins/templates/plugin.js“ aktiviert ist

config.templates_replaceContent = true;

//Theme

=

'default';

//

Die Anzahl der Schritte zum Rückgängigmachen der Aufzeichnung

Auswahl von ckfinder Seien Sie richtig.

//CKFinder.SetupCKEditor(null, '/ckfinder/');