Editeur Wysiwyg en ligne

Le langage de programmation retenu est le PHP pour la partie serveur lecture modification et sauvegarde des  articles WEB etJavaScript pour la partie saisie à l'écran sur son micro. Ces deux langages doivent être suffisamment maîtrisés pour se lancer dans l’aventure.

Si cet éditeur n'est pas parfait il sert néanmoins à gérer ce site et quelques autres sans problèmes majeurs. Pour les programmeurs il est possible de dépasser ses limites en insérant du code directement dans le HTML qui s'affiche en dessous. Néanmoins ce code ne doit pas perturber l'élément "content editable" dans lequel on affiche et écrit et ces petites bêtes sont facilement irritables. Un système d'insertion un peu équivalent au require est prévu a cette effet pour insérer en dehors du WysiWyg le code spécifique. Lorsqu'on appel l'article en modification ce code spécifique est retiré et remplacé par le nom qui sert à l'appeler encadré d'une balise spécifique.

Vu la complexité de l'outil nous vous l'offrons en espérant que vous en tirerez profit et que vous le perfectionnerez.

Vu sa complexité nous allons détailler chaque module pas à pas. Ne perdez pas patiente si c'est un peu long, ce sera l'occasion pour nous de mieux restructurer l'ensemble qui au cours de son évolution sur plusieurs années a forcément un peu divergé.

Voici le programme Principal, nous allons le détailler dans les pages suivantes

<?php  session_start();

// programmes/vision.php Pack Web RPJJ v1.0  Janvier 2015

//if ($_SESSION['user_ok']=="WOKW")   { // 1 fermeture à la fin du programe

$msg="";

$dossier_a = ( isset($_GET['dossier_a']) ) ? $_GET['dossier_a'] :"";

if ( isset($_POST['dossier_a']) ) $dossier_a=$_POST['dossier_a'];

$page_a = ( isset($_GET['page_a']) ) ? $_GET['page_a'] :"";

  if ( isset($_POST['page_a']) ) $page_a=$_POST['page_a'];

  $p=strpos($page_a,"." );     // recherche position du suffixe

  $fic_c=substr($page_a,0,$p); // suppression du suffixe pour $fic_c

if ($page_a=="nouveau") $new_fic=1;

else $new_fic=0;

if ( isset($_POST['new_fic']) ) $new_fic=$_POST['new_fic'];

$php1 = ( isset($_GET['php1']) ) ? $_GET['php1'] :"";

if ( isset($_POST['php1']) ) $php1=$_POST['php1'];

$cmd = ( isset($_POST['cmd']) ) ? $_POST['cmd'] :"";

$vision_images_affiche=( isset($_POST['vision_images_affiche']) ) ? $_POST['vision_images_affiche']:0;

//echo 'Vision_images_affiche =>'.$vision_images_affiche."<=<br>";

$navig= "X";

if ( strpos( $_SERVER['HTTP_USER_AGENT'], 'Firefox' ) !== FALSE ) { $navig= "Firefox"; }

elseif ( strpos( $_SERVER['HTTP_USER_AGENT'], 'Opera' ) !== FALSE ) { $navig= "Opera"; }

elseif ( strpos( $_SERVER['HTTP_USER_AGENT'], 'Chrome' ) !== FALSE ) { $navig= "Chrome"; }

elseif ( strpos($_SERVER['HTTP_USER_AGENT'], 'Windows NT 6.1' ) !== FALSE ) { $navig= "IE"; }

// Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; rv:11.0) like Gecko

$u_agent=$_SERVER["HTTP_USER_AGENT"];

if (strpos($u_agent,"Android") ¦¦ strpos($u_agent,"iPhone") ¦¦ strpos($u_agent,"Nokia") ¦¦

  strpos($u_agent,"BlackBerry")¦¦ strpos($u_agent,"SAMSUNG")¦¦ strpos($u_agent,"Windows Phone") ) $mobil=1;

//------      MAJ A FAIRE  POUR MOBILES charger mobile.css à la place de css.css

$nom_site=$_SERVER["SERVER_NAME"];

if (isset($_POST['cadrage']))  $cadrage=$_POST['cadrage'];  else $cadrage="justifyfull";

$tampon="";

require ('_parametres/params_site.inc');

$url_s=$url_site."/programmes/vision.php?dossier_a=".$dossier_a."&amp;page_a=".$page_a;

$url_t=$url_site."/programmes/vision.php?dossier_a=".$dossier_a."&amp;page_a=nouveau";

$code_html = ( isset($_POST['code_html']) ) ? stripslashes($_POST['code_html']): "";

   $ok_htrj="0";

   $crlf=CHR(13).CHR(10);

// Si enregistrer enregistrer le fichier code_html mis en forme

//echo " cmd ->".$cmd."<- <br>";

if($cmd=="ENREGISTRER" ¦¦ $cmd=="ENREGIST_Q" ) {

   $msg="";

   // Préparation

   $code_html=str_replace("<p><br /></p><hr>","",$code_html);

   $code_html=str_replace('',"",$code_html);  // Ancres sans href

   $code_html=str_replace('','',$code_html);   // données de styles non utilisées pour font size :

   $code_html=str_replace('','',$code_html);   //  // données de styles non utilisées pour font size :

   $code_html=str_replace("index.php","index.php",$code_html);

   // Placer les retour ligne standar partout

   $code_html=str_replace("</p>","</p>".$crlf,$code_html);

   $code_html=str_replace("<br>","<br>".$crlf,$code_html);

   $code_html=str_replace("<br />","<br />".$crlf,$code_html);

   $code_html=preg_replace("(</h(.*?)>)","</h$1>".$crlf,$code_html);

   $code_html=preg_replace("(<hr(.*?)>)","<hr$1>".$crlf,$code_html);

   $code_html=str_replace($crlf.$crlf.$crlf,$crlf,$code_html);

   $code_html=str_replace($crlf.$crlf,$crlf,$code_html);

   if ($new_fic==1) {

      if (@$fp=fopen("../".$dossier_a."/".$page_a,"r")){

          $msg= "Ce fichier existe déjà, veuillez modifier son nom ou confirmer son remplacement.";

      }else { $new_fic=0;  }

   }

   if ($new_fic==0) {

      require ("vision1.inc");

      $fp=fopen("../".$dossier_a."/".$page_a,"w");

      fputs($fp,stripslashes($code_html));

      fclose($fp);

      $msg= "Fichier enregistré.";

      if ($cmd=="ENREGIST_Q"){

         if( $page_a=="en-tete.htm"){

               require ('comp_index.inc');

               header('location:igere.php?dossier_a=../'.$dossier_a.'/&php1='.$php1);

         }else header('location:c_list.php?dossier_a='.$dossier_a.'&page_a='.$page_a.'&php1='.$php1);

      }else $cmd="";

   }

}

$f=file("../site.trj");

while(list($i,$a)=each($f)) {

  $couple=explode("t",$a);

  if (isset($couple[0]) && isset($couple[1])) $param[$couple[0]]=$couple[1];

}

//echo " Largeur de page ->".rtrim($param["Largeur de la page"])."<- est-ce numérique ? ->".is_numeric(rtrim($param["Largeur de la page"]))."<- <br>";

if (is_numeric(rtrim($param["Largeur de la page"]))) $lg_page=$param["Largeur de la page"];

else { $lg_page="100%"; $lg_page1="85%"; $lg_page2="70%";}

if ($lg_page!="100%") {

   $lg_page1=$lg_page-161;

   $lg_page2=$lg_page-322;

}

if ($fic_c=="accueil" ¦¦ $fic_c=="en-tete") $lg_p=$lg_page; else $lg_p=$lg_page1;

//echo "<h1>Code HTML =>".$code_html."<=</h1>";

if ($code_html<"  " ) {  //echo " Sinon On saute la séquence de rechargement des données.<br>";

   if (@$code_html=file_get_contents("../".$dossier_a."/".$page_a))  $x="";

   else {$new_fic=1;

      $code_html="<h1>TITRE</h1><br>n<br>n<br>n<br>n<br>n<br>n<br>n<hr>n";

   }

}

/*-------------------------------

if (substr($code_html,strlen($code_html)-6,4)!="<hr>") {

   if (substr($code_html,strlen($code_html)-19,13)!="<p><br /></p>" )

        $code_html.="<p><br /></p><hr>";

   elseif (substr($code_html,strlen($code_html)-12,6)!="<br />" )

        $code_html.="<p><br /></p><hr>";

   else $code_html.="<hr>";

}

------------------------------*/

require ("vision2.inc");

$affich_img  = ( isset($_POST['affich_img']) ) ? $_POST['affich_img'] : 0;

$src_i  = ( isset($_POST['src_i']) ) ? $_POST['src_i'] : "";

$vision_lien  = ( isset($_POST['vision_lien']) ) ? $_POST['vision_lien'] : 0;

$vision_tables  = ( isset($_POST['vision_tables']) ) ? $_POST['vision_tables'] : 0;

$vision_mise_en_pages  = ( isset($_POST['vision_mise_en_pages']) ) ? $_POST['vision_mise_en_pages'] : 0;

$vision_pages  = ( isset($_POST['vision_pages']) ) ? $_POST['vision_pages'] : 0;

$stock  = ( isset($_POST['stock']) ) ? $_POST['stock'] : "";

$color_select  = ( isset($_POST['color_select']) ) ? $_POST['color_select'] : '#f0f0f0';

// Selection d'images

$url_web = ( isset($_POST['url_web']) ) ? $_POST['url_web'] :"";

//<! Suite a embrouille rep a été remplacé par rep_i voir vision_images>

//$rep = ( isset($_POST['rep']) ) ? $_POST['rep'] : "..";

$chemin_img1 = ( isset($_POST['chemin_img1']) ) ? $_POST['chemin_img1'] : "";

if (isset($_GET['chemin_img1'])) $chemin_img1=$_GET['chemin_img1'];

$date1=getdate();

$heure=date("H:i:s");

?>

<html>

<head>

<title>Vision RPJJ 2015</title>

<link rel="stylesheet" type="text/css" href="_parametres/css.css" />

<link rel="stylesheet" type="text/css" href="_parametres/css1.css"/>

<style>

.MC {background-color: #ff8080;}

</style>

<script language="JavaScript" type="text/javascript">

cmd_color="col"; recup=""; color_select="<?php echo $color_select;?>";

function montre(elem){

   elem.style.display="";

}

function cache(elem){

   elem.style.display="none";

}

function sav(){

   document.getElementById('code_html').value= document.getElementById('text_wysi').innerHTML;;

   Tsav[nb_sav]=document.getElementById('code_html').value;

   p_sav=nb_sav;

   nb_sav++;

}

function exec_cmd(ExCmd, data) {

   sav();

   document.execCommand(ExCmd, false, data);

}

</script>

</head>

<body style="margin : 0 0 0 0" ><center>

<?php     //---

//<body onload="load()"    onkeypress="CheckKey();">

if ($lg_page <950) $lg_cadre=1000;

else $lg_cadre=$lg_page+50;

echo "<form  ACTION="vision.php" name="vision_f" id="vision_f" METHOD="POST" style="margin : 0 0 0 0" >

      <table bgcolor=#fafafa border=1 width=".$lg_cadre." ><! width=1100><tr><td align=center>"; //width=".$lg_page."

echo "<input TYPE="hidden" NAME="cmd" VALUE="".$cmd."" >

      <input TYPE="hidden" NAME="vision_images_affiche"

      id="vision_images_affiche" VALUE="".$vision_images_affiche."" >";

echo "<INPUT type="hidden" name="dossier_a" value="".$dossier_a."" >

      <INPUT type="hidden" name="php1" value="".$php1."" >

      <INPUT type="hidden" name="cadrage" value="".$cadrage."" >

      <INPUT type="hidden" name="new_fic" value="".$new_fic."" >

      <INPUT type="hidden" name="nom_site" value="".$nom_site."" >

      <INPUT type="hidden" name="stock" id="stock" value="".$stock."" >";

      // ----           modules de saisie   --------------

require('vision_txt.inc');

echo "<div id="table_palette" name="table_palette" style="display : none;" class=menu_d ><table ><tr><td>";

require('vision_palette.inc');

echo "</td><td>";

require('vision_tables.inc');

require('vision_modules.inc');

require('vision_hr.inc');

echo "</td></tr></table></div>";

require('vision_liens.inc');

require('vision_images.inc');

require('vision_polices.inc');

require ('vision_barres_outils.inc');

if ($msg>" ") echo"<h3>".$msg."</h3>";

echo "<table width=".$lg_p." ><tr><td bgcolor=#ffffff>";

// --  FIN DES PARAGRAPHES FIXES Supperposables  :le div suivant est de classe frame à hauteur limitée et possède son ascenseur  -->

echo "<div contentEditable="true"  id="text_wysi"  name="text_wysi"

         style="border:1px solid #808080;height:700px;width:".$lg_p."px; overflow:auto;" >".$code_html."</div>

         </td></tr></table>";

require ('vision_js.inc');

?>

<input type="hidden" id="fic_htm" name="fic_htm" >

</td></tr><tr><td>

<center>

<table border=1><tr><td valign=top>

<input type="button" value="Actualiser le HTML"

  style="font-weight:bold; width:140px;" onclick="affich_html();" >

<br>

<br>

Texte à remplacer<br>

<INPUT type="text" name="text_a" ><br>

Texte de remplacement<br>

<INPUT type="text" name="text_r" ><br>

<INPUT type="button" name="cmdx" value="Remplacer"

  onClick="javascript:var reg = new RegExp(document.forms[0].text_a.value, 'g');

   document.forms[0].code_html.value=document.forms[0].code_html.value.replace(reg,document.forms[0].text_r.value);" ><br><br>

<input type="button" style="font-weight:bold; width:140px;" value="valider" onmousedown="javascript:valid_html();" >

</td><td>

<textarea id=code_html  name=code_html rows="50" cols=<? echo $lg_p/10;?>  ></textarea>

  </td></tr></table>

  </center>

  </td></tr></table>

  </form>

  </center>

<script type="text/javascript">

affich_html();

//alert('abc');

if (document.forms[0].page_a.value=='nouveau')

    document.forms[0].page_a.focus();

/*

if (document.forms[0].page_a.value=='nouveau') { alert('xyz');

    document.forms[0].page_a.focus(); }

    //document.forms[0].page_a.value=prompt('Nommer cette page : ','.htm');

}

if (document.forms[0].page_a.value=='nouveau') {

    document.forms[0].page_a.value=prompt('Nommer cette page : ','.htm');

    document.forms[0].page_a.focus(); }

}

   lg=nom_fic.length;

   p_suff=nom_fic.lastIndexOf(".");

   alert (nom_fic+' lg '+ lg+'p suffixe '+p_suff);

   if (p_suff<1) {  // pas d'extention ajouter .htm

       nom_fic+='.htm';

   }

   document.forms[0].page_a.value=nom_fic;

   document.forms[0].page_a.focus(); }

   return (nom_fic);

} */

</script>

  </body>

</html>

-