Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: "textarea" kolorująca kod
Forum PHP.pl > Forum > XML, AJAX
Riklaunim
5.05.2006, 22:57:54
Poszukuję edytora "w" textarea z kolorowaniem składni. Jedyne rozwiązanie OpenSource to http://helene.muze.nl/ ale edytor jest taki nie za bardzo smile.gif
Wyszedłem z nieco innego założenia:
1. mamy niewidoczne textarea (białe, czcionka biała)
2. onKeypress tego textarea jego zawartość leci ajaxem do serwera (biedny serwer)
3. serwer robi highlight_string lub coś i ajaxem aktualizuje treść diva
4. ten div ma określone położenie - dokładnie nad textarea smile.gif

oto zarys koncepcji który "działa": demo

plik.php
[PHP] pobierz, plaintext 
  1. IF(isset($_POST['code']))
  2.     {
  3.     highlight_string("<?php&#092;n".stripslashes($_POST['code'])."\n?>");
  4. // albo geshi kolorujący html ze smartym itd. :)
  5.     }
  6. else
  7.     {
  8.     echo '<html><head>
  9.     <style>
  10.     body {
  11.     border: 0px;
  12.     padding: 0px;
  13.     margin:0px;
  14.     }
  15.     .contentarea {
  16.     position: absolute;
  17.     top: 0%;
  18.     left: 0%;
  19.     font-size:12px;
  20.     font-family:verdana;
  21.     }
  22.     .textarea {
  23.     position: absolute;
  24.     top: 2%;
  25.     left: 0%;
  26.     opacity:10%;
  27.     color: white;
  28.     border: 0px;
  29.     font-size:12px;
  30.     font-family:verdana;
  31.     background-color: transparent; white;
  32.     }
  33.     </style>
  34.     <!-- //Basic Ajax Routine- Author: Dynamic Drive (http://www.dynamicdrive.com) --><script language="JavaScript" src="ajaxroutine.js" charset="utf-8"></script></head><body>';
  35.     
  36.     echo '<textarea id="textarea" class="textarea" rows="100" cols="90" onKeypress="ajaxpack.postAjaxRequest('plik.php', 'code='+document.getElementById('textarea').value, processGetPost(), 'txt');"></textarea>';
  37.     echo '<div id="contentarea" class="contentarea"></div></body></html>';
  38.     
  39.     }
[PHP] pobierz, plaintext


ajaxroutine.js
Kod
//Basic Ajax Routine- Author: Dynamic Drive (http://www.dynamicdrive.com)
//Last updated: Jan 15th, 06'

function createAjaxObj()
    {
 var httprequest=false
 if (window.XMLHttpRequest)
     { // if Mozilla, Safari etc
     httprequest=new XMLHttpRequest()
     if (httprequest.overrideMimeType)
     httprequest.overrideMimeType('text/xml')
     }
 else if (window.ActiveXObject)
     { // if IE
     try
   {
   httprequest=new ActiveXObject("Msxml2.XMLHTTP");
   }
   catch (e)
   {
   try
       {
       httprequest=new ActiveXObject("Microsoft.XMLHTTP");
       }
   catch (e)
       {}
   }
     }
 return httprequest
    }

var ajaxpack=new Object()
ajaxpack.basedomain="http://"+window.location.hostname
ajaxpack.ajaxobj=createAjaxObj()
ajaxpack.filetype="txt"
ajaxpack.addrandomnumber=0 //Set to 1 or 0. See documentation.

ajaxpack.getAjaxRequest=function(url, parameters, callbackfunc, filetype)
    {
    ajaxpack.ajaxobj=createAjaxObj() //recreate ajax object to defeat cache problem in IE
    if (ajaxpack.addrandomnumber==1) //Further defeat caching problem in IE?
    var parameters=parameters+"&ajaxcachebust="+new Date().getTime()
    if (this.ajaxobj)
 {
 this.filetype=filetype
 this.ajaxobj.onreadystatechange=callbackfunc
 this.ajaxobj.open('GET', url+"?"+parameters, true)
 this.ajaxobj.send(null)
 }
    }

ajaxpack.postAjaxRequest=function(url, parameters, callbackfunc, filetype)
    {
    ajaxpack.ajaxobj=createAjaxObj() //recreate ajax object to defeat cache problem in IE
    if (this.ajaxobj)
 {
 this.filetype=filetype
 this.ajaxobj.onreadystatechange = callbackfunc;
 this.ajaxobj.open('POST', url, true);
 this.ajaxobj.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
 this.ajaxobj.setRequestHeader("Content-length", parameters.length);
 this.ajaxobj.setRequestHeader("Connection", "close");
 this.ajaxobj.send(parameters);
 }
    }


var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects=""
var rootdomain="http://"+window.location.hostname

function ajaxpage(url, containerid)
    {
    var page_request = false
    if (window.XMLHttpRequest) // if Mozilla, Safari etc
    page_request = new XMLHttpRequest()
    else if (window.ActiveXObject)
 { // if IE
 try
     {
     page_request = new ActiveXObject("Msxml2.XMLHTTP")
     }
 catch (e)
     {
     try
   {
   page_request = new ActiveXObject("Microsoft.XMLHTTP")
   }
     catch (e)
   {}
     }
 }
    else
    return false
    page_request.onreadystatechange=function()
 {
 loadpage(page_request, containerid)
 }
    if (bustcachevar) //if bust caching of external page
    var bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
    page_request.open('GET', url+bustcacheparameter, true)
    page_request.send(null)
    }

function loadpage(page_request, containerid)
    {
    if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
    document.getElementById(containerid).innerHTML=page_request.responseText
    }

function loadobjs()
    {
    if (!document.getElementById)
    return
    for (i=0; i<arguments.length; i++)
 {
 var file=arguments[i]
 var fileref=""
 if (loadedobjects.indexOf(file)==-1)
     { //Check to see if this object has not already been added to page before proceeding
     if (file.indexOf(".js")!=-1)
   { //If object is a js file
   fileref=document.createElement('script')
   fileref.setAttribute("type","text/javascript");
   fileref.setAttribute("src", file);
   }
     else if (file.indexOf(".css")!=-1)
   { //If object is a css file
   fileref=document.createElement("link")
   fileref.setAttribute("rel", "stylesheet");
   fileref.setAttribute("type", "text/css");
   fileref.setAttribute("href", file);
   }
     }
 if (fileref!="")
     {
     document.getElementsByTagName("head").item(0).appendChild(fileref)
     loadedobjects+=file+" " //Remember this object as being already added to page
     }
 }
    }

function processGetPost(code)
    {
    var myajax=ajaxpack.ajaxobj
    var myfiletype=ajaxpack.filetype
    if (myajax.readyState == 4)
 { //if request of file completed
 if (myajax.status==200 || window.location.href.indexOf("http")==-1)
     { //if request was successful or running script locally
     if (myfiletype=="txt")
   {
   document.getElementById('contentarea').innerHTML=myajax.responseText
   }
     else if (myfiletype=="xml")
   {
   return interact(myajax.responseXml, code)
   }
     }
 }
    }



Problemy
- Jak zrobić by textarea nie miała suwaków, widocznych granic (wszystko zlewało się z tłem)
- zrobić by wskaźnik pozycji w textarea był widoczny (ładny czarny i migający smile.gif)
- ustawić czcionki tak by w IE/Mozilla/Opera były identyczne w textarea jak i w zwracanym tekście (tj. żeby jedno z drugim się pokrywało)

Może macie inne pomysły jak to rozwiązać.

PS. ten lib od ajaxa jest jakiś lewy.. łapie "opóźnienia" jakieś... trzeba to zrobić z prototype'm
LBO
5.05.2006, 23:25:14
Skoro juz się tak bawisz, to pomyśl nad emulowaniem textarea? Łapiesz onkeypress, wsadzasz do diva, w międzyczasie kolorujesz - co ty na to?

edit:

Teraz mi przyszło do głowy, że z focusem ciężko może być.
devnul
5.05.2006, 23:26:38
ja widziałem gdzieś rozwiązanie edytora kodu z podświetlaniem na zasadzie designMode, ale z tego co pamiętam to nie był darmowy, jak znajde link to wrzuce go tutaj.

//EDIT: znalazłem, może się przyda smile.gif http://demo.aboutedit.com/
Riklaunim
6.05.2006, 16:32:54
obecnie szukam jeszcze podświetlaczy JSowych żeby nie robić ajaxa ale muszą być na tyle inteligentne, głupe że jak dam:
[PHP] pobierz, plaintext 
  1. <?php
  2.  
  3. echo 'fooo;
  4. echo 'inne';
  5.  
  6. ?>
[PHP] pobierz, plaintext

to kolorowanie poniżej błędu będzie "inne" niż powinno być smile.gif tak ja tutaj
devnul
6.05.2006, 19:00:24
co do "podświetlaczy" to raczej dobrych darmowych rozwiązań nie znajdzesz - bynajmniej ja sam nigdzie ich nie widziałem. Trzeba napisac samemu smile.gif

A temat to chyba powinien znaleźć się w innym dziale bo raczej ma mało wspólnego z ajaxem i xml winksmiley.jpg
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.