html 中可编辑的内容段落

Question

我正在 html 中创建一个可内容编辑的段落。我有一个按钮，单击该按钮将使文本加粗。第一次点击时，文本应变为粗体，下次点击时，文本应为正常(不加粗(。这类似于堆栈溢出问题编辑器.html代码：

<button type="button" id="bold" onclick="bold()">B</button>
<div id="content">
<p id="hey" contenteditable="true">Hi how are you</p>
</div>

.JS：

let boldClick=0;
let p=document.getElementById('hey');
function bold(){
if(boldClick%2==0){ 
p.innerHTML=p.innerHTML+' <span contenteditable="true">'+' boldtext'+'</span>';
}
else{
let pNew=document.createElement('p');
pNew.setAttribute("contenteditable","true");
document.getElementById('content').appendChild(pNew);
}
boldClick++;
}

.CSS：

#bold{
font-weight: bold;
}
span{
font-weight: bold;
background-color: grey;
}
p{
display: inline;
}

我可以通过单击按钮使文本更粗。较粗的文本必须位于 span 元素内部，非粗体文本必须位于span元素之外但位于内部p元素。我该如何解决？

Answer 1

方法 1：

let boldClick=0;
let p=document.getElementById('hey');
p.innerHTML=p.innerHTML+' <span contenteditable="true" id="bold">'+' boldtext'+'</span>';
const boldTag = document.getElementById('bold');
function bold(){
if(boldClick%2==0){ 
boldTag.style.fontWeight="";
}
else{
boldTag.style.fontWeigh="bold";
}
boldClick++;
}

方法2：

let boldClick=0;
let p=document.getElementById('hey');
p.innerHTML=p.innerHTML+' <span contenteditable="true" id="bold">'+' boldtext'+'</span>';
const boldTag = document.getElementById('bold');
function bold(){
if(boldClick%2==0){ 
boldTag.id="";
}
else{
boldTag.id="bold";
}
boldClick++;
}

这些方法没有优化，但希望你明白这个概念。

Answer 2

最短的方法。创建一个名为 Bold 的类。将所需的属性添加到此类。使用 Javascript 选择元素并分配一个函数来拥有此类。 一般来说，用css创建一个类并使用javascript是解决问题的最简单方法，什么时候应该添加这个类的哪个元素。

let clicked = false;
function bold() {
let paragraph = document.getElementById("paragraph");
let span = document.getElementById("span");
if (clicked) {
span.contentEditable = false;
span.classList.remove("bold");
clicked = false;
} else {
span.contentEditable = true;
span.classList.add("bold");
clicked = true;
}
}

p {
display: inline;
}
.bold {
font-weight: bold;
}

<button type="button" id="bold-button" onclick="bold()">B</button>
<div id="content">
<p id="paragraph">Hi how are you
<span id="span">how are you</span>
</p>
</div>

Answer 3

首先，请用java脚本而不是java标记您的帖子，相似的名称，不同的语言。以下是您应该使用的代码：

let isBold = false;
let p=document.getElementById('hey');
function bold(){
if(isBold == false){ 
p.style.fontWeight = "bold";
isBold = true;
}
else{
p.style.fontWeight = "normal";
isBold = false;
}
}

它会更改字体粗细(无论是否粗体(，而不是您拥有的复杂代码。如果您只是打开和关闭某些东西(粗体与否(，那么使用布尔值(真+假(true将使其加粗，false将使其正常。对于 HTML 图形，您应该使用 CSS 语言。您可以通过说样式来更改变量的 CSS 值，然后说要更改的内容。