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

Question

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

目前我使用这个代码改变CONTENTEDITABLE真实的，但如果我想编辑p I将不得不写的p一样强大的H2，H3，H4等新的代码

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

$(function(){ 
 
    
 
    $(".textTemplate").draggable({ 
 
    helper: "clone", 
 
    zIndex: 2500 
 
    }); 
 
    
 
    $(".editorDesignView").droppable({ 
 
    \t \t 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) { 
 
\t \t event.preventDefault(); 
 
\t \t $(this).attr('contenteditable', 'true'); 
 
\t }); 
 
});

* {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之外的所有元素以使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 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({ 
 
    \t \t 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) { 
 
\t \t event.preventDefault(); 
 
\t \t $(this).attr('contenteditable', 'true'); 
 
\t }); 
 
    $(document).on('click', 'p', function(event) { 
 
\t \t event.preventDefault(); 
 
\t \t $(this).attr('contenteditable', 'true'); 
 
\t }); 
 

 

 
});

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

您可以使用一个名为eval()一个相当危险的JS功能，它可以从一个字符串执行代码，这样你可以把它放在一个for循环和改变每次h后的整数。