Créer un éditeur de texte simple (javascript)

-1

Je voudrais créer un éditeur de texte simple en Javascript. Le défi pour moi est: les boutons au-dessus de mon éditeur de texte doivent être ajustés sur le contenu du DOM. Par exemple: si le curseur se trouve dans une balise 'ul' dans mon éditeur de texte, seul le bouton 'li' devrait être affiché.Créer un éditeur de texte simple (javascript)

J'ai déjà créé une div divisible par le contenu, mais je ne sais pas où chercher. Quelqu'un peut-il m'aider avec quelques idées? Si je peux le faire avec l'aide d'un éditeur de texte JS existant, s'il vous plaît dites.

<html> 
<head> 
    <style> 
     #textEditor { 
      border: 1px solid black; display:block; width: 300px; height: 200px; 
     } 
    </style> 
    <script> 
     var options = ['ul','div']; 
     var subOptions = { 
      'ul':['li'], 
      'div':['div','span', 'p'] 
     }; 
    </script> 

</head> 
<body> 
    <div id="textEditor" contenteditable="true"></div> 
</body> 
</html>

Source

2017-05-04 user1806756

La mise en œuvre de votre propre éditeur de texte javascript est très difficile, je vous recommande de jeter un oeil à la medium editor

Si vous voulez vraiment construire votre propre, et vous voulez savoir quel élément les utilisateurs le curseur est dans. Vous devrez utiliser l'API selection qui prend en charge le navigateur great.

Source

2017-05-04 09:10:56 Abdel

Je fais un éditeur de texte. Son éditeur très simple. En utilisant juste des astuces simples. Voici le code source complet de jquery:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>HTML page editor</title> 
    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Lato" /> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="http://localhost/funnel_v2/files/editorscript/css/font-awesome.min.css"> 
    <link rel="stylesheet" href="style.css"> 
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
</head> 
<body> 
    <div class="row"> 
     <div class="col-sm-6"> 
      <h1 class="edit_me_plz" id="jakir">header</h1> 
     </div> 
     <div class="col-sm-6"> 
      <button class="edit_me_plz btn btn-info" id="button2">Button</button> 
     </div> 
    </div> 


    <script type="text/javascript"> 
     $(function() { 
      $(".edit_me_plz").dblclick(function(){ 
       make_element_editable(this); 
      }); 
     }); 
     function make_element_editable(me){ 
      $('<textarea onblur="set_my_new_text_with_tag(\''+$(me)[0].localName+'\',\''+$(me)[0].id+'\',this)" style="display: block; width: 100%;">'+$(me)[0].innerHTML+'</textarea>').insertAfter(me); 
      $(me).hide(); 
     } 
     function set_my_new_text_with_tag(prev_ele,id,me){ 
      $(me).remove(); 
      $("#"+id)[0].innerHTML = $(me)[0].value; 
      $("#"+id).show(); 
     } 
    </script> 
</body> 
</html>

espérons que vous l'aimerez. Codage heureux. :)

Source

2017-12-14 10:02:41

Créer un éditeur de texte simple (javascript)

Répondre

Questions connexes