- PLC programozás
- RX 6600 Aktív Displayport-VGA átalakító probléma
- Fejhallgató erősítő és DAC topik
- GeForce RTX 5050 kártyák az MSI portfóliójából
- Vezeték nélküli fülhallgatók
- DUNE médialejátszók topicja
- Steam Deck
- Milyen asztali (teljes vagy fél-) gépet vegyek?
- Házimozi haladó szinten
- Bambu Lab 3D nyomtatók
Új hozzászólás Aktív témák
-
Sk8erPeter
nagyúr
válasz
#68216320 #15016 üzenetére
Szerintem valami meglévő library-t kellene felhasználnod a HTML-elemek szűrésére (lásd a korábbi linket, de lehet, hogy van jobb, mint a HTML Purifier), ez azért közel sem triviális feladat, és néhány regexp nem biztos, hogy elegendő rá. Bár azokkal is megoldható részben.
Az, hogy csak class-ok vannak megengedve, azért jelentősen egyszerűsíti a dolgot (mivel csak a class-attribútumot kell engedned), ezen pedig kliensoldalon úgy lehet segíteni, hogy jól jelenjenek meg ezzel a tartalmak, hogy a TinyMCE-ben különböző stílusokat definiálsz előre. Lásd a "Custom formats"-demót; ha a Formats-ba belenézel, ott például láthatod az Example 1, Example 2 stílusokat - ezek egyszerűen sima span-tagek, és class van hozzáadva:tinymce.init({
mode: "textareas",
plugins: "table",
content_css: "css/content.css",
style_formats: [
{title: 'Bold text', inline: 'b'},
{title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
{title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},
{title: 'Example 1', inline: 'span', classes: 'example1'},
{title: 'Example 2', inline: 'span', classes: 'example2'},
{title: 'Table styles'},
{title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}
],
formats: {
alignleft: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'left'},
aligncenter: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'center'},
alignright: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'right'},
alignfull: {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', classes: 'full'},
bold: {inline: 'span', 'classes': 'bold'},
italic: {inline: 'span', 'classes': 'italic'},
underline: {inline: 'span', 'classes': 'underline', exact: true},
strikethrough: {inline: 'del'},
customformat: {inline: 'span', styles: {color: '#00ff00', fontSize: '20px'}, attributes: {title: 'My custom format'}}
}
});Itt ez a két sor az érdekes persze:
{title: 'Example 1', inline: 'span', classes: 'example1'},
{title: 'Example 2', inline: 'span', classes: 'example2'},Ez jó példa arra, hogy simán megoldható, amit szeretnél, mármint kliensoldalon.
Ettől még szerveroldalon persze kell szűrni ugyanúgy.A TinyMCE-nek is egyébként van már inline szerkesztési funkciója, az egyszerűsíti a dolgot (az oldalra vonatkozó stíluselemek vonatkoznak akkor a szerkeszthető részre is).
De ha a szokásos, iframe-es megoldást választod (mint a fenti), akkor pedig egyszerűen meg kell mondani a TinyMCE-nek, hogy melyik CSS-fájlt használja fel a stílusok érvényesítésére, ezt a content_css opcióval tudod meghatározni (ezt is láthatod fentebb). Ebbe belerakhatod a class-okat, meghatározhatod, hogyan nézzen ki a textarea. Érdemes úgy kialakítani a textarea kinézetét, ahogy várhatóan ki fog nézni a végleges eredmény."Aztán az <img> tovább nehezíti a dolgot, hogy csak a tárhelyen lévő képet fogadja el."
Erre is biztos van már valami nagyon egyszerű függvény, vagy hasonló, vagy csak simán egy regexp is elég lehet (ilyet nem olyan nehéz egyébként írni); esetleg ezt még ki lehet egészíteni file_exists() ellenőrzéssel, ha szükséges (hogy egyáltalán létezik-e az a fájl a szerveren).
Új hozzászólás Aktív témák
- RITKASÁG: MSI Big Bang Z77 MPOWER
- Xiaomi Redmi Note 11 Pro 128GB, Kártyafüggetlen, 1 Év Garanciával
- VÉGKIÁRUSÍTÁS - REFURBISHED - HP Elite / ZBook Thunderbolt 3 docking station
- Dell OptiPlex MT/SFF 3040, 3050, 7050, 3060, 3070, 5070, 7060 /WIN 11 - SZÁMLA- GARANCIA
- Telefon felváráslás!! Samsung Galaxy S22/Samsung Galaxy S22+/Samsung Galaxy S22 Ultra
Állásajánlatok
Cég: PCMENTOR SZERVIZ KFT.
Város: Budapest
Cég: Promenade Publishing House Kft.
Város: Budapest