สรุปการกำหนดค่าโดยละเอียดของ ckEditor ใน asp

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

2. แทรกตัวควบคุม HTML <textarea> ที่ซึ่งใช้เอดิเตอร์

คัดลอกโค้ดดังนี้:

<textarea id= TextArea1 cols= 20 rows=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(_,$) %>');

</script>

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';

// แถบเครื่องมือ (พื้นฐาน 'พื้นฐาน', ทุกรอบ 'เต็ม', กำหนดเอง) Plugin/toolbar/plugin.js

config.toolbar = 'พื้นฐาน';

config.toolbar = 'เต็ม';

ซึ่งจะจับคู่:

config.toolbar_Full = [

['แหล่งที่มา','-','บันทึก','หน้าใหม่','ดูตัวอย่าง','-', 'เทมเพลต'],

['ตัด','คัดลอก','วาง','วางข้อความ','PasteFromWord','-','พิมพ์', 'เครื่องตรวจสอบการสะกด', 'Scayt'],

['เลิกทำ','ทำซ้ำ','-','ค้นหา','แทนที่','-','เลือกทั้งหมด','RemoveFormat'],

['แบบฟอร์ม', 'ช่องทำเครื่องหมาย ', 'วิทยุ', 'TextField', 'Textarea', 'เลือก', 'ปุ่ม', 'ImageButton', 'HiddenField'],

'/',

['ตัวหนา','ตัวเอียง','ขีดเส้นใต้','ขีดฆ่า','-','ตัวห้อย','ตัวยก'],

['NumberedList','BulletedList','-','Outdent' ,'เยื้อง','Blockquote'],

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

['ลิงก์','ยกเลิกการเชื่อมโยง','Anchor'],

['รูปภาพ','แฟลช','ตาราง','กฎแนวนอน','ยิ้ม','SpecialChar','PageBreak'],

'/',

[' ลักษณะ','รูปแบบ','แบบอักษร','ขนาดแบบอักษร'],

['สีข้อความ','BGColor']

];

// ระบุว่าแถบเครื่องมือสามารถยุบได้

config.toolbarCanCollapse = true;

// ตำแหน่งของแถบเครื่องมือ

config.toolbarLocation = 'top'; // ตัวเลือก: ด้านล่าง

// ระบุว่าแถบเครื่องมือถูกขยายโดยค่าเริ่มต้น

config.toolbarStartupExpanded = true

; /ยกเลิกการลากและวางเพื่อเปลี่ยนขนาดฟังก์ชั่น Plugin/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 = 10,000;

// ตั้งค่าปุ่มลัด

config.key strokes = [

[ CKEDITOR.ALT + 121 /*F10*/, 'toolbarFocus' ], // รับโฟกัส

[ CKEDITOR.ALT + 122 /*F11*/, 'elementsPathFocus' ], // โฟกัสองค์ประกอบ

[CKEDITOR.SHIFT + 121 /*F10*/, 'contextMenu' ], // เมนูข้อความ

[ CKEDITOR.CTRL + 90 /*Z*/, 'เลิกทำ' ], // เลิกทำ

[ CKEDITOR.CTRL + 89 /*Y*/, 'ทำซ้ำ' ], // ทำซ้ำ

[ CKEDITOR.CTRL + CKEDITOR.SHIFT + 90 /*Z*/, 'ทำซ้ำ' ], //

[ 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' ]

]

// การตั้งค่าปุ่มลัดอาจขัดแย้งกับปุ่มลัดของเบราว์เซอร์ Plugin/key strokes/plugin.js

config.blockedKey strokes = [

CKEDITOR.CTRL + 66 /*B*/,

CKEDITOR.CTRL + 73 /*I* / ,

CKEDITOR.CTRL + 85 /*U*/

]

//ตั้งค่าสีพื้นหลังขององค์ประกอบในตัวแก้ไข Plugins/colorbutton/plugin.js

config.colorButton_backStyle = {

องค์ประกอบ : 'span',

styles : { 'สีพื้นหลัง' : '#(สี)' }

}

//ตั้งค่าของสีเบื้องหน้าปลั๊กอิน/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'

// ไม่ว่าจะแสดงตัวเลือกสีอื่นหรือไม่เมื่อเลือกปลั๊กอินสี/ปุ่มสี/ ปลั๊กอิน .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' } );

// สีพื้นหลังของกล่องแก้ไขอินเทอร์เฟซ Plugin/dialog/plugin.js

config.dialog_พื้นหลังCoverColor = 'rgb(255, 254, 253)'; //สามารถตั้งค่าสำหรับการอ้างอิง

config.dialog_พื้นหลังCoverColor = 'สีขาว' //ค่าเริ่มต้น

//ค่าความทึบของพื้นหลังควรอยู่ระหว่าง: 0.0~1.0 Plugins/dialog/plugin.js

config.dialog_พื้นหลังCoverOpacity = 0.5

// ย้ายหรือหน่วยระยะการดูดซับของเส้นขอบเมื่อเปลี่ยนองค์ประกอบ: pixel Plugins/dialog/plugin.js

config.dialog_magnetDistance = 20;

// ไม่ว่าจะปฏิเสธการตรวจสอบการสะกดในเครื่องและการแจ้งเตือน ค่าเริ่มต้นคือปฏิเสธ ในปัจจุบันมีเพียง firefox และ safari เท่านั้นที่สนับสนุน Plugin/wysiwygarea

/

plugin.js ขณะนี้มีเพียง Firefox เท่านั้นที่รองรับ Plugins/wysiwygarea /plugin.js

config.disableNativeTableHandles = true; //ไม่ได้เปิดใช้งานค่าเริ่มต้น

//ไม่ว่าจะเปิดใช้งานฟังก์ชั่นการเปลี่ยนขนาดของรูปภาพและตาราง config.disableObjectResizing = true;

config.disableObjectResizing = false //ค่าเริ่มต้นถูกเปิดใช้งาน

//ตั้งค่าประเภทเอกสาร HTML

config.docType = '<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 การเปลี่ยนผ่าน//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/entities/plugin.js

config.entities = true;

//Define more entities/entities/plugin.js

config.entities_ allowance = '#39';

// ไม่ว่าจะแปลงอักขระที่ยากต่อการแสดงผลให้เป็นอักขระ HTML ที่เกี่ยวข้อง Plugin/entities/plugin.js

config.entities_greek = true;

// ไม่ว่าจะแปลงอักขระละตินบางตัวเป็น HTML หรือไม่ Plugins/entities/plugin.js

config.entities_latin = true;

// ไม่ว่าจะแปลงอักขระพิเศษบางตัวเป็นอักขระ ASCII เช่น This is Chinese: 汉语.Convert to This is Chinese:

中文= false ;

//เพิ่มส่วนประกอบใหม่

config.extraPlugins = 'myplugin'; //ตัวอย่างที่ไม่ใช่ค่าเริ่มต้นเท่านั้น

//ใช้สีไฮไลต์เมื่อค้นหาปลั๊กอิน/find/plugin.js

config.find_highlight = {

องค์ประกอบ : 'span',

สไตล์ : { 'สีพื้นหลัง' : '#ff0', 'สี' : '#00f' }

};

// ปลั๊กอินชื่อแบบอักษรเริ่มต้น/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 = {

องค์ประกอบ : 'span',

สไตล์ : { 'font-family' : '#(family)' },

แทนที่ : [ { element : 'font', คุณลักษณะ : { 'face' : null } } ]

};

//ขนาดตัวอักษรเริ่มต้น Plugin/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'

//สไตล์ที่ใช้เมื่อตั้งค่าขนาดตัวอักษร Plugin/font/plugin.js

config.fontSize_style = {

องค์ประกอบ : 'span',

สไตล์ : { 'font-size' : '#(ขนาด)' },

แทนที่ : [ { องค์ประกอบ : ' font', คุณลักษณะ : { 'size' : null } } ]

};

// ไม่ว่าจะบังคับให้เนื้อหาที่คัดลอกลบรูปแบบ Plugins/pastetext/plugin.js

config.forcePasteAsPlainText =false //อย่าลบ

//ไม่ว่าจะบังคับ & แทนที่ &plugins/htmldataprocessor/plugin.js

config.forceSimpleAmpersand = false;

//จัดรูปแบบแท็กที่อยู่ Plugins/format/plugin.js

config.format_address = { องค์ประกอบ : 'address' , คุณลักษณะ : { class : 'styledAddress' } };

// จัดรูปแบบแท็ก DIV โดยอัตโนมัติ Plugin/format/plugin.js

config.format_div = { องค์ประกอบ : 'div', คุณลักษณะ : { class : 'normalDiv' } };

// จัดรูปแบบปลั๊กอินแท็ก H1 โดยอัตโนมัติ/format/plugin.js

config.format_h1 = { องค์ประกอบ : 'h1', คุณลักษณะ : { class : ' contentTitle1' } };

// จัดรูปแบบปลั๊กอินแท็ก H2 โดยอัตโนมัติ/format/plugin.js

config.format_h2 = { องค์ประกอบ : 'h2', คุณลักษณะ : { class : 'contentTitle2' } };

อัตโนมัติ

/format/plugin.js

config.format_h1 = { องค์ประกอบ : 'h3', คุณลักษณะ : { class : 'contentTitle3' } };

format/plugin.js

config.format_h1 = { องค์ประกอบ : 'h4', คุณลักษณะ : { class : 'contentTitle4' } };

//จัดรูปแบบแท็ก H5 โดยอัตโนมัติ Plugins/format/plugin.js

config.format_h1 = { องค์ประกอบ : 'h5', คุณลักษณะ : { class : 'contentTitle5' } };

// จัดรูปแบบแท็ก H6 โดยอัตโนมัติ config.format

/plugin.js format_h1 = { องค์ประกอบ : 'h6', คุณลักษณะ : { class : 'contentTitle6' } };

//จัดรูปแบบปลั๊กอินแท็ก P โดยอัตโนมัติ/format/plugin.js

config.format_p = { องค์ประกอบ : 'p', คุณลักษณะ : { class : 'normalPara' } };

//จัดรูปแบบปลั๊กอิน/รูปแบบแท็ก PRE โดยอัตโนมัติ /plugin.js

config.format_pre = { องค์ประกอบ : 'pre', คุณลักษณะ : { 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;

//ไม่ว่าจะละเว้นอักขระว่างในย่อหน้าหรือไม่ก็ตาม หากไม่ละเว้น อักขระจะถูกแทนด้วยปลั๊กอิน/wysiwygarea/plugin.js

config.ignoreEmptyParagraph = true;

//ไม่ว่าจะล้างทั้งสองด้านของ <a> ในเวลาเดียวกันหรือไม่ เมื่อล้างแอตทริบิวต์ลิงก์ในกล่องแอตทริบิวต์รูปภาพ แท็ก Plugins/image/plugin.js

config.image_removeLinkByEmptyURL = true;

//ชุดของชื่อแท็กที่คั่นด้วยเครื่องหมายจุลภาค ซึ่งแสดงอยู่ในลำดับชั้นที่มุมซ้ายล่าง Plugin/menu/plugin.js

='clipboard,form,tablecell,tablecellproperties,tablerow,tablecolumn,table,anchor, link ,image,flash,checkbox,radio,textfield,hiddenfield,imagebutton,button,select,textarea';

// หน่วงเวลาเมื่อแสดงเมนูย่อย หน่วย: ms Plugins/menu/plugin.js

config.menu_subMenuDelay = 400;

//เมื่อคำสั่งใหม่ถูกดำเนินการ เนื้อหาในตัวแก้ไข Plugin/newpage/plugin.js

config.newpage_html = '';

//เมื่อข้อความถูกคัดลอกจาก word ไม่ว่าจะจัดรูปแบบและลบข้อความ Plugins/pastefromword/plugin.js

config.pasteFromWordIgnoreFontFace = true; //ค่าเริ่มต้นคือการละเว้นรูปแบบ

//ไม่ว่าจะใช้แท็กเช่น <h1><h2> เพื่อแก้ไขหรือแทนที่เนื้อหาที่วางจากเอกสารคำ 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:[^/>]+>)|(] + //>)/gi ); // รหัส ASP.Net

// ป้ายกำกับถูกแทรกเมื่อป้อน: shift+Enter

config.shiftEnterMode

= CKEDITOR.ENTER_P; // ตัวเลือก: CKEDITOR.ENTER_BR หรือ CKEDITOR.ENTER_DIV

// ปลั๊กอินเสริมนิพจน์/smiley/plugin

smiley_descriptions = [

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

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

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

'', ':จูบ' , '' ];

// ปลั๊กอินรูปภาพนิพจน์ที่สอดคล้องกัน/ยิ้ม/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','ซองจดหมาย .gif'];

// ที่อยู่ของปลั๊กอินอิโมติคอน/smiley/plugin.js

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

//เมื่อเพจโหลด ไม่ว่ากล่องแก้ไขจะได้รับ focus Plugins/editingblock/plugin.js Plugins/editingblock/plugin.js หรือ

ไม่

ก็ตาม

วิธีแก้ไขซอร์สโค้ดและซอร์ส WYSIWYG และปลั๊กอิน wysiwyg/editingblock/plugin.js

config.startupMode ='wysiwyg';

// ไม่ว่าจะแสดงเส้นขอบเฟรมเมื่อโหลด Plugin/showblocks/plugin.js

config.startupOutlineBlocks = false;

// ไม่ว่าจะโหลดไฟล์สไตล์ Plugins/stylescombo/plugin.js

config.stylesCombo_stylesSet = 'default'

; ต่อไปนี้เป็นทางเลือก

config.stylesCombo_stylesSet = 'mystyles';

config.stylesCombo_stylesSet = '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';

// ปลั๊กอินเทมเพลตที่คั่นด้วยเครื่องหมาย

จุลภาค templates/templates/default.js' ]

//เมื่อใช้เทมเพลต เนื้อหาที่แก้ไขจะถูกแทนที่หากทำเครื่องหมายในช่อง Plugins/templates/plugin.js

config.templates_replaceContent = true;

//Theme

config.theme = 'default';

//จำนวนขั้นตอนการเลิกทำการบันทึก Plugin/undo/plugin.js

config.undoStackSize =20;

//รวม CKFinder ใน CKEditor การเลือก ckfinder ให้ถูกต้อง

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