ملخص التكوين التفصيلي لـ ckEditor في asp

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

2. أدخل عنصر تحكم HTML <textarea> حيث يتم استخدام المحرر،

انسخ الكود كما يلي:

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

إذا كانت بيئة ASP.NET، فيمكنك أيضًا استخدام عنصر التحكم من جانب الخادم <TextBox>

لنسخ التعليمات البرمجية كما يلي:

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

لاحظ أنه تمت إضافة class=ckeditor إلى عنصر التحكم.

3. استبدل عنصر التحكم المقابل برمز المحرر

كما يلي:

<script type=text/javascript>

CKEDITOR.replace('TextArea1');

//إذا كان عنصر تحكم من جانب الخادم مستخدمًا في ASP.NET بيئة <TextBox >

CKEDITOR.replace('tbContent');

// إذا كان عنصر التحكم <TextBox> موجودًا في الصفحة الرئيسية، فاكتب

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

4.

قم بتكوين المحرر

لنسخ ملف الكود الكود كما يلي:

تكوين ckeditor يتركز في ملف ckeditor/config.js فيما يلي بعض معلمات التكوين شائعة الاستخدام:

// لغة الواجهة، الإعداد الافتراضي هو 'en'

config.language = 'zh-cn.

'

;

اضبط العرض والارتفاع

config.width = 400;

config.height = 400;

// هناك ثلاثة أنماط للمحرر: 'kama' (افتراضي)، 'office2003'، 'v2'

config.skin = 'v2'

؛

config.uiColor = '#FFF';

// شريط الأدوات (أساسي'أساسي'، شامل'كامل'، مخصص) plugins/toolbar/plugin.js

config.toolbar = 'Basic';

config.toolbar = 'Full';

سيطابق هذا:

config.toolbar_Full = [

['Source','-','Save','NewPage','Preview','-', "قوالب"]،

["قص"، "نسخ"، "لصق"، "لصق نص"، "لصق من كلمة"، "-"، "طباعة"، 'SpellChecker', 'Scayt'],

['تراجع','إعادة','-','بحث','استبدال','-','SelectAll','RemoveFormat'],

['نموذج', 'خانة اختيار "، "الراديو"، "حقل النص"، "منطقة النص"، "تحديد"، "زر"، "ImageButton"، "الحقل المخفي"]،

'/',

['غامق','مائل','تسطير','خط','-','منخفض','مرتفع'],

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

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

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

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

'/',

[' الأنماط','التنسيق','الخط','حجم الخط'],

['لون النص','BGColor']

];

// ما إذا كان من الممكن طي شريط الأدوات

config.toolbarCanCollapse = true;

// موقع شريط الأدوات

config.toolbarLocation = 'top'; // اختياري: أسفل

// ما إذا كان شريط الأدوات موسعًا بشكل افتراضي

config.toolbarStartupExpanded = true

/ / إلغاء قم بالسحب والإسقاط لتغيير الحجم plugins/resize/plugin.js

config.resize_enabled = false;

// تغيير الحد الأقصى لارتفاع الحجم

config.resize_maxHeight = 3000;

// تغيير الحد الأقصى لعرض الحجم

config.resize_maxWidth = 3000;

// تغيير الحد الأدنى لارتفاع الحجم

config.resize_minHeight = 250;

//

تغيير الحد الأدنى لعرض الحجم

config.resize_minWidth = 750;

النموذج الذي يحتوي على هذا المحرر، سواء كان سيتم تحديث البيانات في العنصر تلقائيًا

config.autoUpdateElement = true;

// قم بتعيين ما إذا كنت تريد استخدام دليل مطلق أو دليل نسبي، إذا كان فارغًا، فهذا يعني دليل نسبي

config.baseHref = ''

// قيمة فهرس z للمحرر

config.baseFloatZIndex = 10000؛

// تعيين مفاتيح الاختصار

config.keystrokes = [

[ CKEDITOR.ALT + 121 /*F10*/, 'toolbarFocus' ]، // الحصول على التركيز

[ CKEDITOR.ALT + 122 /*F11*/, 'elementsPathFocus'], // تركيز العنصر

[CKEDITOR.SHIFT + 121 /*F10*/, 'contextMenu' ], // القائمة النصية

[ CKEDITOR.CTRL + 90 /*Z*/, 'undo' ], // تراجع

[ CKEDITOR.CTRL + 89 /*Y*/, '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' ] ، // مائل

[ CKEDITOR.CTRL + 85 /*U*/، 'تسطير' ]، // تسطير

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

]

// قد تتعارض مجموعة مفاتيح الاختصار مع مفاتيح اختصار المتصفح plugins/keystrokes/plugin.js

config.blockedKeystrokes = [

CKEDITOR.CTRL + 66 /*B*/,

CKEDITOR.CTRL + 73 /*I* / ,

CKEDITOR.CTRL + 85 /*U*/

]

// قم بتعيين قيمة لون الخلفية للعنصر في plugins/colorbutton/plugin.js للمحرر.

config.colorButton_backStyle = {

element : 'span',

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

}

// قم بتعيين قيمة 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,FFFE0,F0FFF0,F0FFFF,F0F8FF,E6E6FA,FFF'

//ما إذا كان سيتم عرض خيارات الألوان الأخرى عند تحديد لون إضافي/colorbutton/ البرنامج المساعد .js

config.colorButton_enableMore = false

// القيمة الافتراضية للون الأمامي للكتلة هي plugins/colorbutton/plugin.js

config.colorButton_foreStyle = {

element : 'span',

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

//

يمكن إضافة ملفات CSS التي تحتاج إلى إضافتها هنا باستخدام المسارات النسبية والمسارات المطلقة لموقع الويب

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

// اتجاه النص

config.contentsLangDirection = 'rtl'; // من اليسار إلى اليمين

// إذا كنت لا ترغب في تكوين ملف تكوين CKeditor، فما عليك سوى تركه فارغًا

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

// لون خلفية مربع تحرير الواجهة plugins/dialog/plugin.js

config.dialog_backgroundCoverColor = 'rgb(255, 254, 253)'; // يمكن تعيينه كمرجع

config.dialog_backgroundCoverColor = 'white' // افتراضي

// يجب أن تكون قيمة عتامة الخلفية بين: 0.0~1.0 plugins/dialog/plugin.js

config.dialog_backgroundCoverOpacity = 0.5

// نقل أو وحدة مسافة الامتزاز للحدود عند تغيير العنصر: Pixel plugins/dialog/plugin.js

config.dialog_magnetDistance = 20;

// ما إذا كان سيتم رفض التدقيق الإملائي المحلي والمطالبات. في الوقت الحالي، يدعم Firefox وsafari فقط المكونات الإضافية/wysiwygarea/

plugin.js

.

حاليًا، يدعم متصفح Firefox فقط المكونات الإضافية/wysiwygarea /plugin.js

config.disableNativeTableHandles = true; // لم يتم تمكين الإعداد الافتراضي

// ما إذا كان سيتم تمكين وظيفة تغيير حجم الصور والجداول config.disableObjectResizing = true;

config.disableObjectResizing = false // تم تمكين الإعداد الافتراضي

// تعيين نوع مستند HTML

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

// ما إذا كان سيتم عرض المكونات الإضافية لمنطقة التحرير/editingblock/plugin.js

config.editingBlock

= true;

التسمية التي تم إنشاؤها بواسطة

EnterMode = CKEDITOR.ENTER_P؛ // اختياري: CKEDITOR.ENTER_BR أو CKEDITOR.ENTER_DIV

// ما إذا كان سيتم استخدام كيانات HTML لمكونات الإخراج/الكيانات/plugin.js

config.entities = true;

// تحديد المزيد من الكيانات plugins/entities/plugin.js

config.entities_additional = '#39';

// ما إذا كان سيتم تحويل بعض الأحرف التي يصعب عرضها إلى أحرف HTML المقابلة plugins/entities/plugin.js

config.entities_greek = true;

// ما إذا كان سيتم تحويل بعض الأحرف اللاتينية إلى HTML plugins/entities/plugin.js

config.entities_latin = true;

// ما إذا كان سيتم تحويل بعض الأحرف الخاصة إلى أحرف ASCII مثل هذا باللغة الصينية: 汉语. التحويل إلى هذا باللغة الصينية: 中文 plugins/entities/plugin.js

config.entities_processNumerical = خطأ

// أضف مكونًا جديدًا

config.extraPlugins = 'myplugin'; // مثال غير افتراضي فقط

// استخدم لون التمييز عند البحث في المكونات الإضافية/find/plugin.js

config.find_highlight = {

element : 'span',

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

};

// اسم الخط الافتراضي plugins/font/plugin.js

config.font_defaultLabel = 'Arial';

// يمكن إضافة الأحرف الصينية شائعة الاستخدام إلى مجموعة الأحرف عند تحرير الخطوط: Song وKai وHei وما إلى ذلك. plugins/font/plugin.js

config.font_names

= 'Arial;Times New Roman;Verdana';

ملحقات النص/font/plugin.js

config.font_style = {

element : 'span',

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

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

};

// حجم الخط الافتراضي plugins/font/plugin.js

config.fontSize_defaultLabel = '12px';

// حجم الخط الاختياري عند تحرير ملحقات الخط/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'

// الأنماط المستخدمة عند تحديد حجم الخط plugins/font/plugin.js

config.fontSize_style = {

element : 'span',

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

overrides : [ { element : ' Font', attributes : { 'size' : null } } ]

};

// ما إذا كان سيتم فرض المحتوى المنسوخ على إزالة التنسيق plugins/pastetext/plugin.js

config.forcePasteAsPlainText =false // لا تقم بالإزالة

// ما إذا كان سيتم فرض & استبدال &plugins/htmldataprocessor/plugin.js

config.forceSimpleAmpersand = false

// تنسيق علامة العنوان plugins/format/plugin.js

config.format_address = { element : 'address' , السمات : { class : 'styledAddress' } };

// تنسيق علامات DIV تلقائيًا plugins/format/plugin.js

config.format_div = { العنصر : 'div', attributes : { class : 'normalDiv' } };

// تنسيق علامة H1 تلقائيًا plugins/format/plugin.js

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

// تنسيق علامات H2 تلقائيًا plugins/format/plugin.js

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

تلقائيًا

plugins/format/plugin.js

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

format/plugin.js

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

// تنسيق علامات H5 تلقائيًا plugins/format/plugin.js

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

// تنسيق علامات H6 تلقائيًا plugins/format /plugin.js

config. format_h1 = { العنصر : 'h6'، السمات: { class : 'contentTitle6' } };

//

تنسيق علامة P تلقائيًا plugins/format/plugin.js

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

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

// يتم عرض أسماء العلامات مفصولة بفواصل منقوطة على شريط الأدوات plugins/format/plugin.js

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

; استخدم وضع تحرير HTML الكامل، وسيتضمن كود المصدر: <html><body></body></html> وعلامات أخرى

config.fullPage = false;

// ما إذا كان سيتم تجاهل الأحرف الفارغة في الفقرة، إذا لم يتم تجاهلها، فسيتم تمثيل الأحرف بواسطة plugins/wysiwygarea/plugin.js

config.ignoreEmptyParagraph = true;

// ما إذا كان سيتم مسح كلا الجانبين من <a> في نفس الوقت عند مسح سمة الرابط في مربع سمة الصورة ضع علامة على plugins/image/plugin.js

config.image_removeLinkByEmptyURL = true;

//

مجموعة من أسماء العلامات مفصولة بفواصل، يتم عرضها في التداخل الهرمي في الزاوية اليسرى السفلية plugins/menu/plugin.js.

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

//تأخير عند عرض القائمة الفرعية، الوحدة: ms plugins/menu/plugin.js

config.menu_subMenuDelay = 400;

// عند تنفيذ أمر جديد، المحتوى الموجود في المحرر plugins/newpage/plugin.js

config.newpage_html

= '';

، ما إذا كان سيتم تنسيق وإزالة المكونات الإضافية النصية/pastefromword/plugin.js

config.pasteFromWordIgnoreFontFace = true; // الافتراضي هو تجاهل التنسيق

// ما إذا كان سيتم استخدام علامات مثل <h1><h2> لتعديل أو استبدال المحتوى الملصق من مستند Word plugins/pastefromword/plugin.js

config.pasteFromWordKeepsStructure

= false;

لصق المحتوى من الكلمة ما إذا كان سيتم إزالة تنسيق plugins/pastefromword/plugin.js

config.pasteFromWordRemoveStyle = false;

// قم بتنسيق محتوى HTML الناتج المطابق لنوع لغة الخلفية. الإعداد الافتراضي هو فارغ

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

; protectedSource.push( //g ); // كود ASP

config.protectedSource.push( /(]+>[/s|/S]*?<//asp:[^/>]+>)|(] + //>)/جي ); رمز ASP.Net

// الملصق المُدرج عند الإدخال: Shift+Enter

config.shiftEnterMode

= CKEDITOR.ENTER_P; // اختياري: CKEDITOR.ENTER_BR أو CKEDITOR.ENTER_DIV

// المكونات الإضافية لأحرف التعبير الاختيارية/smiley/plugin.

smiley_descriptions = [

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

''، ''، ''، ''، '

'، ''، ''، '؛('، ''، ''، ''، ''،

''، ':قبلة' , '' ];

// ملحقات صور التعبير المقابلة/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'];

// عنوان المكونات الإضافية للرموز التعبيرية/smiley/plugin.js

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

تحميل

الصفحة، ما إذا كان مربع التحرير سيحصل على المكونات الإضافية للتركيز على الفور/editingblock/plugin.js plugins/editingblock/plugin.js

= false;

كيفية تحرير كود المصدر ومصدر WYSIWYG ومكونات wysiwyg الإضافية/editingblock/plugin.js

.

// ما إذا كان سيتم عرض حدود الإطار عند تحميل المكونات الإضافية/showblocks/plugin.js

config.startupOutlineBlocks = false;

// ما إذا كان سيتم تحميل ملف النمط plugins/stylescombo/plugin.js

config.stylesCombo_stylesSet

= 'default';

config.stylesCombo_stylesSet

= 'mystyles'

اختياري

'mystyles:/editorstyles/styles.js';

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

// بدء قيمة الفهرس

config.tabIndex

= 0;

أنواع المستخدمين TAB، عدد المسافات التي مررها المحرر، () عندما تكون القيمة 0، سينتقل التركيز خارج مربع التحرير plugins/tab/plugin.js

config.tabSpaces = 0;

// plugins/templates/plugin.js للقالب الافتراضي

= 'default';

// ملفات القوالب المفصولة بفاصلات plugins/templates/plugin.js

= [ ' plugins/

templates/templates/default.js' ]

// عند استخدام القوالب، سيتم استبدال محتوى التعديل إذا تم تحديد مربع plugins/templates/plugin.js

config.templates_replaceContent = true;

//Theme

config.theme = 'default';

// عدد خطوات التراجع عن التسجيل plugins/undo/plugin.js

config.undoStackSize =20;

// دمج CKFinder في CKEditor، انتبه إلى المسار اختيار ckfinder يكون صحيحا.

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