≡×ՄԵՆՈՒ

• Windows 10
• Ինտերնետ, WiFi
• Օգտակար
• Windows 7
• Սխալներ

ckeditor-ի տեղադրում. CKEdit-ի կարգավորում կամ ինչպես հեռացնել լրացուցիչ պատկերակները վահանակի վրա: Սերվերի վրա պատկեր ընտրելը, պատկերների վերբեռնումը սերվերում

→ WYSIWYG CKE խմբագրիչ

Անշուշտ, շատ մշակողներ առնվազն լսել են վեբ էջերում ներկառուցված HTML խմբագրիչների գոյության մասին: Ցանկանում եմ ձեզ ներկայացնել, հավանաբար, մինչ օրս ամենաառաջադեմ WYSIWYG-ը: Չգիտակցողների համար ես համառոտ նկարագրեմ, թե ինչն է վտանգված: Եթե ​​դուք կամ ձեր հաճախորդները ցանկանում եք խմբագրել կայքի բովանդակությունը սեփական ձեռքերով, բայց ժամանակ կամ ցանկություն չկա սովորելու html-ի հիմունքները, ապա Ckeditor-ն այն է, ինչ ձեզ հարկավոր է:

Նախկինում արտադրանքը կոչվում էր FCKeditor, բայց բրիտանացիների միջև անառողջ ասոցիացիաների պատճառով, որոնք կապված էին FCK հապավումների հետ (նախագծի ստեղծող Ֆրեդերիկո Կալդերիա Կնաբեն), խմբագիրը վերանվանվեց Ckeditor: Բացի անունից նոր տարբերակ perl-ի և python-ի ֆայլերի հետ աշխատելու api-ն անհետացավ, համենայն դեպս, անվճար բաշխման ժամանակ: Մշակողները առաջարկում են մի քանիսը սակագնային պլաններաջակցության համար և միգուցե այս պայմաններով ձեզ կտրամադրվեն ոչ միայն դրանք։ Այս պահին լռելյայն կա asp և php: Ես օգտագործում եմ perl իմ աշխատանքում և ինքս կգրեմ ինտերֆեյսը: Ես կտեղադրեմ այն ​​ավելի ուշ: Բայց ընդհանուր առմամբ, նախագիծն ունի plugin-ի ճարտարապետություն, որը բավականին հեշտ է կառավարել, եթե հասկանում ես JS-ը:

Դուք կարող եք ներբեռնել WYSIWYG ckeditor-ը այստեղ կամ www.ckeditor.com կայքում:

Նա իրականում այսպիսի տեսք ունի. Ճիշտ է, ես ձեզ ներկայացրել եմ մի փոքր կտրված տարբերակ, բայց այն գրեթե չի տարբերվում ամբողջական հավաքածուից։

ckeditor-ի միացում և կարգավորում Նախնական կապ

ckeditor-ի միացումը և կարգավորումը շատ հեշտ է:

1 . Ներբեռնեք ckeditor-ը և բացեք այն կայքի արմատին, CMS-ին կամ այլ համակարգին: Մշակողները խորհուրդ չեն տալիս սկսնակ ծրագրավորողներին վերանվանել դիրեկտորիաներն ու ֆայլերը՝ խմբագրում կոնֆլիկտներից խուսափելու համար: Եթե ​​ամեն ինչ մնացել է այնպես, ինչպես կա, ապա լռելյայն գործարկումը րոպեների հարց է:

2. Բեռնեք հիմնական կոդը էջի կոդի մեջ և տեղադրեք textarea տարրը: Ավելին, կարող են լինել մի քանի textarea տարրեր, գլխավորը նրանց տարբեր նույնացուցիչներ հատկացնելն է:

3. Նախնականացում ձեր ճաշակով, բայց ավելի լավ է դա անել փաստաթղթի օբյեկտի մոդելի պատրաստումից հետո:

jquery-ի համար՝

$.noConflict(); jQuery(փաստաթուղթ).ready(function($) ( CKEDITOR.replace("textID",()); ));

ExtJS-ի համար.

Ext.onReady(CKEDITOR.replace("textID",()));

Հին ճանապարհ.

Կամ փակման պիտակից անմիջապես առաջ

CKEDITOR.replace("textID",());

Լրացուցիչ կարգավորում

Լռելյայն կարգավորումները փոխելու համար ckeditor-ը տրամադրում է որոշակի կոնֆիգուրացիայի ֆայլ config.js, որը գտնվում է /ckeditor/config.js հասցեում: Այն պարունակում է կազմաձևման հեշը:

Ահա այս էջի ցուցադրման համար օգտագործվածի օրինակ.

CKEDITOR.editorConfig = ֆունկցիա (config) ( config.skin = "kama"; config.uiColor = "#E0E0E0"; config.language = "ru"; config.fullPage = կեղծ; config.height = 200; config.removePlugins = «չափափոխել, մոտ, պահպանել»; );

config.skin - ինտերֆեյս: Կա երեք տարբերակ՝ kama, v2, office2003: Կանխադրվածը կամա է:

config.uiColor - ինտերֆեյսի գույնը: Աշխատում է միայն կամայի համար։

config.language - Ինտերֆեյսի լեզու:

config.fullPage - խմբագրված փաստաթղթի փաթաթան: Եթե ​​սահմանված է true, ապա խմբագրվող տարածքը կպարունակի ամբողջական html փաստաթուղթ, եթե false՝ միայն բովանդակություն:

config.height - խմբագրվող տարածքի բարձրությունը պիքսելներով: Նույնպես լայնության համար:

config.removePlugins - կոճակների (պլագինների) ցանկ, որոնք պետք է անջատվեն: Օրինակ՝ չափափոխել - դա պայմանավորված է նրանով, որ խմբագրի տարածքը կարող է ձգվել այնպես, ինչպես ցանկանում եք՝ մկնիկի հետ պահելով ներքևի աջ անկյունը, պահպանել՝ պահպանել կոճակը:

CKEditor 4 - WYSIWYG հոդվածի խմբագիր: Այն թույլ է տալիս կատարել տեքստի ճկուն ձևաչափում, ներառյալ աշխատել ոճերի, ցուցակների, հղումների, գրաֆիկայի և այլնի հետ:

Ինտերֆեյս

Նկար 1. Խմբագրի պատուհան

WYSIWYG խմբագրիչի պատուհանը պարունակում է հետևյալ կոճակները.

	Դիտման ռեժիմի անցում
	Հոդվածի կաղապարի տպում և ընտրություն
	Աշխատել սեղմատախտակի հետ (կտրել, պատճենել, տեղադրել, հետարկել)
	Որոնել և փոխարինել
	Ստեղծեք ձևեր
	Սփոյլերների (ծալված տեքստ) և էջի ընդմիջումների տեղադրում
	Փոխեք տեքստի ոճը
	Պարբերության ձևաչափում
	Տեղադրեք հղումներ
	Մեդիա բովանդակության ներդրում երրորդ կողմի կայքերից
	Կպցնելով առարկաներ
	Ֆորմատավորման ոճի ընտրություն
	Պարբերության ձևաչափի ընտրություն
	Տառատեսակի ընտրություն
	Տառատեսակի չափի ընտրություն
	Ընտրեք տեքստի կամ ֆոնի գույնը
	Ուղղագրության ստուգում
	Լրացուցիչ դիտման ընտրանքներ (ցուցադրել բլոկները և ընդլայնել)

Խմբագրի պատուհանի ներքևի վահանակը պարունակում է տեղեկատվություն ընթացիկ պիտակի և տեքստային վիճակագրության մասին.

Դիտման ռեժիմի անցում

Խմբագրի դիտման ռեժիմի փոխարկման վահանակը պարունակում է հետևյալ կոճակները.

Հոդվածի կաղապարի տպում և ընտրություն

Հոդվածի ձևանմուշ տպելու և ընտրելու համար վահանակում տեղադրված են հետևյալ կոճակները.

Հոդվածի տպում տպիչի վրա: Այս կոճակը սեղմելուց հետո կբացվի ստանդարտ երկխոսության տուփ՝ խնդրելով ընտրել տպիչ և ուղարկել հոդվածի տեքստը տպագրության:

Հոդվածի ձևանմուշի ընտրություն. Պատկեր և վերնագիր - վերնագիր, պատկեր և տեքստ պարունակող հոդվածի ձևանմուշ Strange Template - հոդվածի կաղապար, որի տեքստը բաժանված է երկու սյունակի Տեքստ և աղյուսակ - հոդվածի ձևանմուշ, որը պարունակում է վերնագիր, աղյուսակ և տեքստ Կաղապարը ապագա հոդվածի համար նախապես սահմանված HTML նշագրման կոդը է: Կաղապարները նկարագրված են plugins/templates/templates/default.js ֆայլում։ Դուք կարող եք այս ֆայլին ավելացնել հատուկ ձևանմուշներ կամ ստեղծել առանձին կաղապարի ֆայլ և կարգավորել CKEditor-ը, որպեսզի աշխատի դրա հետ:

Աշխատեք clipboard-ի հետ

Խմբագրում հասանելի են clipboard-ի հետևյալ գործողությունները.

	Կտրել կոճակը: Կտրում է հոդվածի ընտրված հատվածը և տեղադրում այն ​​սեղմատախտակի վրա:
	Պատճենել կոճակը: Պատճենում է ընտրված հոդվածի հատվածը և տեղադրում այն ​​clipboard-ում:
	Տեղադրեք կոճակը: Տեղադրում է clipboard-ի բովանդակությունը հոդվածի մեջ: Եթե ​​տեքստը տեղադրված է արտաքին հավելվածներ, ինչպես օրինակ MS Office-ը, ձևաչափման հետ կապված բոլոր պիտակները կներառվեն կպցնելիս: Այս պիտակների մեծ մասը ավելորդ է և պետք է հեռացվի, ինչը դժվարացնում է հոդվածի խմբագրումը: Ուստի խորհուրդ է տրվում օգտագործել այս կոճակը միայն չֆորմատավորված տեքստեր տեղադրելու համար։
	«Մուտքագրել միայն տեքստ» կոճակը: «Տեղադրել» կոճակի նման: Երբ դուք տեղադրում եք հոդվածի հատվածը clipboard-ից, դրա ֆորմատավորումն ամբողջությամբ հեռացվում է:
	«Տեղադրել Word-ից» կոճակը։ «Տեղադրել» կոճակի նման: Օգտագործվում է, եթե ցանկանում եք պահպանել տեղադրված հատվածի ձևաչափումը: Կպցնելը օպտիմալ կերպով պահպանում է տեքստի տեսքը և հեռացնում ավելորդ ձևաչափումը: Խորհուրդ է տրվում MS Word-ից կամ MS Office-ի այլ հավելվածներից տեքստ պատճենելիս:
	Չեղարկել կոճակը: Օգտագործվում է վերջին կատարված փոփոխությունը չեղարկելու համար:
	Կրկնել կոճակը: Օգտագործվում է վերջին չեղարկված փոփոխությունը վերադարձնելու համար:

Որոնել և փոխարինել

Գտնել և փոխարինել գործիքագոտին պարունակում է հետևյալ կոճակները.

Որոնում

Երբ սեղմում եք «Որոնում» կոճակը, որոնման պատուհան է բացվում.

«Գտնել» դաշտում մուտքագրվում է տեքստի ցանկալի հատվածը:

Հետևյալ տարբերակները մատչելի են.

• Ամբողջ տեքստում. Եթե ​​այս տարբերակը միացված է, ապա հոդվածի ավարտին հասնելուց հետո որոնումը կշարունակվի սկզբից։ Եթե ​​այս տարբերակն անջատված է, որոնումը կավարտվի, երբ հասնենք հոդվածի ավարտին:

Որոնում կատարելու համար դուք պետք է մուտքագրեք ցանկալի հատվածը, միացնեք անհրաժեշտ որոնման ընտրանքները և սեղմեք «Գտնել» կոճակը: Խմբագիրը կփնտրի և կընդգծի հոդվածի տեքստում առաջին գտնված հատվածը։ Ամեն անգամ, երբ դուք կրկին սեղմում եք «Գտնել» կոճակը, խմբագիրը կփնտրի ավելի տեքստ տեքստում և կընդգծի հաջորդ գտնված հատվածը:

Փոխարինում

Երբ սեղմում եք «Փոխարինել» կոճակը, բացվում է տեքստի հատվածը փոխարինելու պատուհան.

«Գտնել» դաշտում մուտքագրվում է տեքստի ցանկալի հատվածը: «Փոխարինել հետ» դաշտում տեքստը, որով ցանկանում եք փոխարինել ցանկալի հատվածը։

Հետևյալ տարբերակները մատչելի են.

• Գրանցվել զգայուն: Եթե ​​այս տարբերակը միացված է, ապա որոնումը հաշվի կառնի որոնված հատվածի նիշերի դեպքը:
• Միայն ամբողջ բառը: Եթե ​​այս տարբերակը միացված է, ապա խմբագրիչը կփնտրի մուտքագրված հատվածը որպես ամբողջական բառ: Որոնման արդյունքները չեն ներառի բառեր, որոնց մաս է կազմում մուտքագրված հատվածը:
• Ամբողջ տեքստում. Եթե ​​այս տարբերակը միացված է, ապա հոդվածի ավարտին հասնելուց հետո որոնումը կշարունակվի սկզբից։ Եթե ​​այս տարբերակն անջատված է, որոնումը կավարտվի, երբ հասնենք հոդվածի ավարտին:

Փոխարինումը կատարելու համար դուք պետք է լրացնեք «Գտնել» և «Փոխարինել» դաշտերը, միացնեք որոնման անհրաժեշտ տարբերակները և սեղմեք «Փոխարինել» կամ «Փոխարինել բոլորը» կոճակը: Երբ սեղմում եք «Փոխարինել» կոճակը, խմբագիրը հոդվածի տեքստում կփնտրի և կփոխարինի առաջին գտնված հատվածը։ Ամեն անգամ, երբ դուք կրկին սեղմում եք «Փոխարինել» կոճակը, խմբագրիչը կփնտրի հետագա տեքստը և կփոխարինի հաջորդ գտնված հատվածը:
Երբ սեղմում եք «Փոխարինել բոլորը» կոճակը, խմբագիրն անմիջապես կփնտրի և կփոխարինի անհրաժեշտ հատվածը հոդվածի ամբողջ տեքստում։

Ստեղծեք ձևեր

Ձևաթղթերը նախատեսված են զննարկիչի պատուհանում օգտագործողի մուտքագրման համար՝ փոխանցելով դրանք մշակողին և, անհրաժեշտության դեպքում, ցուցադրելով մշակման արդյունքները: Օրինակ՝ օգտվողի գրանցման ձև, հետադարձ կապի ձև և այլն:

Ձևի ստեղծման վահանակը պարունակում է հետևյալ կոճակները.

	Կոճակ «Ձև»: Օգտագործվում է ձևը հոդվածում տեղադրելու համար: HTML կոդում ձևի պիտակը համապատասխանում է ձևի պիտակին։
	Նշման տուփի կոճակը: Այն օգտագործվում է վանդակները (դրոշի կոճակներ, տիզ) ձևաթղթի կամ հոդվածի մեջ տեղադրելու համար:
	Ռադիո կոճակ: Օգտագործվում է ձևի կամ հոդվածի մեջ ռադիո կոճակներ (անջատիչներ) տեղադրելու համար:
	Տեքստային դաշտի կոճակ: Օգտագործվում է մեկ տողով տեքստի մուտքագրման դաշտ տեղադրելու համար:
	Բազմագիծ տեքստային դաշտի կոճակ: Օգտագործվում է բազմատող տեքստի մուտքագրման դաշտ տեղադրելու համար:
	Բացվող կոճակ: Օգտագործվում է բացվող ցուցակը տեղադրելու համար:
	Կոճակ «Կոճակ»: Օգտագործվում է ձևի կամ հոդվածի մեջ կոճակ մտցնելու համար:
	Պատկերի կոճակ: Օգտագործվում է որպես կոճակ օգտագործվող պատկեր տեղադրելու համար:
	Թաքնված դաշտի կոճակ: Օգտագործվում է թաքնված դաշտը ձևի կամ հոդվածի մեջ տեղադրելու համար:

Ձև

Սեղմելով «Ձև» կոճակը, բացվում է նոր ձևի կարգավորումների պատուհանը:

Ձևի կարգավորումների պատուհանը պարունակում է հետևյալ դաշտերը.

Անուն	Կամայական ձևի անվանումը. HTML կոդում՝ անվան պարամետրը։
Գործողություն	Ծրագրի կամ փաստաթղթի URL-ը, որը մշակում է ձևաթղթում մուտքագրված տվյալները: HTML կոդում՝ գործողության պարամետրը։
Նույնացուցիչ	Ձևաթղթի եզակի ID-ն: HTML կոդում id պարամետրը:
Կոդավորում	Ընտրեք, թե ինչպես պետք է կոդավորվեն ձևի տվյալները: HTML կոդում enctype պարամետրը: Հասանելի արժեքներ. տեքստ/պարզ - բացատները փոխարինվում են «+» նշանով, տառերը և այլ նիշերը կոդավորված չեն. multipart/form-data - տվյալները կոդավորված չեն: Օգտագործվում է ձևաթղթի միջոցով ֆայլեր ուղարկելիս; application/x-www-form-urlencoded - բացատները փոխարինվում են «+» նշանով, լատինատառ դասավորությունից բացի այլ նիշերը (ռուսերեն այբուբենի տառերը և այլն) կոդավորված են իրենց տասնվեցական արժեքներով:
Թիրախ	Ընտրեք այն պատուհանը կամ շրջանակը, որտեղ ձևի տվյալների մշակիչը կցուցադրի մշակման արդյունքները: HTML կոդում՝ թիրախային պարամետրը։ Հասանելի արժեքներ. Նոր պատուհան (_blank) - ցուցադրում է արդյունքները դիտարկիչի նոր պատուհանում; Հիմնական պատուհան (_top) - Անտեսում է շրջանակները և ցուցադրում արդյունքները դիտարկիչի ամբողջական պատուհանում: Եթե ​​շրջանակներ չկան, ապա այն աշխատում է ինչպես _self-ի (տես ստորև); Ընթացիկ պատուհան (_self) - ցուցադրում է արդյունքները ընթացիկ պատուհանում; Ծնող պատուհան (_parent) - Ցուցադրում է արդյունքները մայր շրջանակում: Եթե ​​շրջանակներ չկան, ապա այն աշխատում է նույն կերպ, ինչ _self-ը:
Մեթոդ	Ընտրեք HTTP հարցման եղանակը՝ օգտագործելու համար: HTML կոդում մեթոդի պարամետրը։ Հասանելի արժեքներ. GET - կանչված մշակողի URL-ն օգտագործվում է տվյալների փոխանցման համար: Փոխանցված տվյալները ցուցադրվում են բրաուզերի հասցեի տողում: Փոխանցված տվյալների քանակը սահմանափակվում է բրաուզերի հասցեի տողի առավելագույն երկարությամբ. POST - վեբ զննարկիչի խնդրանքի մարմինը սերվերին օգտագործվում է տվյալների փոխանցման համար: Փոխանցված տվյալները զննարկիչում չեն ցուցադրվում: Փոխանցվող տվյալների քանակը սահմանափակված չէ: Մեթոդը թույլ է տալիս ֆայլեր փոխանցել:

Նշավանդակ

Նշման վանդակը նախատեսված է ցուցադրելու վերահսկիչները, որոնք միացնում կամ անջատում են ցանկացած հատկություն կամ տարբերակ: Նման տարրը կարող է ընդունել երկու արժեքներից մեկը՝ այո կամ ոչ: HTML կոդում այս տարրը համապատասխանում է մուտքագրման տիպ="checkbox" թեգին: Երբ սեղմում եք «Checkbox» կոճակը, բացվում է նոր տարրի կարգավորումների պատուհանը:

Վանդակի տարրի կարգավորումների պատուհանը պարունակում է հետևյալ դաշտերը.

• Անուն - տարրի կամայական անվանում: HTML կոդում անունը պարամետր;
• Արժեք - գործում է որպես եզակի տարրի նույնացուցիչ: HTML կոդում արժեքի պարամետրը;
• Ընտրված է - եթե տարբերակը միացված է, այս տարրը կստուգվի լռելյայն:

ռադիո կոճակ

«Ռադիո կոճակ» տարրը նախատեսված է արժեքների խումբ ցուցադրելու համար՝ դրանցից միայն մեկը ընտրելու ունակությամբ: Նրանք. Խմբի տարրերը փոխադարձաբար բացառվում են: Յուրաքանչյուր տարր կարող է վերցնել երկու արժեքներից մեկը՝ այո կամ ոչ: HTML կոդում այս տարրը համապատասխանում է մուտքագրման տիպ ==«ռադիո» պիտակին։ Երբ սեղմում եք «Ռադիո կոճակը», բացվում է նոր տարրի կարգավորումների պատուհանը:

Radio Button տարրի կարգավորումների պատուհանը պարունակում է հետևյալ դաշտերը.

• Խմբի տարրերը պետք է ունենան նույն անունը:
• Արժեք - գործում է որպես եզակի տարրի նույնացուցիչ: HTML կոդում արժեքի պարամետրը:
• Ընտրված է - եթե տարբերակը միացված է, այս տարրը կստուգվի լռելյայն: Խմբի ներսում այս հատկությունը պետք է միացված լինի միայն մեկ տարրի համար: Եթե ​​այն միացված է մի քանի տարրերի համար, ապա կնշվի միայն վերջինը:

Տեքստային դաշտ

«Տեքստային դաշտ» տարրը նախատեսված է օգտագործողի համար տեքստային տող մուտքագրելու համար: HTML կոդում այս տարրը համապատասխանում է մուտքագրման տիպի ==«տեքստ» պիտակին։ Սեղմելով «Տեքստային դաշտ» կոճակը, բացվում է նոր դաշտի կարգավորումների պատուհանը:

• Անուն - տարրի կամայական անվանում: HTML կոդում՝ անվան պարամետրը։
• Արժեք - պարունակում է տեքստը, որը լռելյայն կցուցադրվի տեքստային դաշտում: HTML կոդում արժեքի պարամետրը:
• Դաշտի լայնությունը (նիշերով) - տեքստային դաշտի մուտքագրման տարածքի երկարությունը նիշերով: HTML կոդում չափի պարամետրը։
• Մաքս. նիշերի քանակը - տողի առավելագույն երկարությունը, որը կարելի է մուտքագրել տեքստային դաշտում, նիշերով: HTML կոդում առավելագույն երկարության պարամետրը:
• Բովանդակության տեսակ - տեքստային դաշտի բովանդակության տեսակը: HTML կոդում տիպի պարամետրը: Նախքան տվյալները սերվեր ուղարկելը, այն ստուգվում է նշված տեսակի հետ համապատասխանության համար:

Հասանելի բովանդակության տեսակներ.

• Email - տեքստային դաշտը պարունակում է էլփոստի հասցե;
• Գաղտնաբառ - տեքստային դաշտը պարունակում է գաղտնաբառը;
• Որոնում - տեքստային դաշտը նախատեսված է որոնված տեքստը մուտքագրելու համար;
• Հեռախոսահամար - տեքստային դաշտը պարունակում է հեռախոսահամար;
• Տեքստ - տեքստային դաշտը պարունակում է սովորական տող;
• Հղում - Տեքստային դաշտը պարունակում է URL:

Բազմագիծ տեքստային դաշտ

«Բազմագծային տեքստային դաշտ» տարրը նախատեսված է օգտագործողի համար մի քանի տողից բաղկացած տեքստ մուտքագրելու համար։ HTML կոդում այս տարրը համապատասխանում է մի զույգ textarea թեգերին: Երբ սեղմում եք «Բազմակի տեքստային դաշտ» կոճակը, բացվում է նոր դաշտի կարգավորումների պատուհանը:

«Տեքստային դաշտ» տարրի կարգավորումների պատուհանում կան հետևյալ դաշտերը.

• Անուն - տարրի կամայական անվանում: HTML կոդում՝ անվան պարամետրը։
• Սյունակներ - դաշտի լայնությունը նիշերով: HTML կոդում cols պարամետրը:
• Տողեր - դաշտի բարձրությունը տողերում: HTML կոդում տողերի պարամետրը:
• Արժեք - Պարունակում է տեքստը, որը կցուցադրվի լռելյայն տեքստային վանդակում:

Բացվող ցուցակ

Բացվող ցուցակի տարրը նախատեսված է բազմակի ընտրության ցուցակ կամ բացվող ցուցակ ցուցադրելու համար: HTML կոդում այս տարրը համապատասխանում է զուգակցված ընտրված թեգին: Ցանկի տարրերը համապատասխանում են զուգակցված տարբերակի պիտակին։ Երբ սեղմում եք «Բացվող ցուցակ» կոճակը, բացվում է նոր ցանկի կարգավորումների պատուհանը:

Բազմակի ընտրության ցանկի կարգավորումների պատուհանը պարունակում է հետևյալ դաշտերը.

• Անուն - տարրի կամայական անվանում: HTML կոդում՝ անվան պարամետրը։
• Արժեք - պարունակում է ցանկի տարրի արժեքը, որը ընտրված է լռելյայն: Այս տարրի HTML կոդում ընտրանքի պիտակը դրված է ընտրված=ընտրված:
• Չափ - ցուցադրվող ցուցակի տարածքի բարձրությունը տողերով: Եթե ​​չափը հավասար է մեկի, ապա կցուցադրվի բացվող ցուցակ: Եթե ​​չափը նշված չէ, ապա ցանկի տեսքը կախված կլինի «Թույլատրել բազմակի ընտրություն» տարբերակից։

Պարամետրերի խումբ «Հասանելի ընտրանքներ».

• Տեքստ - մուտքագրման դաշտ ցանկի տարրի ցուցադրվող տեքստի համար: Այն մուտքագրվում է «Արժեք» դաշտի հետ զույգերով: «Text - Value» զույգը ցանկին ավելացնելու համար սեղմեք «Ավելացնել» կոճակը:
• Արժեք - դաշտ՝ սերվերին փոխանցված ցանկի տարրի արժեքը մուտքագրելու համար: Այն մուտքագրվում է «տեքստ» դաշտի հետ զույգերով: «Text - Value» զույգը ցանկին ավելացնելու համար սեղմեք «Ավելացնել» կոճակը:
• Ավելացնել - մուտքագրված «Text - Value» զույգը ցանկին ավելացնելու կոճակը:
• Խմբագրել - կոճակ՝ ընտրված ցանկի տարրը փոխելու համար: Փոխելու համար անհրաժեշտ է ցանկի կարգավորումներում ընտրել անհրաժեշտ տարրը, խմբագրել «Տեքստ» և «Արժեք» դաշտերի բովանդակությունը և սեղմել «Փոխել» կոճակը: Ընտրված տարրը համապատասխանաբար կթարմացվի:
• Բարձրացնել - կոճակ՝ ցուցակի ընտրված տարրը մեկ մակարդակ վեր տեղափոխելու համար:
• Ստորին - կոճակ՝ ընտրված ցանկի տարրը մեկ մակարդակով ներքև տեղափոխելու համար:
• Նշել որպես ընտրված - երբ կոճակը սեղմվում է, ցանկի ընտրված տարրը նշվում է որպես լռելյայն ընտրված: Տարրի արժեքը ցուցադրվում է «Արժեք» դաշտում (տես վերևում): Այս տարրի HTML կոդում ընտրանքի պիտակը դրված է ընտրված=ընտրված:
• Ջնջել - կոճակ՝ ընտրված տարրը ցանկից հեռացնելու համար:
• Թույլատրել մի քանի տարբերակների ընտրություն. եթե հատկությունը միացված է, ապա ctrl ստեղնի միջոցով հնարավոր կլինի ընտրել մի քանի տարրեր ցանկում: Եթե ​​ցուցակի չափը նշված չէ, և գույքն անջատված է, ապա բացվող ցուցակը կցուցադրվի: Եթե ​​ցուցակի չափը նշված չէ, և հատկությունը միացված է, ապա ցուցակի չափը սահմանվում է չորս:

Հոդվածի վերջը հետևում է...

CKEditor-ը վիզուալ խմբագիր է, որը դուք կարող եք անվճար ավելացնել ձեր կայք, բլոգ կամ ֆորում: Այն բաց կոդով է և աշխատում է ամենատարածված CMS-ով: Սրա տեղադրմամբ տեսողական խմբագիրնույնիսկ անփորձ վեբ վարպետները կարող են կարգավորել այն: Փաստորեն, CKEditor-ի ավելացումը կայք տեղի է ունենում երկու քայլով՝ նախ արխիվը բացում եք սերվերի վրա, այնուհետև մի քանի տող եք ավելացնում էջի կոդը։ Մանրամասն հրահանգներտեղադրման համար դուք կգտնեք խմբագրի հետ արխիվում:

Կայքի այս ընդլայնումը աջակցում է մուտքագրման պատուհանի չափը փոխելու, տեքստը պատճենելու և տեղադրելու, հղումներ ձևավորելու, տառատեսակը փոխելու, վերնագրի և ենթատեքստի տեքստի հետ աշխատելու, հատուկ նիշեր ավելացնելու, տեղեկատվության աղբյուր ավելացնելու, պատկերներ տեղադրելու, խարիսխներ տեղադրելու հնարավորությունը: և այլն։ Տրամադրված ֆունկցիոնալությունը կախված է CKEditor-ի ընտրված տարբերակից: Դրանք երեքն են՝ հիմնական, ստանդարտ և լրիվ: Եթե ​​ամենաառաջադեմ հրատարակության ֆունկցիոնալությունը ձեզ չի բավականացրել, ապա կարող եք ընդլայնել խմբագրի հնարավորությունները պլագինների օգնությամբ։

Մշակողները չեն մոռացել փոփոխության հնարավորության մասին տեսքը CKE խմբագիր. Եթե ​​երկու ստանդարտ թեմաներից ոչ մեկը չի համապատասխանում ձեր ճաշակին, ապա կարող եք լրացուցիչ «երեսներ» փնտրել պաշտոնական կայքում և երրորդ կողմի մասնագիտացված ռեսուրսներում: Հիշեցնում ենք, որ վերը նշված բոլոր գործառույթները հասանելի են վեբ-վարպետներին «մեկ» օգտագործման համար բոլորովին անվճար: Կան նաև տեսողական խմբագրիչի տարբերակներ՝ կոմերցիոն լիցենզիաներով:

Հիմնական առանձնահատկությունները և գործառույթները

• բաշխված երեք տարբերակով, որոնք տարբերվում են ֆունկցիոնալությամբ.
• կարող է «ընդլայնվել» պլագինների միջոցով;
• շատ հեշտ է տեղադրել և աշխատում է ամենատարածված CMS-ի վրա;
• աջակցում է գործիքագոտու թեմաների փոփոխմանը;
• լիովին անվճար է:

Ի՞նչ նորություն կա այս տարբերակում:

4.6.1 (08.12.2016)

• «Callback» պարամետրը CKEDITOR.ajax.post-ում այժմ ընտրովի է.
• Շտկվել են խմբագրի ամբողջ բովանդակությունն ընդգծելու հետ կապված խնդիրները, եթե նախագիծը սկսվում կամ ավարտվում է վիջեթով կամ այլ չընտրելի տարրով: Նույն խնդիրները նկատվել են «Select All» plugin-ի հետ աշխատելիս;
• ֆիքսված բրաուզերի սառեցում, երբ փորձում եք աղյուսակ ներդնել ցուցակում, որտեղ բացակայում է վերջին տարրը.
• բարելավված հավելված՝ CSS ֆոնային հատկությունները նորմալացնելու համար;
• այլ ուղղումներ և բարելավումներ:

CKEditor-ը պատրաստի HTML տեքստային խմբագրիչ է, որը նախատեսված է վեբ էջի բովանդակության ստեղծումը պարզեցնելու համար: Այն WYSIWYG խմբագիր է, որն ապահովում է տեքստի խմբագրման գործառույթ անմիջապես ձեր վեբ էջերում:

CKEditor-ը բաց կոդով հավելված է, այսինքն՝ այն կարող է փոփոխվել ըստ ձեր ցանկության: Դրա օգտակարությունը գալիս է կենսունակ համայնքից, որը չի դադարեցնում հավելվածների մշակումը անվճար հավելումներով և թափանցիկ զարգացման գործընթացով:

3- Ներբեռնեք CKEditor-ը

CKEditor-ը ներբեռնելու 4 տարբերակ ունեք:

Ներբեռնման արդյունքը.

Դուք կարող եք տեսնել CKEditor-ի օրինակներ թղթապանակում նմուշներ:

4- Հիմնական օրինակներ.

Այս հոդվածի բոլոր օրինակները պարունակվում են թղթապանակում նմուշներձեր ներբեռնած CKE խմբագրում: Բայց ես կփորձեմ հեշտացնել ձեզ համար:

Ստեղծեք թղթապանակ իմ օրինակները, այս հոդվածի օրինակները կլինեն այդ թղթապանակում։

4.1- Փոխարինեք Textarea տարրերը՝ օգտագործելով JavaScript

Պարզ օրինակ է CKEditor.replace(..)-ի օգտագործումը՝ CKEditor-ի միջոցով փոխարինելու համար:

replacebycode.html

Փոխարինեք Textarea-ն կոդով Փոխարինեք Textarea տարրերը՝ օգտագործելով JavaScript կոդը

Բարև CKE խմբագրիչ

CKEDITOR.replace ("խմբագիր1");

Տես օրինակ.

Գործարկման արդյունքների օրինակ.

4.2- Փոխարինել textarea տարրերը name class-ով

Ունենալով հատկանիշ Անուն,և class =="ckeditor"-ը ավտոմատ կերպով կփոխարինվի CKEditor-ով:

Տեքստ

replacebyclass.html

Փոխարինեք Textareas-ը դասի անունով Փոխարինեք Textarea տարրերը դասի անունով

Բարև CKE խմբագրիչ

Գործարկելով օրինակը.

4.3- Ստեղծեք CKE խմբագրիչ jQuery-ով

jQuery-ի միջոցով CKEditor ստեղծելու օրինակ:

jQuery Adapter - CKEditor Sample $(document).ready(function() ($("#editor1").ckeditor(); )); setValue() ($("#editor1").val($("input#val").val()); ) Ստեղծել խմբագիրներ jQuery-ով

Բարև CKE խմբագրիչ