PHP & Javascript Rich Text Editor (WYSIWYG)

[ PHP CODE @ 22.01.2010. 11:26 ] @

Pozdrav svima.

Free Rich Text Editor

Na pomenutom linku se nalazi online text editor koji zelim da koristim na jednom projektu, medjutim, i pored toga sto je autor ostavio kratki "how to" ne uspijevam da nadjem resenje za sledece:

Naime, nakon sto u "Design" dijelu se unese neki sadrzaj, u "Code" dijelu se isti pretvara u HTML code. Sad, potrebno mi je da nekako taj "Code" dio ucitam u varijablu i dalje manipulisem s njom. Sa PHP se snalazim onako... dovoljno, ali javascript jos nisam poceo uciti. Imam osjecaj da je nesto vrlo jednostavno, ali zbog navedenog razloga ne mogu da rijesim ovo.

Ovo je PHP dio koji preko varijable unosi sadrzaj u DESIGN dio:

Code:
<?php
function freeRTE_Preload($content) {
    // Strip newline characters.
    $content = str_replace(chr(10), " ", $content);
    $content = str_replace(chr(13), " ", $content);
    // Replace single quotes.
    $content = str_replace(chr(145), chr(39), $content);
    $content = str_replace(chr(146), chr(39), $content);
    // Return the result.
    return $content;
}
// Send the preloaded content to the function.
$content = freeRTE_Preload("<i>This is some <b><br>preloaded</b> content</i>")

?>
<form method="get">

<script src="../js/richtext.js" type="text/javascript" language="javascript"></script>

<script src="../js/config.js" type="text/javascript" language="javascript"></script>

<script>
initRTE('<?= $content ?>', 'example.css');
</script>
<input type="submit">
</form>

Ovo je sadrzaj richtext.js

richtext.js

[ kazil @ 22.01.2010. 12:12 ] @

Sta podrazumevas pod manipulacijom? Kako da manipulises? Sa serverske ili klijent strane?

[ PHP CODE @ 22.01.2010. 12:16 ] @

Pa... npr da sav taj text (koji je HTML code) sacuvam u bazu, ili kreiram novi HTML dokument koji ce opet biti dostupan preko linkova korisniku.
Eto, dakle sacuvati taj HTML code kao medium text u MySQL bazu.
Dakle sa serverske strane. A sav taj proces bi se pokrenuo kada korisnik klikne "Submit" button, koji bi se jesnostavno mogao nazvati i SAVE, jer bi proces bio slican... sacuvati njegov rad u bazu i po potrebi ga dostaviti, ali to je drugi dio price.

[ agvozden @ 22.01.2010. 12:19 ] @

u ovoj funkciji ti se javlja rteFormName
verovatno je definisan u config.js

setuj taj parametar, pa ga hvataj preko 'get'-a

[ PHP CODE @ 22.01.2010. 12:25 ] @

Code:

// Name of the hidden form field.
rteFormName = "freeRTE_content";

Da, ovo imam u config.js
...al mislim da nisam skontao kako da to iskoristim :-/

[ agvozden @ 22.01.2010. 14:15 ] @

pa, namece ti se da probas sa:
$_GET['freeRTE_content'];

hvatas ga kao obicno 'tekstfield' polje.

[ PHP CODE @ 22.01.2010. 17:29 ] @

Kada probam sledece:

Code:
document.write (freeRTE_content);

Ispise mi na stranici:

[object HTMLTextAreaElement]

[ PHP CODE @ 22.01.2010. 20:04 ] @

Drugari, rijesio sam... Eto, samo jos jednom da se zahvalim svima na pomoci... a resenje je bilo ovo:

Code:
getXHTML(trim(document.getElementById(rteFormName).value));

[ PHP CODE @ 25.01.2010. 19:45 ] @

Ne mogu nikako da nastavim s radom, stojim u mjestu vec 3 dana. :(

Naime, zelim ovu varijablu iz js da posaljem na sledecu stranicu, kada se klikne na "Submit", i da se ona konvertuje u PHP varijablu.
Evo kako sam ja to uradio:

Code:

<form action="edit.php" method="post" onsubmit="for_submit()">
<input id=varid type=hidden name=transport value="">
  <table width="100%" border="0">
    <tr>
      <td>
          <script src="js/richtext.js" type="text/javascript" language="JavaScript"></script>
          
          <script src="js/config.js" type="text/javascript" language="JavaScript"></script>
          
          <script>
      <?php

        echo "initRTE('".$content."', 'style.css');";

        ?>
        var newhtml;
        newhtml = (getXHTML(trim(document.getElementById(rteFormName).value)));
        function for_submit() {
        document.getElementById('varid').value = newhtml;
        return true;
        }
        </script>
   <input type="submit">
</form>

na edit.php stranici imam sledece:

Code:
<?php
$display = $_POST["transport"];

echo $display;
?>

...medjutim, stalno prazna stranica mi se prikazuje. Sa druge strane, siguran sam da js varijabla koju saljem "newhtml" ima vrijednost, i to je tekst (HTML code, tacnije). To sam provjerio sa document.write(newhtml);

[ vatri @ 25.01.2010. 19:54 ] @

Hmmm, ne vjerujem da mozes stavljati onsubmit za formu.
Savjet:
1. napravi neki tekst link i stavi mu ovako <a href="#" onclick="for_submit()">Submit</a>
2. u form tag dodaj atribut name="forma" (ili nesto drugo ako vec imas neki element sa imenom forma)
3. u for_submit na kraju dodaj "document.forma.submit()" (i izbrisi return = true;)
4. u php-u (edit.php) stavi "var_dump($display)"
5. pisi pravilno HTML kod, ovako nije pametno <input id=varid type=hidden name=transport value=""> ovako stavi <input id="varid" type="hidden" name="transport" value="">
-----------------------------------------------------------
mozes vidjeti jesi li uzeo pravu vrijednost sa alert() funkcijom u JS-u (lakse je, bar meni).

eto komsija, ako zapne vici :)

[ Nikola Poša @ 25.01.2010. 20:33 ] @

Ako sam dobro razumeo šta je ideja, onda mislim da bi još "elegantnije" rešenje bilo da na onsubmit događaj samo append-uje tu promenljivu na action atribut forme, kao dodatni parametar u url-u, i onda bi ga samo iz GET-a hvatao na serverskoj strani, ovako nekako:

Code:
<form id = "forma" action="edit.php" method="post" onsubmit="this.action = this.action + '?varid=' + document.getElementById('varid').value; return true;">
//ostatak koda
</form>

Ili, kako ja više preferiram, jQuery-jem, bind-ovanje događaja "spolja":

Code:
$(document).ready(function() {
    $('#forma').submit(function() {
        $('#forma').attr('action', $('#forma').attr('action') + '?=' + $('#varid').val());

        return true;
    });
});

I u PHP-u posle imaš:

Code:
$varid = $_GET['varid'];

[ PHP CODE @ 26.01.2010. 01:31 ] @

Hvala svima na odgovorima, problem sam rijesio na malo radikalniji nacin :)
Ponovo su mi se javljali neki problemi i sl, a onda sam odlucio da predjem na drugi open source text editor... i sad sve fino radi :D

Ovdje mozete naci pomenuti text editor

[ alfa-pro @ 12.03.2010. 03:00 ] @

pa jesi uspeo da sredis bar ovaj drugi editor??

[ PHP CODE @ 12.03.2010. 09:59 ] @

Da, da... drugi radi super!
Hvala jos jednom!

[ alfa-pro @ 15.03.2010. 13:32 ] @

Ne nego sam te pitao da li si sredio jer sam ja imao probleme oko konfiguracije sa ovim drugim pa zato!!!