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

Question

I have an array. In which I have strored the list of tags. Now what I want, that on click on the element like ( h1, a, strong ) it will find the tags in the given array and apply contenteditable true on the element. On clicking outside the tag or other element the contenteditable will again set to false.

Currently I am using this code for changing the contenteditable true but if I want to edit p I have to write a new code for p same as strong h2, h3, h4 etc

$('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

Solved your issue please use this code it will help you better

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

Answer 2

In your fiddle, you are missing a bit of jquery for the p element.

 $(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

You can do that with following code.

Attach event to all elements except html,body and div to make contenteditable and for other elements attach event to make non content editable.

As per your requirement you can add selectors in $array comma seperated.

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函数，该eval()可以从字符串执行代码，这样您就可以将其置于for循环中，并每次在h之后更改整数。