Új hozzászólás Aktív témák

• #15017 Sk8erPeter nagyúr #68216320 #15016

  Új Válasz 2014-01-31 14:22:49 #15017

  Új hozzászólás

  Összes hozzászólása itt Válaszok az összes hozzászólására itt Válaszok erre a hozzászólásra

  Privát üzenet küldése

  

  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