Erstellen Sie einen einfachen Texteditor (Javascript)

-1

Ich möchte einen einfachen Texteditor in Javascript erstellen. Die Herausforderung für mich ist: Die Buttons über meinem Texteditor sollten an den Inhalt des DOM angepasst werden. Zum Beispiel: Wenn sich der Cursor innerhalb eines 'ul'-Tags in meinem Texteditor befindet, sollte nur der Button' li 'angezeigt werden.Erstellen Sie einen einfachen Texteditor (Javascript)

Ich habe bereits ein 'editierbares div' erstellt, aber ich weiß nicht, wo ich als nächstes suchen soll. Kann mir jemand bei einigen Ideen helfen? Wenn ich dies mit Hilfe eines vorhandenen JS-Texteditors machen kann, sagen Sie bitte.

<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>

Quelle

2017-05-04 user1806756

Ihre eigenen Javascript-Texteditor implementieren sehr anspruchsvoll ist, würde ich empfehlen Sie bei medium editor

einen Blick haben Wenn Sie wirklich Ihre eigene bauen wollen, und Sie wollen wissen, was Element der Benutzer Cursor ist in. Sie müssen die selection API verwenden, die insgesamt great Browser unterstützt.

Quelle

2017-05-04 09:10:56 Abdel

Ich mache einen Texteditor. Sein sehr super einfacher Editor. Mit einfachen Tricks. Hier ist Jquery voller Quellcode:

<!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>

hoffe es gefällt dir. Glückliche Kodierung. :)

Quelle

2017-12-14 10:02:41

Erstellen Sie einen einfachen Texteditor (Javascript)

Antwort

Verwandte Themen