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

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

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

Answer 2

在你的小提琴中，你缺少一些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 3

您可以使用以下代码执行此操作。

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

根据您的要求，您可以在$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 4

你可以使用一个名为eval()的非常危险的js函数，它可以从字符串中执行代码，这样你就可以将它放在for循环中并在{{1}之后更改整数每一次。

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

4 个答案: