Résumé détaillé de la configuration de ckEditor en asp

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

2. Insérez le contrôle HTML <textarea> où l'éditeur est utilisé.

Copiez le code comme suit :

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

S'il s'agit d'un environnement ASP.NET, vous pouvez également utiliser le contrôle côté serveur <TextBox>

pour copier le code comme suit :

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

Notez que class=ckeditor est ajouté au contrôle.

3. Remplacez le contrôle correspondant par le code de l'éditeur

comme suit :

<script type=text/javascript>

CKEDITOR.replace('TextArea1');

//S'il s'agit d'un contrôle côté serveur utilisé dans ASP.NET. environnement <TextBox >

CKEDITOR.replace('tbContent');

//Si le contrôle <TextBox> est dans la page maître, écrivez

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

</script>

4. Configurez l'éditeur

pour copier le code Le code est le suivant :

La configuration de ckeditor est concentrée dans le fichier ckeditor/config.js Voici quelques paramètres de configuration couramment utilisés :

// Langue de l'interface, la valeur par défaut est 'en'

config.langue = 'zh-cn. ';

// Définir la largeur et la hauteur

config.width = 400;

config.height = 400;

// Il existe trois styles d'éditeur : 'kama' (par défaut), 'office2003', 'v2'

config.skin = 'v2'

;

config.uiColor = '#FFF';

// Barre d'outils (Basic'Basic', All-round'Full', Custom) plugins/toolbar/plugin.js

config.toolbar = 'Basic';

config.toolbar = 'Full';

Cela correspondra à :

config.toolbar_Full = [

['Source','-','Save','NewPage','Preview','-', 'Modèles'],

['Couper','Copier','Coller','PasteText','PasteFromWord','-','Imprimer', 'SpellChecker', 'Scayt'],

['Annuler','Rétablir','-','Rechercher','Remplacer','-','SelectAll','RemoveFormat'],

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

'/',

['Gras','Italique','Souligné','Strike','-','Indice','Superscript'],

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

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

['Lien','Dissocier','Anchor'],

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

'/',

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

['TextColor','BGColor']

];

//Si la barre d'outils peut être réduite

config.toolbarCanCollapse = true;

//L'emplacement de la barre d'outils

config.toolbarLocation = 'top'; //Facultatif : bottom

//Si la barre d'outils est développée par défaut

config.toolbarStartupExpanded = true

/ /Annuler Glisser-déposer pour modifier la taille function plugins/resize/plugin.js

config.resize_enabled = false;

//Modifier la hauteur maximale de la taille

config.resize_maxHeight = 3000;

//Modifier la largeur maximale de la taille

config.resize_maxWidth = 3000;

//Modifier la hauteur minimale de la taille

config.resize_minHeight = 250;

//Modifier la largeur minimale de la taille

config.resize_minWidth = 750

//Lors de la soumission d'un formulaire qui contient cet éditeur Quand, s'il faut mettre à jour automatiquement les données dans l'élément

config.autoUpdateElement = true;

// Définit s'il faut utiliser un répertoire absolu ou un répertoire relatif, s'il est vide, cela signifie un répertoire relatif

config.baseHref = ''

// Valeur z-index de l'éditeur

config.baseFloatZIndex = 10000;

// Définir les touches de raccourci

config.keystrokes = [

[ CKEDITOR.ALT + 121 /*F10*/, 'toolbarFocus' ], // Obtenir le focus

[ CKEDITOR.ALT + 122 /*F11*/, 'elementsPathFocus' ], //Focus sur l'élément

[CKEDITOR.SHIFT + 121 /*F10*/, 'contextMenu' ], //Menu texte

[ CKEDITOR.CTRL + 90 /*Z*/, 'undo' ], // Annuler

[ CKEDITOR.CTRL + 89 /*Y*/, 'redo' ], //Rétablir

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

[ CKEDITOR.CTRL + 76 /*L*/, 'lien' ], //Lien

[ CKEDITOR.CTRL + 66 /*B*/, 'gras' ], // Gras

[ CKEDITOR.CTRL + 73 /*I*/, 'italique' ] , //Italique

[ CKEDITOR.CTRL + 85 /*U*/, 'souligné' ], // Souligné

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

]

//Les touches de raccourci définies peuvent entrer en conflit avec les touches de raccourci du navigateur plugins/keystrokes/plugin.js

= [

CKEDITOR.CTRL + 66 /*B*/,

CKEDITOR.CTRL + 73 /*I* /. ,

CKEDITOR.CTRL + 85 /*U*/

]

//Définissez la valeur de couleur d'arrière-plan de l'élément dans l'éditeur plugins/colorbutton/plugin.js.

config.colorButton_backStyle = {

element : 'span',

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

}

//Définir la valeur de la couleur de premier plan 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'

//S'il faut afficher d'autres options de couleur lors de la sélection d'un plugin de couleur/bouton de couleur/ plugin .js

config.colorButton_enableMore = false

//La valeur par défaut de la couleur de premier plan du bloc est définie plugins/colorbutton/plugin.js

config.colorButton_foreStyle = {

element : 'span',

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

;

/ /Les fichiers CSS qui doivent être ajoutés peuvent être ajoutés ici en utilisant des chemins relatifs et des chemins absolus vers le site Web

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

//Direction du texte

config.contentsLangDirection = 'rtl'; //De gauche à droite

//Si vous ne souhaitez pas configurer le fichier de configuration CKeditor, laissez-le vide

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

//Couleur de fond de la zone d'édition de l'interface plugins/dialog/plugin.js

config.dialog_backgroundCoverColor = 'rgb(255, 254, 253)'; //Peut être défini pour référence

config.dialog_backgroundCoverColor = 'white' //Par défaut

//La valeur d'opacité de l'arrière-plan doit être comprise entre : 0,0~1,0 plugins/dialog/plugin.js

config.dialog_backgroundCoverOpacity = 0,5

// Déplacer ou L'unité de distance d'adsorption de la bordure lors du changement d'élément : pixel plugins/dialog/plugin.js

config.dialog_magnetDistance = 20;

// S'il faut refuser la vérification orthographique locale et les invites. La valeur par défaut est de refuser Actuellement, seuls les plugins/wysiwygarea/plugin.js pris en charge par Firefox et Safari

= true

// Effectuer des fonctions d'édition de table telles que : ajouter des lignes ou des colonnes. Actuellement, seul Firefox prend en charge plugins/wysiwygarea /plugin.js

config.disableNativeTableHandles = true ; //La valeur par défaut n'est pas activée

//S'il faut activer la fonction de modification de la taille des images et des tableaux config.disableObjectResizing = true;

config.disableObjectResizing = false //La valeur par défaut est activée

//Définissez le type de document HTML

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

//S'il faut rendre la zone d'édition plugins/editingblock/plugin.js

config.editingBlock = true

//Editor The; étiquette générée par

EnterMode = CKEDITOR.ENTER_P; //Facultatif : CKEDITOR.ENTER_BR ou CKEDITOR.ENTER_DIV

//Utiliser ou non des entités HTML pour la sortie plugins/entities/plugin.js

config.entities = true;

//Définir plus d'entités plugins/entities/plugin.js

config.entities_additional = '#39'; //où # est remplacé &

//S'il faut convertir certains caractères difficiles à afficher en caractères HTML correspondants plugins/entities/plugin.js

config.entities_greek = true

//S'il faut convertir certains caractères latins en HTML; plugins/entities/plugin.js

config.entities_latin

= true;

//S'il faut convertir certains caractères spéciaux en caractères ASCII tels que Ceci est du chinois : 汉语.Convertir en Ceci est du chinois : 中文.

= false ;

//Ajouter un nouveau composant

config.extraPlugins = 'myplugin'; //Exemple non défini par défaut uniquement

//Utiliser la couleur de surbrillance lors de la recherche de plugins/find/plugin.js

config.find_highlight = {

element : 'span',

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

};

//Nom de police par défaut plugins/font/plugin.js

config.font_defaultLabel = 'Arial';

//Les caractères chinois couramment utilisés peuvent être ajoutés au jeu de caractères lors de l'édition des polices : Song, Kai, Hei, etc. plugins/font/plugin.js

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

//Style par défaut de texte plugins/ font/plugin.js

config.font_style = {

element : 'span',

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

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

};

//Taille de police par défaut plugins/font/plugin.js

config.fontSize_defaultLabel = '12px';

//Taille de police facultative lors de l'édition de police plugins/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'

//Styles utilisés lors de la définition de la taille de la police plugins/font/plugin.js

config.fontSize_style = {

element : 'span',

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

overrides : [ { element : ' font', attributs : { 'size' : null } } ]

};

//S'il faut forcer le contenu copié à supprimer le format plugins/pastetext/plugin.js

config.forcePasteAsPlainText =false //Ne pas supprimer

//S'il faut forcer & à remplacer &plugins/htmldataprocessor/plugin.js

config.forceSimpleAmpersand = false;

//Formater la balise d'adresse plugins/format/plugin.js

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

//Formater automatiquement les balises DIV plugins/format/plugin.js

config.format_div = { element : 'div', attributs : { class : 'normalDiv' } };

//Formater automatiquement la balise H1 plugins/format/plugin.js

config.format_h1 = { element : 'h1', attributs : { class : ' contentTitle1' } };

//Formater automatiquement les balises H2 plugins/format/plugin.js

config.format_h2 = { élément : 'h2', attributs : { classe : 'contentTitle2' } };

//Formater automatiquement les balises H3 plugins/format/plugin.js

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

//Formater automatiquement les balises H4 Formatage des plugins/ format/plugin.js

config.format_h1 = { élément : 'h4', attributs : { classe : 'contentTitle4' } } ;

//Formater automatiquement les balises H5 plugins/format/plugin.js

config.format_h1 = { element : 'h5', attributs : { class : 'contentTitle5' } };

//Formater automatiquement les balises H6 plugins/format /plugin.js

config. format_h1 = { élément : 'h6', attributs : { classe : 'contentTitle6' } };

//Formater automatiquement la balise P plugins/format/plugin.js

config.format_p = { element : 'p', attributs : { class : 'normalPara' } };

//Formater automatiquement la balise PRE plugins/format /plugin.js

config.format_pre = { élément : 'pre', attributs : { classe : 'code' } };

//Les noms de balises séparés par des points-virgules sont affichés dans la barre d'outils plugins/format/plugin.js

config.format_tags

= 'p;h1;h2;h3;h4;h5;h6;pre;address;div';

utilisez le mode d'édition HTML complet, le code source inclura : <html><body></body></html> et d'autres balises

config.fullPage = false ;

//S'il faut ignorer les caractères vides dans le paragraphe. S'ils ne sont pas ignorés, les caractères seront représentés par plugins/wysiwygarea/plugin.js

config.ignoreEmptyParagraph = true;

//S'il faut effacer les deux côtés de <a> en même temps; lors de la suppression de l'attribut de lien dans la zone d'attribut d'image Tag plugins/image/plugin.js

config.image_removeLinkByEmptyURL = true;

//Un ensemble de noms de balises séparés par des virgules, affichés dans l'imbrication hiérarchique dans le coin inférieur gauche plugins/menu/plugin.js

config.menu_groups ='clipboard,form,tablecell,tablecellproperties,tablerow,tablecolumn,table,anchor, lien, image, flash, case à cocher, radio, champ de texte, champ caché, bouton d'image, bouton, sélection, zone de texte'

//Délai d'affichage du sous-menu, unité : ms plugins/menu/plugin.js

config.menu_subMenuDelay = 400;

//Lorsqu'une nouvelle commande est exécutée, le contenu de l'éditeur plugins/newpage/plugin.js

config.newpage_html = '';

//Lorsque le texte est copié à partir de Word. , s'il faut formater et supprimer le texte plugins/pastefromword/plugin.js

config.pasteFromWordIgnoreFontFace = true; // La valeur par défaut est d'ignorer le format

// S'il faut utiliser des balises telles que <h1><h2> pour modifier ou remplacer le contenu collé à partir du document Word plugins/pastefromword/plugin.js

config.pasteFromWordKeepsStructure = false

//Quand coller le contenu de Word S'il faut supprimer le format plugins/pastefromword/plugin.js

config.pasteFromWordRemoveStyle = false;

//Formate le contenu HTML de sortie correspondant au type de langage d'arrière-plan. La valeur par défaut est vide

config.protectedSource.push

( //?[/s/S]*?/?>/g );

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

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

//L'étiquette insérée lors de la saisie : shift+Enter

=

CKEDITOR.ENTER_P; //Facultatif : CKEDITOR.ENTER_BR ou CKEDITOR.ENTER_DIV

//Caractère de remplacement d'expression facultatif plugins/smiley/plugin.

smiley_descriptions = [

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

'', '', '', '', '

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

'', ':baiser' , '' ];

//Images d'expression correspondantes plugins/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','enveloppe .gif'];

//L'adresse de l'émoticône plugins/smiley/plugin.js

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

Lors

du chargement de la page, si la boîte d'édition obtient immédiatement le focus plugins/editingblock/plugin.js plugins/editingblock/plugin.js

= false

Comment éditer le code source et les sources WYSIWYG et wysiwyg plugins/editingblock/plugin.js

config.startupMode ='wysiwyg';

//S'il faut afficher la bordure du cadre lors du chargement de plugins/showblocks/plugin.js

config.startupOutlineBlocks = false;

//S'il faut charger le fichier de style plugins/stylescombo/plugin.js

config.stylesCombo_stylesSet

= 'default';

les éléments suivants sont facultatifs

config.stylesCombo_stylesSet = 'mystyles' ;

config.stylesCombo_stylesSet = 'mystyles:/editorstyles/styles.js';

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

//Valeur de l'index de départ

config.tabIndex

= 0;

l'utilisateur tape TAB, le nombre d'espaces passés par l'éditeur, () lorsque la valeur est 0, le focus sortira de la zone d'édition plugins/tab/plugin.js

config.tabSpaces = 0;

//Le modèle par défaut plugins/templates/plugin.js.

config.templates = 'default';

//Fichiers de modèles séparés par des virgules plugins/templates/plugin.js

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

//Lors de l'utilisation de modèles, le contenu édité sera remplacé si la case plugins/templates/plugin.js est cochée

config.templates_replaceContent = true;

//Thème

config.theme = 'default';

//Le nombre d'étapes d'annulation d'enregistrement plugins/undo/plugin.js

config.undoStackSize =20;

//Intégrez CKFinder dans CKEditor, faites attention au chemin sélection de ckfinder Soyez correct.

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