Editeur de texte

Par Kam3leoN le 24 Mai 2019 à 19:15 7 +99

Yop Clouder,


Penses tu qu'il soit difficile de coder un éditeur de texte ?

J'en ai ral les fe***s de toutes ses versions payantes en rich-editor et pourri on va pas se mentir.

et encore plus pourri quand elles sont gratuites :)


la gestion des icônes du css ok mais je parle plus de transformer les caractères.

Cette pub permet au site de vivre ...

7 commentaires

Oulalala c'est long tout çà mais je vais regarder çà tranquille demain mais pour ce soir je vais chercher pour tenter le markdown, plus pratique pour moi ;)
à défayut si je trouve rien je le ferai en bbcode


Et oui, il y a 4 ans je faisais du code barbare ... 😂


Après tu peux utiliser le code si dessous et faire ça avec du Markdown. Et pour les émojis tu peux même encore aller plus vite car la c'est old school 😂

Oulalala c'est long tout çà mais je vais regarder çà tranquille demain mais pour ce soir je vais chercher pour tenter le markdown, plus pratique pour moi ;)

à défayut si je trouve rien je le ferai en bbcode 😥😥😥

Alors je n'ai pas retrouvé mon code en Markdown 😥 mais j'avais essayé de faire un éditeur en BBCode 😂


Je te met le code :


<html>
  <head></head>
  <body>
    ...
  <textarea name="message" class="input bbcode-text" id="textarea" placeholder="Participer au topic." required="required"></textarea>
    <div id="a_smiley" class="bbcode-hide">
      <div class="table-responsive bbcode-cadre2">
        <div class="editor">
          <ul class="bbcode-ul2">
            <li data-tag=":)" class="bbcode_smiley"><img class="emojis-g" src="Emojis/emojis/1f642.svg" alt=":)"/></li>
            <li data-tag=":(" class="bbcode_smiley"><img class="emojis-g" src="Emojis/emojis/1f641.svg" alt=":("/></li>
            <li data-tag=":p" class="bbcode_smiley"><img class="emojis-g" src="Emojis/emojis/1f61b.svg" alt=":p"/></li>
            <li data-tag=":D" class="bbcode_smiley"><img class="emojis-g" src="Emojis/emojis/1f603.svg" alt=":D"/></li>
            <li data-tag=":$" class="bbcode_smiley"><img class="emojis-g" src="Emojis/emojis/1f60a.svg" alt=":$"/></li>
            <li data-tag=":@" class="bbcode_smiley"><img class="emojis-g" src="Emojis/emojis/1f621.svg" alt=":@"/></li>
            <li data-tag=":x" class="bbcode_smiley"><img class="emojis-g" src="Emojis/emojis/1f62c.svg" alt=":x"/>
            <li data-tag=";)" class="bbcode_smiley"><img class="emojis-g" src="Emojis/emojis/1f609.svg" alt=";)"/></li>
            <li data-tag=":-/" class="bbcode_smiley"><img class="emojis-g" src="Emojis/emojis/1f615.svg" alt=":-/"/></li>
            <li data-tag=":'(" class="bbcode_smiley"><img class="emojis-g" src="Emojis/emojis/1f62d.svg" alt=":'("/></li>
            <li data-tag="^^" class="bbcode_smiley"><img class="emojis-g" src="Emojis/emojis/1f604.svg" alt="^^"/></li>
            <li data-tag="^'^" class="bbcode_smiley"><img class="emojis-g" src="Emojis/emojis/1f605.svg" alt="^'^"/></li>
            <li data-tag=":demon:" class="bbcode_smiley"><img class="emojis-g" src="Emojis/emojis/1f608.svg" alt=":demon:"/></li>
            <li data-tag=":inlove:" class="bbcode_smiley"><img class="emojis-g" src="Emojis/emojis/1f60d.svg" alt=":inlove:"/></li>
            <li data-tag=":*" class="bbcode_smiley"><img class="emojis-g" src="Emojis/emojis/1f618.svg" alt=":*"/></li>
            <li data-tag=":s" class="bbcode_smiley"><img class="emojis-g" src="Emojis/emojis/1f616.svg" alt=":s"/></li>
            <li data-tag=":o" class="bbcode_smiley"><img class="emojis-g" src="Emojis/emojis/1f62f.svg" alt=":o"/></li>
            <li data-tag="<3" class="bbcode_smiley"><img class="emojis-g" src="Emojis/emojis/2764.svg" alt="<3"/></li>
            <li data-tag=":8" class="bbcode_smiley"><img class="emojis-g" src="Emojis/emojis/1f60e.svg" alt=":8"/></li>
            <li data-tag="(a)" class="bbcode_smiley"><img class="emojis-g" src="Emojis/emojis/1f602.svg" alt="(a)"/></li>
            <li data-tag=":')" class="bbcode_smiley"><img class="emojis-g" src="Emojis/emojis/1f607.svg" alt=":')"/></li>
          </ul>
        </div>
      </div>
    </div>
  </body>
</html>


JavaScript :


//==================================//
// Pour faire fonctionner le BBCode //
//==================================//
$(document).ready(function() {
  $('.editor ul li').click(function() {
    var tag = $(this).attr("data-tag");
    if(typeof tag === 'undefined'){
      // Ne rien faire
    }else{
      var textareaLength = $('#textarea').val().length;
      var start = $('#textarea')[0].selectionStart;
      var end = $('#textarea')[0].selectionEnd;
      var selectedText = $('#textarea').val().substring(start, end);
      if(tag == 'bold'){
        if(selectedText == ''){ selectedText = ' gras ' }
        var replacement = '[b]' + selectedText + '[/b]';
      }
      if(tag == 'italic'){
        if(selectedText == ''){ selectedText = ' italique ' }
        var replacement = '[i]' + selectedText + '[/i]';
	  }
	  if(tag == 'underline'){
    	  if(selectedText == ''){ selectedText = ' souligné ' }
	      var replacement = '[u]' + selectedText + '[/u]';
	  }
	  if(tag == 'lien'){
    	  if(selectedText == ''){ selectedText = ' lien ' }
	      var replacement = '[url= lien ]' + selectedText + '[/url]';
	  }
	  if(tag == 'size'){
    	  if(selectedText == ''){ selectedText = ' taille ' }
	      var replacement = '[size=22]' + selectedText + '[/size]';
	  }
	  if(tag == 'quote'){
    	  if(selectedText == ''){ selectedText = ' citation ' }
	      var replacement = '[quote]' + selectedText + '[/quote]';
	  }
	  if(tag == ':)'){
    	  if(selectedText == ''){ selectedText = ' :) ' }
	      var replacement = selectedText;
	  }
	  if(tag == ':('){
    	  if(selectedText == ''){ selectedText = ' :( ' }
	      var replacement = selectedText;
	  }
	  if(tag == ':p'){
    	  if(selectedText == ''){ selectedText = ' :p ' }
	      var replacement = selectedText;
	  }
	  if(tag == ':D'){
    	  if(selectedText == ''){ selectedText = ' :D ' }
	      var replacement = selectedText;
	  }
	  if(tag == ':$'){
    	  if(selectedText == ''){ selectedText = ' :$ ' }
	      var replacement = selectedText;
	  }
	  if(tag == ':@'){
    	  if(selectedText == ''){ selectedText = ' :@ ' }
	      var replacement = selectedText;
	  }
      if(tag == ':x'){
        if(selectedText == ''){ selectedText = ' :x ' }
	    var replacement = selectedText;
	  }
	  if(tag == ';)'){
    	  if(selectedText == ''){ selectedText = ' ;) ' }
	      var replacement = selectedText;
      }
	  if(tag == ':-/'){
    	  if(selectedText == ''){ selectedText = ' :-/ ' }
	      var replacement = selectedText;
	  }
	  if(tag == ':\'('){
    	  if(selectedText == ''){ selectedText = ' :\'( ' }
	      var replacement = selectedText;
      }
      if(tag == '^^'){
    	  if(selectedText == ''){ selectedText = ' ^^ ' }
	      var replacement = selectedText;
	  }
	  if(tag == '^\'^'){
    	  if(selectedText == ''){ selectedText = ' ^\'^ ' }
	      var replacement = selectedText;
	  }
	  if(tag == ':inlove:'){
    	  if(selectedText == ''){ selectedText = ' :inlove: ' }
	      var replacement = selectedText;
	  }
	  if(tag == ':demon:'){
    	  if(selectedText == ''){ selectedText = ' :demon: ' }
	      var replacement = selectedText;
      }
      if(tag == ':*'){
        if(selectedText == ''){ selectedText = ' :* ' }
	    var replacement = selectedText;
  	  }
	  if(tag == ':s'){
    	  if(selectedText == ''){ selectedText = ' :s ' }
	      var replacement = selectedText;
	  }
	  if(tag == ':o'){
    	  if(selectedText == ''){ selectedText = ' :o ' }
	      var replacement = selectedText;
	  }
	  if(tag == '<3'){
    	  if(selectedText == ''){ selectedText = ' <3 ' }
	      var replacement = selectedText;
	  }
	  if(tag == ':8'){
    	  if(selectedText == ''){ selectedText = ' :8 ' }
	      var replacement = selectedText;
	  }
	  if(tag == '(a)'){
    	  if(selectedText == ''){ selectedText = ' (a) ' }
	      var replacement = selectedText;
	  }
	  if(tag == ':\')'){
    	  if(selectedText == ''){ selectedText = ' :\') ' }
	      var replacement = selectedText;
	  }
	  $('#textarea').val($('#textarea').val().substring(0, start) + replacement + $('#textarea').val().substring(end, textareaLength));
    	  var evt = document.createEvent('Event');
    	  evt.initEvent('autosize.update', true, false);
    	  ta.dispatchEvent(evt);
      }
  });
	
  $('#a_Smiley').on( 'click' , function(){
    $('#a_smiley').fadeToggle();
   });
});		


Bon c'est du vieux code donc faut l'optimiser à fond 😂😂

Si jamais tu le retrouve je repartagerai mes transformation apporté pour ceux qu'il le souhaite ;)

Je vais regarder si je l'ai encore mais je ne te promets rien car c'était à mes débuts 😅

Salut C ;)


Ok alors si tu as fais le tiens en markdown et que tu veux bien partager ton code je suis preneur d'autant que c'est justement celui-ci qui m’intéressait pour une raison très simple c'est que c'est l'éditeur de Discord et de Github donc tip top pour faire du copier coller sans se prendre la tête ^^

Yo Kam3leoN,


J'avais déjà essayé de faire moi-même un éditeur de texte avec les connaissances que j'avais en JavaScript et clairement ça sera largement mieux d'en faire un soi-même mais ça va te prendre un temps fou. J'ai mis 3 mois pour faire le mien.


Niveau de difficulté, ce n'est pas réellement difficile mais tu vas t'arracher les cheveux souvent 😁


Après il faut que tu choisisses le type de ton éditeur : BBCODE, Markdown, HTML. Le Markdown c'est le plus simple pour débuter 😀


Et je connais quelques éditeurs gratuits si tu veux 😁

Cette pub permet au site de vivre ...