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

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

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

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

$（函数（）{
$（“.textTemplate”）.draggable({
助手：“克隆”，
zIndex:2500
});
$（“.editorDesignView”）.dropable({
接受：'.textTemplate'，
drop：函数（事件、用户界面）{
var html=`Title
在此处添加文本。
`；
$（html）.appendTo（this.hide（）.slideDown（）；
}
});
$（文档）。在（'click'，'h1'，函数（事件）{
event.preventDefault（）；
$（this.attr（'contenteditable'，'true'）；
});
});
*{框大小：边框框；}
#包装{宽度：100%；高度：100vh；}
.templateWrapper{width:30%；height:100%；float:left；overflow-y:scroll；}
.editorBlock{宽度：70%；高度：100%；浮动：左侧；位置：相对；背景色：#f1f1}
.editorDesignView{宽度：100%；高度：100%；}
.动态{
背景：4073ff；宽度：80%；边距：10px自动；填充：10px；
}

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

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

在您的小提琴中，您缺少了一点p元素的jquery


$（函数（）{
$（“.textTemplate”）.draggable({
助手：“克隆”，
zIndex:2500
});
$（“.editorDesignView”）.dropable({
接受：'.textTemplate'，
drop：函数（事件、用户界面）{
var html='Title
在此处添加文本。
；
$（html）.appendTo（this.hide（）.slideDown（）；
}
});
$（文档）。在（'click'，'h1'，函数（事件）{
event.preventDefault（）；
$（this.attr（'contenteditable'，'true'）；
});
$（文档）。在（'click'，'p'，函数（事件）{
event.preventDefault（）；
$（this.attr（'contenteditable'，'true'）；
});
});
*{框大小：边框框；}
#包装{宽度：100%；高度：100vh；}
.templateWrapper{width:30%；height:100%；float:left；overflow-y:scroll；}
.editorBlock{宽度：70%；高度：100%；浮动：左侧；位置：相对；背景色：#f1f1}
.editorDesignView{宽度：100%；高度：100%；}

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

将事件附加到除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');
});

您可以使用一个名为
eval（）
的相当危险的js函数，它可以从字符串执行代码，这样您就可以将它放入
for
循环中，并每次更改
h
后的整数。
您的代码适用于me@CarstenLøvboAndersen好的。但是请帮助我，当我无法重现您的问题时，我如何帮助您如果您想将事件附加到多个元素，那么您可以使用
$（'h1，h2，h3，h4，p，strong'）
或
$（'*'）
为所有元素执行此操作@PrashantShirke但如果我不希望它应用于div，Section这并不能解决当已经有一个可编辑元素并且另一个元素被单击时会发生什么情况。我知道，但告诉我是否要在h2，h3上应用contenteditable true，h4等，所以我必须多次编写此代码，如果我想在包含$array=['body'，div'，html']的not标记中添加数组，我该如何做最后一件事，在标记或其他元素外部单击contenteditable将再次设置为false。意味着（假设h1是可编辑的，但当我单击p或外侧h1区域时，contenteditable将在h1中设置为false。）然后您可以在focusout事件上设置contenteditable false。检查更新的答案！是的，非常感谢
eval（）
绝对不是解决这个问题的合适方法。