创建简单的文本编辑器（javascript）

-1

我想用Javascript创建一个简单的文本编辑器。我面临的挑战是：我的文本编辑器上方的按钮应该根据DOM的内容进行调整。例如：如果光标位于我的文本编辑器中的'ul'-tag内，则只应显示按钮'li'。创建简单的文本编辑器（javascript）

我已经创建了一个'content-editable 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

如果你真的想建立你自己的，你想知道什么元素的用户光标处于。您将需要使用selection API，它总体上有great浏览器支持。

来源

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）

回答

相关问题