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 cu TinyMCE în eticheta cu clasa "tinymce".</p> <p>2. Nu puteți folosi alte fișiere CSS în fișier. Liniile din formularul de mai jos:</p> <p>încalcă lucrarea parserului css încorporat în TinyMCE, iar textul începe să se afișeze complet incorect.</p> <p>Din cauza acestor limitări, nu văd o altă soluție diferită de ideea de a păstra două fișiere css: una pentru TinyMCE, cea de-a doua pentru paginile site-ului.</p> <p>Ultimul lucru rămas este să dai seama cum să folosești clasele de design CSS folosite în TinyMCE pe site. Aici a trebuit să ne confruntăm cu aceleași probleme ca și în problema anterioară, dar, din punctul de vedere, soluția sa dovedit a fi destul de simplă.</p> <p>Deci, avem un fișier CSS, în care sunt folosite regulile de design CSS, folosite pe paginile site-ului. Lăsați fișierul /css/site.css. Să avem, de exemplu, trei astfel de reguli:</p> <p>font-familie: Verdana, Arial, Helvetica, sans-serif;</p> <p>Vrem ca TinyMCE să aibă capacitatea de a formata text cu aceste reguli. În exterior ar trebui să arate astfel: în panoul TinyMCE ar trebui să existe o listă drop-down, în care vor fi trei elemente:</p> <p>Dacă selectați elementul corespunzător, textul trebuie formatat cu regula ".font_big_head", ".font_mini" sau ".font_block_code".</p> <p>Nu este dificil să se facă o astfel de funcționalitate. În matricea de configurare tinyMCE.init este necesar să adăugați elementul stilselect la orice conducător al butoanelor, de exemplu în theme_advanced_buttons2. Deci, aceasta ar putea arăta astfel:</p> <p>theme_advanced_buttons2. "fontselect, fontsizeselect, styleselect",</p> <p>Apoi trebuie să specificați ce listă verticală va afișa elementul stilselect. Pentru aceasta, adăugați următoarea opțiune la matricea de configurare tinyMCE.init:</p> <p>Cu toate acestea, în ciuda codului HTML corect generat, nu vom vedea utilizarea acestui format în fereastra de editare TinyMCE. De ce? Da, deoarece fișierul CSS /css/site.css cu regulile noastre nu este cunoscut de TinyMCE.</p> <p>Deci, trebuie să conectăm două fișiere TinyMCE - /css/tinymce.css și /css/site.css. Cu toate acestea, examinând documentația, vedem că utilizând opțiunea content_css pentru a vă conecta, puteți avea un singur fișier CSS. În plus, după cum am explicat deja, nu este posibil să conectați un fișier CSS în alt fișier CSS.</p> <p>Am încercat chiar să înregistrez în matrice tinyMCE.init două opțiuni content_css:</p> <p>dar cum era de așteptat, nu a dus la nimic bun - doar primul fișier este citit.</p> <p>Din nou am trebuit să urc în codul sursă al TinyMCE și ce am văzut acolo? Se pare că abilitatea de a adăuga mai multe fișiere css este, dar acest lucru nu este scris în documentație. Trebuie doar să listați fișierele incluse, separându-le numele cu un spațiu / virgule. Aici:</p> <p>content_css: "/css/tinymce.css, /css/site.css",</p> <p>Un punct important trebuie făcut imediat.</p> <p>Amintiți-vă că am adăugat regula "p, span <margin: 0; padding: 0;>„/css/tinymce.css File. Deci, la zero padding, specificată în această regulă va“ depășesc „indentare specificat în regula“ .font_block_code“. Acest lucru se datorează faptului. Care, de obicei etichetat ca selectorul ( p, span), "cântărește" mai mult decât regula specificată numai folosind numele clasei (.font_block_code).</p> <p>font-familie: Verdana, Arial, Helvetica, sans-serif;</p> <h4>Articole similare</h4> <ul> <li> <p><a href="/utilizator-116/instructiuni-pentru-configurarea-routerului-snr.html">Instrucțiuni pentru configurarea routerului snr-cpe-w4g, bscom</a></p> </li> <li> <p><a href="/utilizator-116/centuri-5-configurarea-unui-gateway-internet-cu-un.html">Centuri 5 Configurarea unui gateway Internet cu un server dhcp</a></p> </li> <li> <p><a href="/utilizator-116/resetati-eltis-tsp100-rd13-la-setarile-din-fabrica.html">Resetați eltis tsp100-rd13 la setările din fabrică</a></p> </li> </ul> <div class="vnizine"><p style="text-align: left;"><a href="/utilizator-116/bila-de-bovine-si-utilizarea-acesteia.html">Pagina anterioară</a></p><p style="text-align: right;"><a href="/utilizator-116/felicitari-amuzante-cu-nunta-pentru-adulti.html">Pagina următoare</a></p> </div> </article> </div> </div> </div> </div><footer class="akatita-footer clearfix"> <div class="akatita-content-layout layout-item-0"> <div class="akatita-content-layout-row"> <div class="akatita-layout-cell layout-item-1" style="width: 20%"> <p style="font-size: 18px; font-family: 'Times New Roman';">Articole aleatoare</p> <br> <ul> <li><a href="/utilizator-126/numarul-de-sarcina-24.html">Numărul de sarcină 24</a></li> <li><a href="/utilizator-120/principalele-tipuri-de-protectie-a-desenelor-auto.html">Principalele tipuri de protecție a desenelor auto-cad</a></li> <li><a href="/utilizator-150/advisor-auto-profit-3.html">Advisor auto profit 3</a></li> <li><a href="/utilizator-187/eticheta-de-nunta-si-sfaturi.html">Eticheta de nunta si sfaturi</a></li> <li><a href="/utilizator-166/skateboard-pentru-incepatori.html">Skateboard pentru începători</a></li> </ul> </div><div class="akatita-layout-cell layout-item-1" style="width: 20%"> <p style="font-size: 18px; font-family: 'Times New Roman';">locație</p> <br> <ul> <li><a href="/locul-pe-harta.html">Suntem pe hartă</a></li> <li><a href="/adresa.html">Adresa</a></li> </ul> <ol> <li><a href="/sitemap/sitemap41.html">sitemap</a></li> <li><a href="/sitemap/sitemap316.html">sitemap</a></li> <li><a href="/sitemap/sitemap915.html">sitemap</a></li> <li><a href="/sitemap/sitemap989.html">sitemap</a></li> <li><a href="/sitemap/sitemap1008.html">sitemap</a></li> </ol> </div><div class="akatita-layout-cell layout-item-1" style="width: 20%"> <p style="font-size: 18px; font-family: 'Times New Roman';">Mai multe despre noi</p> <br> <ul> <li><a href="/contactati-ne.html">Contactați-ne</a></li> <li><a href="/despre-site.html">Despre site</a></li></ul> </ul> </div><div class="akatita-layout-cell layout-item-1" style="width: 40%"> <p style="text-align:right;"><a href="#"></a>Drepturi de autor © 2024. Toate drepturile rezervate.</p><br> <p style="text-align: right;"> <script> new Image().src = "https://counter.yadro.ru/hit;adolfru?r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+ ";h"+escape(document.title.substring(0,150))+ ";"+Math.random();</script> </p> </div> </div> </div> </footer> </div> </div></body> </html>