Setarea primară a tinymce

Separați setarea TinyMCE în mai mulți pași. De obicei, trebuie să faceți următoarele:

Există o opinie că setarea formatării textului pentru cea mai populară temă avansată apare în fișierul /themes/advanced/skins/default/content.css. Nu e așa. De fapt, TinyMCE nu face apeluri la acest fișier fără configurație suplimentară.

Pentru a particulariza aspectul textului în zona de editare TinyMCE, procedați în felul următor:

1. Copiați fișierul /themes/advanced/skins/default/content.css în directorul unde se află css-ul sau CMS-ul site-ului. De obicei folosesc directorul / css (relativ la root-ul site-ului).

2. Redenumiți fișierul copiat din /css/content.css în /css/tinymce.css, deoarece după un timp puteți uita de unde a venit fișierul și ce se numește "content.css".

3. În setările TinyMCE (adică în matricea de configurare tinyMCE.init), adăugați opțiunea:

4. Trebuie să vă asigurați că acest fișier afectează TinyMCE. Pentru a face acest lucru, în prima linie, înlocuiți dimensiunea fontului de dimensiune font de la 10px la 12px. Aici:

Această setare are sens și se lasă, deoarece dimensiunea de 10px este considerată prea mică.

5. Actualizăm pagina. Pentru a vedea modificările în design, în unele browsere, în special Opera, trebuie să ștergeți memoria cache pentru a reporni fișierul css.

Mulți oameni încearcă să rezolve această problemă atribuind următoarele setări matricei de reglaj tinyMCE.init:

Nu este necesar să faceți asta! În primul rând, TinyMCE este buggy atunci când lucrează cu șiruri separate de o etichetă
. Dezvoltatorii de TinyMCE știu despre acest lucru, dar ei nu vorbește direct, dar ei nu recomandă utilizarea acestui set. În al doilea rând, sarcina noastră este complet diferită - trebuie să facem distanța între rânduri și intervalul dintre paragrafe egal. Apoi, utilizatorul va fi confortabil să lucreze cu.

Prin urmare, în fișierul creat /css/tinymce.css trebuie să adăugăm o linie:

Cu această linie, noul paragraf nu va fi separat de o liniuță mare, dar va arăta ca o linie nouă.

Acum trebuie să vă asigurați că textul creat în TinyMCE este afișat pe paginile site-ului în forma în care este vizibil în zona de editare a TinyMCE.

Dacă doar conectăm fișierul /css/tinymce.css la codul paginii site-ului, atunci nimic bun nu va veni din ea. Și nu va funcționa deoarece regulile scrise în /css/tinymce.css sunt scrise în "formă explicită" pentru toate etichetele principale. Astfel, pur și simplu conectarea /css/tinymce.css la codul paginii HTML a paginii site-ului poate interfera cu aspectul paginii.

Pentru mult timp am înțeles cum puteți conecta regulile CSS utilizate în TinyMCE astfel încât acestea să afecteze numai o anumită zonă a codului HTML (adică în regiunea în care se află textul creat cu TinyMCE). Ca urmare, a apărut o singură metodă. Un pic inconfortabil, dar de lucru beton armat.

Trebuie să facem următoarele:

1. Copiați fișierul /css/tinymce.css, dându-i numele /css/site_tinymce.css. În acest fișier nou, trebuie să scrieți un șir ".tinymce" înaintea fiecărei reguli CSS. De exemplu, avem fisierul /css/tinymce.css cu continutul:

mceItemTable. mceItemTable td. mceItemTable th. mceItemTable caption. mceItemVisualAid

2. Conectați fișierul /css/site_tinymce.css la codul paginii HTML a site-ului:

3. Zona în care trebuie creat textul creat în TinyMCE este încapsulată într-o etichetă div cu clasa tinymce:

Astfel, am creat un fișier de reguli CSS care se aplică numai elementelor din interiorul etichetei cu clasa "tinymce". Prin urmare, aceste reguli nu vor viola aspectul site-ului. Și pentru ca aceste reguli să fie aplicate textului creat în TinyMCE, inserăm acest text în etichetă

.

De ce este această abordare incomodă? Da, pentru că acum trebuie să vă amintiți în mod constant că dacă ceva este reconfigurat în fișierul /css/tinymce.css, același lucru trebuie făcut în fișierul /css/site_tinymce.css.

1. Nu puteți utiliza selectori complexi într-un fișier. Selectorii trebuie să fie scrise pentru etichete în formă explicită sau prin simple reguli. Din această cauză, ideea de a scrie linia ".tinymce" înaintea fiecărui selector nu funcționează, iar cadrul