シンプルなテキストエディタ（javascript）を作成する

-1

Javascriptで簡単なテキストエディタを作成したいと思います。私の課題は、テキストエディタ上のボタンをDOMの内容に合わせて調整することです。たとえば、カーソルがテキストエディタの 'ul'タグ内にある場合、ボタン 'li'のみが表示されます。シンプルなテキストエディタ（javascript）を作成する

私はすでに「コンテンツ編集可能なdiv」を作成しましたが、次に見たい場所はわかりません。誰かが私にいくつかのアイデアを手伝ってくれる？既存のJS-テキストエディタの助けを借りてこれを行うことができれば、言ってください。

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

出典

2017-05-04 user1806756

独自のJavaScriptのテキストエディタを実装することは非常に困難である、私はあなたが本当にあなた自身を構築したい場合は、medium editor

を見てすることをお勧めします、そして、あなたはどのような要素のユーザーを知りたいですカーソルは全体でgreatのブラウザをサポートするselection APIを使用する必要があります。

出典

2017-05-04 09:10:56 Abdel

私はテキストエディタを作成します。非常にシンプルなエディタです。ちょっとしたトリックを使って。ここでは、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>

あなたがそれを希望します。ハッピーコーディング。 :)

出典

2017-12-14 10:02:41

シンプルなテキストエディタ（javascript）を作成する

答えて

関連する問題