Kezdeti beállítás TinyMCE

Mi particionálásmenüpontot TinyMCE néhány lépést. Általában meg kell tennie a következőket:

Van olyan vélemény, hogy a beállított szövegformázást, a fejlett, hogy a legnépszerűbb témák, zajlik /themes/advanced/skins/default/content.css fájlt. Ez nem így van. Tény, hogy a hivatkozás, hogy a fájl, anélkül, hogy további konfigurációt, a TinyMCE nem.

Megjelenésének testreszabásához a szöveg TinyMCE szerkesztő, tegye a következőket:

1. Copy /themes/advanced/skins/default/content.css abban a könyvtárban, ahol a fájlok vannak css-site, vagy CMS. Szoktam használni a könyvtárat / css (helyhez viszonyítva root).

2. Nevezze át az átmásolt fájlt /css/content.css /css/tinymce.css, mert egy idő után el lehet felejteni, ott volt is, hogy miért van egy fájl neve „content.css”.

3. A beállítások TinyMCE (azaz a beállítások tinyMCE.init tömb), szükséges hozzá a lehetőséget:

4. Meg kell, hogy megbizonyosodjon arról, hogy ez a fájl befolyásolja a TinyMCE. Ehhez az első sorban, hogy cserélje ki a font-size betűméret 10px 12px az. Íme:

Ez a beállítás van értelme, és hagyja, mert mindenki azt hiszi, 10px mérete túl kicsi.

5. Frissítés oldalt. Annak érdekében, hogy a változás bejegyzési, az egyes böngészők, különösen az Opera, szükséges, hogy törölje a gyorsítótárat, hogy túlterheli css-fájlt.

Sokan próbálják megoldani ezt a problémát, írja a kiigazítás tömb tinyMCE.init a következő beállításokat:

Csináld helytelenül! Először is, a TinyMCE hibás, ha dolgozik, húrok, elválasztva tag
. Ez az ismert TinyMCE fejlesztők, de közvetlenül nem mondja, és javasoljuk, hogy használja ezt a beállítást. És másodszor, a mi feladatunk, egészen más - szükség van, hogy nem ugyanaz a sorköz és térköz a bekezdések között. Ezután a felhasználó lesz kényelmesen használható.

Ezért hoztuk létre /css/tinymce.css fájl kell hozzá egy sort:

Az új szakasz nem használja ezt a vonalat, hogy külön egy nagy tagolt, és kifelé néz ki, mint egy új sort.

Most kell, hogy a szöveg létre TinyMCE, megjelenik az oldalakon a honlap az abban a formában, amelyben látható a TinyMCE szerkesztő.

Ha egyszerűen csatlakoztassa /css/tinymce.css fájlt a kódot oldalt az oldal, semmi jó fog jönni belőle. És nem jön ki, mert az előírt szabályokat a /css/tinymce.css írt a „kifejezett” minden fontosabb tag. Így egy egyszerű kapcsolat /css/tinymce.css a HTML-kódot oldalt az oldal, tönkreteheti az oldal elrendezését.

Vágyom, hogy megértsük, hogyan lehetséges az, hogy csatlakoztassa a CSS-szabályok használt TinyMCE úgy, hogy csak befolyásolja egy adott területen a HTML kód (azaz a Oblas amelyben a szöveg segítségével létrehozott TinyMCE). Ennek eredményeként jött csak egy módszer. Egy kicsit kényelmetlen, de működik beton.

Azt kell tennie a következőket:

1. Másolja a fájlt /css/tinymce.css, ami neki a nevét /css/site_tinymce.css. Ebben az új fájlt, akkor regisztrálni kell egy vonalat „.tinymce” előtt minden CSS szabályt. Például, van /css/tinymce.css fájlt a következő tartalommal:

mceItemTable. mceItemTable td. mceItemTable th. mceItemTable felirattal. mceItemVisualAid

2. Csatlakoztassa /css/site_tinymce.css fájlt HTML-kód oldalt az oldal:

3. a terület, ahol a szöveg jelenik meg, létrejön a TinyMCE, arra a következtetésre jutunk a div tag, jelezve TinyMCE osztály:

Így hoztuk létre a CSS-fájl szabályok, amelyek csak a tárgyak belsejében található címke „TinyMCE” osztályú. Ezért ezek a szabályok nem törik az elrendezés a helyszínen. És ezeket a szabályokat alkalmazzák a szövegben létre a TinyMCE, arra a következtetésre jutunk, hogy a szöveg a címke

Miért ez a megközelítés azonban kényelmetlen? Igen, mert most kell szem előtt tartani, hogy ha valami újra beállította /css/tinymce.css fájlt, ugyanazt kell tenni, és /css/site_tinymce.css fájlt.

1. A fájl nem használható komplex választókat. Selectors kell írni a tag kifejezetten vagy egyszerű szabályokat. Következésképpen, az ötlet nem működik húr felírása „.tinymce” előtt minden választó, és keretezés A TinyMCE a címke „TinyMCE” osztályú.</p> <p>2. A fájl tartalmazza veszélyeztetettség nem használható más CSS-fájlokat. Sledushchego vonal típusa:</p> <p>megbontja css-elemző épített TinyMCE, és a szöveg kezd megjelenni teljesen helytelen.</p> <p>Ezek miatt a korlátok, nem látok más megoldást, mint azt az elképzelést, miközben két css-fájlt: egyet az TinyMCE, a második pedig az oldalakat.</p> <p>Még egy utolsó pont - megértsék, hogyan kell használni a TinyMCE tervezés CSS-osztályokat használják az oldalon. Ott kellett ugyanazokkal a problémákkal szembesülnek, mint az előző probléma, de schatyu megoldás bizonyult elég egyszerű.</p> <p>Tehát, van egy CSS-fájl, amely meghatározza a CSS-tervezési szabályok a helyszínen használt. Legyen /css/site.css fájlt. Tegyük fel például, három szabályok, mint ezek:</p> <p>font-family: Verdana, Arial, Helvetica, sans-serif;</p> <p>Azt akarjuk, hogy a TinyMCE képes formázni a szöveget ezeket a szabályokat. Kifelé, úgy kell kinéznie - a központot kell TinyMCE legördülő listából Ktorov három pontot:</p> <p>Amikor kiválasztja a megfelelő elemet, a szöveget kell formázni szabály „.font_big_head”, „.font_mini” vagy „.font_block_code”.</p> <p>Legyen ez a funkció nem nehéz. Szükség van az összehangolás tömb tinyMCE.init hozzá styleselect eleme minden sorában gombokat, például theme_advanced_buttons2. Itt van, hogyan nézhet ki:</p> <p>theme_advanced_buttons2. "Fontselect, fontsizeselect, styleselect"</p> <p>Ezután kell megadni, hogy mely legördülő lista mutatja az elem styleselect. Erre a célra a kiigazítás tömb tinyMCE.init kell hozzá a következő:</p> <p>Azonban annak ellenére, hogy a megfelelő generált HTML kód, nem látjuk a használja ezt a formátumot a szerkesztési ablakban TinyMCE. Miért? Mivel a CSS-fájl /css/site.css a szabályokat ismeretlen TinyMCE.</p> <p>Szóval, mi kell csatlakozni a TinyMCE két fájlt - /css/tinymce.css és /css/site.css. Ugyanakkor tanulmányozza a dokumentumot, azt látjuk, hogy a lehetőséget, hogy csatlakozzon content_css valami lehet csak egy, a CSS fájlban. Ezen kívül, mint már láttuk, hogy csatlakozzon egy CSS-fájl pedig egy másik CSS-fájl egyszerűen nem lehet.</p> <p>Én is próbáltam regisztrálni a tömb tinyMCE.init content_css két lehetőség van:</p> <p>de ahogy várható volt, semmi jó nem vezetett - csak olvasni az első fájlt.</p> <p>Újra kellett menni a forrás TinyMCE, és amit láttam ott? Kiderül, hogy a lehetőséget, hogy adjunk néhány css-fájl ott van, csak azt nem írta a dokumentációban. Csak azt kell felsorolni a fejléc fájlok megosztása nevüket szóközzel / vessző. Íme:</p> <p>content_css: "/css/tinymce.css, /css/site.css"</p> <p>Meg kell, hogy azonnal tárgyalni egy fontos pont.</p> <p>Ne feledje, hogy hozzá egy szabály a „p span <margin: 0; padding: 0;>„File /css/tinymce.css. Tehát nullával, az ebben a szabály” ellensúlyozzák „a bemélyedés a szabályban meghatározott” .font_block_code.”Ez annak a ténynek köszönhető. Ez általában címkézett, mint a választó ( p, span), „súlya” több, mint általában adni csak az osztály nevét (.font_block_code).</p> <p>font-family: Verdana, Arial, Helvetica, sans-serif;</p> <h4>Kapcsolódó cikkek</h4> <ul> <li> <p><a href="/szakerto-116/utmutato-a-router-beallltasanal-snr-cpe-w4g-bscom.html">Útmutató a router beállításánál SNR-CPE-w4g, bscom</a></p> </li> <li> <p><a href="/szakerto-116/centos-5-beallltasa-az-internetes-atjaro-a-dhcp.html">CentOS 5 beállítása az internetes átjáró a DHCP szerver</a></p> </li> <li> <p><a href="/szakerto-116/visszaallltasa-kaputelefon-eltis-tsp100-rd13-a.html">Visszaállítása kaputelefon ELTIS TSP100-rd13 a gyári beállítások</a></p> </li> </ul> </div> <div class="extra"> <div class="info"><a href="/szakerto-116/fertozo-mononukleozis-jelek-tunetek-es-a-kezeles.html">előző</a> ◈ <a href="/szakerto-116/melyek-a-kompresszorok-hasznalt-gumiabroncs.html">a következő</a></div> <div class="clear"></div> </div> </article> </div> </div> </div> </div> <div id="sidebar" class="col-1-3"> <div class="wrap-col"> <div class="box"> <div class="content"> </div> </div> </div> </div> </div> </div> </section> <footer> <div class="wrap-footer pominodiko"> <div class="row"> <div class="col-1-1"> <div class="wrap-col"> <div class="box"> <div class="content"> </div> </div> </div> </div> </div> </div> <div class="copyright"> <h4>Hasznos cikkek</h4> <p> <li><a href="/szakerto-190/a-legjobb-tukor-nelkuli-kamera.html">A legjobb tükör nélküli kamera</a></li> <li><a href="/szakerto-167/a-peldazat-a-menyegzore.html">A példázat a menyegzőre</a></li> <li><a href="/szakerto-195/diktatorok-amelyeket-peldakent-kell-jatszani-a.html">Diktátorok, amelyeket példaként kell játszani a tropikus 5 - korú geek játékakor</a></li> <li><a href="/articles/cseh-bakokat-jellemzoi-a-tartalmat-a-cseh-fajta.html">Cseh bakokat jellemzői a tartalmát a cseh fajta kecske, és nem csak</a></li> <li><a href="/szakerto-173/technika-kenet-keszltmeny.html">Technika kenet készítmény</a></li> <li><a href="/szakerto-188/ket-egy-telefonszam-ertelme-van-mint-mas-telefonok.html">Két egy telefonszám értelme van, mint más telefonok, okostelefonok és PDA vélemények</a></li> <li><a href="/articles/hogyan-penzt-a-nyugdljalap-amelyekbol-penzt.html">Hogyan pénzt a nyugdíjalap - amelyekből pénzt felépüljön egy nyugdíjas -</a></li> </p> <p>Copyright © 2024</p> </div> <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> </footer></div> </body> </html>