如何在單擊元素時設置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後的整數。