如何在单击元素时设置 contenteditable true

Question

我有一个数组。我在其中存储了标签列表。现在我想要的是，点击像（h1，a，strong）这样的元素，它将在给定数组中找到标签并在元素上应用 contenteditable true 。在标签或其他元素外部单击时，contenteditable 将再次设置为 false。

目前我正在使用此代码来更改 contenteditable true 但如果我想编辑 p 我必须为 p 编写一个与强 h2、h3、h4 等相同的新代码

$('h1').click(function(event) {
    $(this).attr('contenteditable', 'true');
});

$(function(){
  
  $(".textTemplate").draggable({
    helper: "clone",
    zIndex: 2500
  });
  
  $( ".editorDesignView" ).droppable({
  		accept: '.textTemplate',
      drop: function( event, ui ) {
        var html = `<div id="" class="dynamic"><h1 contenteditable="false">Title</h1><p contenteditable="false" style="padding: 5px;">Add your text here.</p></div>`;
  $(html).appendTo(this).hide().slideDown();     
      }
  });
    
  $(document).on('click', 'h1', function(event) {
		event.preventDefault();
		$(this).attr('contenteditable', 'true');
	});
});

* {box-sizing: border-box;}
#wrapper {width: 100%; height: 100vh;}
.templateWrapper {width: 30%; height: 100%;float:left;overflow-y: scroll;}
.editorBlock {width: 70%; height: 100%;float:left;position: relative;background-color:#f1f1f1}


.editorDesignView {width: 100%; height: 100%;}

.dynamic {
   background: #4073ff;width: 80%; margin: 10px auto; padding: 10px;
}

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<div id="wrapper">
  <div class="templateWrapper">
    <div class="textTemplate" style="margin-top:20px;" class="template">
        <div>drag me</div>
    </div>
   
    
  </div>
  <div class="editorBlock" style="height:100%;">
    <div class="editorDesignView" style="height:100%;"></div>
  </div>
</div>

Answer 1

你可以用下面的代码做到这一点。

将事件附加到除 html、body 和 div 之外的所有元素以使内容可编辑，并为其他元素附加事件以使非内容可编辑。

根据您的要求，您可以在$array 逗号分隔中添加选择器。

var $array=[ 'body', 'div', 'html' ];
var notSelectorString = $array.join(",");
$('*').not(notSelectorString).on('click', function(event) {
   $(this).attr('contenteditable', 'true');
}).on("focusout",function(e){  $(this).attr('contenteditable', 'false');});

$(notSelectorString).on('click', function(event) {
   $(this).attr('contenteditable', 'false');
});

Answer 2

解决了您的问题，请使用此代码，它将更好地帮助您

$(document).on('click', '*', function(event) {
        event.preventDefault();
        $(this).attr('contenteditable', 'true');
    });

Answer 3

在您的小提琴中，您缺少一些 p 元素的 jquery。

$(function(){
  
  $(".textTemplate").draggable({
    helper: "clone",
    zIndex: 2500
  });
  $( ".editorDesignView" ).droppable({
  		accept: '.textTemplate',
      drop: function( event, ui ) {
        var html = '<div id="" style="background: #4073ff;width: 80%; margin: 10px auto; padding: 10px;"><h1 contenteditable="false">Title</h1><p contenteditable="false" style="padding: 5px;">Add your text here.</p></div>';
  $(html).appendTo(this).hide().slideDown();
  
      }
    });
    
  $(document).on('click', 'h1', function(event) {
		event.preventDefault();
		$(this).attr('contenteditable', 'true');
	});
    $(document).on('click', 'p', function(event) {
		event.preventDefault();
		$(this).attr('contenteditable', 'true');
	});


});

* {box-sizing: border-box;}
#wrapper {width: 100%; height: 100vh;}
.templateWrapper {width: 30%; height: 100%;float:left;overflow-y: scroll;}
.editorBlock {width: 70%; height: 100%;float:left;position: relative;background-color:#f1f1f1}


.editorDesignView {width: 100%; height: 100%;}

<div id="wrapper">
  <div class="templateWrapper">
    <div class="textTemplate" style="margin-top:20px;" class="template">
        <div>drag me</div>
    </div>
   
    
  </div>
  <div class="editorBlock" style="height:100%;">
    <div class="editorDesignView" style="height:100%;"></div>
  </div>
</div>

Answer 4

你可以使用一个相当危险的js函数eval()，它可以从一个字符串中执行代码，这样你就可以把它放在一个for循环中，每次都改变h后面的整数。